├── .gitignore ├── .travis.yml ├── README.md ├── demo-library ├── .angular-cli.json ├── .editorconfig ├── build.js ├── e2e │ ├── app.e2e-spec.ts │ ├── app.po.ts │ └── tsconfig.e2e.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── protractor.conf.js ├── src │ ├── app │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── libex │ │ │ ├── hello.service.ts │ │ │ ├── hello │ │ │ ├── hello.component.html │ │ │ ├── hello.component.scss │ │ │ └── hello.component.ts │ │ │ ├── index.ts │ │ │ ├── libex.module.ts │ │ │ ├── package.json │ │ │ └── theming.scss │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.scss │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── typings.d.ts ├── tsconfig.json └── tslint.json ├── example-consumer ├── .angular-cli.json ├── .editorconfig ├── README.md ├── e2e │ ├── app.e2e-spec.ts │ ├── app.po.ts │ └── tsconfig.e2e.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── protractor.conf.js ├── src │ ├── app │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.scss │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── typings.d.ts ├── tsconfig.json └── tslint.json ├── lerna.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | dist 5 | tmp 6 | out-tsc 7 | dist-lib 8 | 9 | # dependencies 10 | node_modules 11 | 12 | # IDEs and editors 13 | .idea 14 | .project 15 | .classpath 16 | .c9/ 17 | *.launch 18 | .settings/ 19 | *.sublime-workspace 20 | 21 | # IDE - VSCode 22 | .vscode/* 23 | !.vscode/settings.json 24 | !.vscode/tasks.json 25 | !.vscode/launch.json 26 | !.vscode/extensions.json 27 | 28 | # misc 29 | /.sass-cache 30 | /connect.lock 31 | /coverage 32 | /libpeerconnection.log 33 | npm-debug.log 34 | testem.log 35 | /typings 36 | 37 | # e2e 38 | /e2e/*.js 39 | /e2e/*.map 40 | 41 | # System Files 42 | .DS_Store 43 | Thumbs.db 44 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | dist: trusty 3 | addons: 4 | apt: 5 | sources: 6 | - google-chrome 7 | packages: 8 | - google-chrome-stable 9 | language: node_js 10 | node_js: 11 | - 8 12 | before_script: 13 | - export DISPLAY=:99.0 14 | - sh -e /etc/init.d/xvfb start 15 | script: 16 | - cd demo-library 17 | - npm install 18 | - npm run ci 19 | 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular Library Example 2 | 3 | This repo consists of two parts: 4 | 5 | - demo-library: Demonstrates a way how to write a (probably company internal) Angular library. For a way how to write a public library, please visit: https://github.com/dherges/ng-packagr 6 | - example-consumer: A small demo of how to use the library 7 | 8 | It is also important to understand how the demo-library is setup itself. 9 | It's basically a regular Angular application: 10 | 11 | ``` 12 | src/app 13 | libex (libex is the module name) 14 | ... 15 | app.component.ts 16 | app.module.ts 17 | build.js 18 | ``` 19 | 20 | **Only what's inside of libex will get published to npm.** That makes `app.module.ts` just a **playground** for you to test out your library. It's ideal to develop against, as all the components from your library are imported directly and you can work with hot reload and don't have to publish to npm (or run npm link) each time you want to implement or test a feature. 21 | 22 | The only difference between the app.module.ts in `example-consumer/src/app` and `demo-library/src/app` is that `example-consumer` actually gets the published library from npm. This just serves the purpose for everyone reading the tutorial to see how exactly to use the published library. **Notice the modified tsconfig.json of the example-consumer!** If you want to test auto-import in IDE, I suggest opening `exmaple-consumer` as a separate project, otherwise the IDE will import the TypeScript classes from the demo-library. 23 | 24 | ## How are things published? 25 | All the library-building and -publishing logic is in `demo-library/build.js`. It's a lot less complex than in other library-generators, since it **just publishes TypeScript source files**. However, this requires an extra step on the side of the consumer, which is to add `node_modules/libex/index.ts` as sources to the tsconfig.json. You can run the script with `node build.js` from the demo-library folder. 26 | 27 | ## More cool things (optional) 28 | 29 | To build real world libraries, a bit more than the minimal example can be helpful. 30 | 31 | 32 | ### Theming 33 | 34 | Additionally to what's minimally required to build a library, I've added a way to "theme" your library. The implementation is done in an equivalent way to the theming of Angular's Material Design library. 35 | 36 | ### Lerna 37 | 38 | The `example-consumer` and the `demo-library` are in one repository. This is commonly referred to as a "Monorepo". This is quite useful to speed up development, as you can simply run `lerna bootstrap` (once you've installed `lerna`: https://github.com/lerna/lerna), which will symlink everything. Then you'll have the demo library as a **symlink** in the `node_modules` of `example-consumer`. If you now update something in `demo-library`, the project auto-refreshes even when started from `example-consumer`. 39 | -------------------------------------------------------------------------------- /demo-library/.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "libex-project" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "dist", 10 | "assets": [ 11 | "assets", 12 | "favicon.ico" 13 | ], 14 | "index": "index.html", 15 | "main": "main.ts", 16 | "polyfills": "polyfills.ts", 17 | "test": "test.ts", 18 | "tsconfig": "tsconfig.app.json", 19 | "testTsconfig": "tsconfig.spec.json", 20 | "prefix": "libex", 21 | "styles": [ 22 | "styles.scss" 23 | ], 24 | "scripts": [], 25 | "environmentSource": "environments/environment.ts", 26 | "environments": { 27 | "dev": "environments/environment.ts", 28 | "prod": "environments/environment.prod.ts" 29 | } 30 | } 31 | ], 32 | "e2e": { 33 | "protractor": { 34 | "config": "./protractor.conf.js" 35 | } 36 | }, 37 | "lint": [ 38 | { 39 | "project": "src/tsconfig.app.json" 40 | }, 41 | { 42 | "project": "src/tsconfig.spec.json" 43 | }, 44 | { 45 | "project": "e2e/tsconfig.e2e.json" 46 | } 47 | ], 48 | "test": { 49 | "karma": { 50 | "config": "./karma.conf.js" 51 | } 52 | }, 53 | "defaults": { 54 | "styleExt": "scss", 55 | "component": {} 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /demo-library/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /demo-library/build.js: -------------------------------------------------------------------------------- 1 | const fsextra = require('fs-extra'); 2 | const { exec } = require('child_process'); 3 | 4 | fsextra.copy('./src/app/libex', './dist-lib', err => { 5 | if (err) return console.error(err); 6 | console.log('Copied files'); 7 | createDeclarations(); 8 | }); 9 | 10 | function createDeclarations() { 11 | exec('cd dist-lib && tsc index.ts --declaration', () => { 12 | console.log('Generated declarations (and some JS files...)'); 13 | createPackageJson(); 14 | }); 15 | } 16 | 17 | function createPackageJson() { 18 | const packageJSON = { 19 | "name": "libex", 20 | "version": "2.0.0", 21 | "description": "How to build libraries with Angular (2, 4, 5...)", 22 | "main": "index.js", 23 | "scripts": { 24 | "test": "echo \"Error: no test specified\" && exit 1" 25 | }, 26 | "repository": { 27 | "type": "git", 28 | "url": "git+https://github.com/bersling/angular-library-example" 29 | }, 30 | "keywords": [ 31 | "Angular", 32 | "Angular2", 33 | "Library", 34 | "Example" 35 | ], 36 | "author": "bersling@gmail.com", 37 | "license": "MIT", 38 | "bugs": { 39 | "url": "https://github.com/bersling/angular-library-example/issues" 40 | }, 41 | "homepage": "https://github.com/bersling/angular-library-example#readme", 42 | "types": "index.d.ts" 43 | }; 44 | fsextra.writeJson('./dist-lib/package.json', packageJSON, {spaces: 2}, err => { 45 | if (err) return console.error(err); 46 | console.log('Created package.json'); 47 | }); 48 | 49 | } 50 | -------------------------------------------------------------------------------- /demo-library/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import {browser} from 'protractor'; 2 | import {LibexProjectPage} from './app.po'; 3 | 4 | describe('libex-project App', () => { 5 | let page: LibexProjectPage; 6 | 7 | beforeEach(() => { 8 | page = new LibexProjectPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | page.getHelloButton().click(); 14 | const alertDialog = browser.switchTo().alert(); 15 | expect(alertDialog.getText()).toEqual('hello!'); 16 | expect(alertDialog.accept).toBeDefined(); 17 | alertDialog.accept(); 18 | browser.sleep(200); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /demo-library/e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class LibexProjectPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getHelloButton() { 9 | return element(by.id('hello-button')); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /demo-library/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "node" 10 | ] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /demo-library/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/0.13/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular/cli'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular/cli/plugins/karma') 14 | ], 15 | client:{ 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | reports: [ 'html', 'lcovonly' ], 20 | fixWebpackSourcePaths: true 21 | }, 22 | angularCli: { 23 | environment: 'dev' 24 | }, 25 | reporters: ['progress', 'kjhtml'], 26 | port: 9876, 27 | colors: true, 28 | logLevel: config.LOG_INFO, 29 | autoWatch: true, 30 | browsers: ['Chrome'], 31 | singleRun: false 32 | }); 33 | }; 34 | -------------------------------------------------------------------------------- /demo-library/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "libex-project", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "e2e": "ng e2e", 12 | "test:once": "ng test --watch=false", 13 | "ci": "npm run lint && npm run test:once && npm run e2e" 14 | }, 15 | "private": true, 16 | "dependencies": { 17 | "@angular/animations": "^5.0.0", 18 | "@angular/common": "^5.0.0", 19 | "@angular/compiler": "^5.0.0", 20 | "@angular/core": "^5.0.0", 21 | "@angular/forms": "^5.0.0", 22 | "@angular/http": "^5.0.0", 23 | "@angular/platform-browser": "^5.0.0", 24 | "@angular/platform-browser-dynamic": "^5.0.0", 25 | "@angular/router": "^5.0.0", 26 | "core-js": "^2.4.1", 27 | "fs-extra": "^5.0.0", 28 | "rxjs": "^5.1.0", 29 | "zone.js": "^0.8.4" 30 | }, 31 | "devDependencies": { 32 | "@angular/cli": "^1.7.2", 33 | "@angular/compiler-cli": "^5.0.0", 34 | "@angular/language-service": "^5.0.0", 35 | "@types/jasmine": "2.5.45", 36 | "@types/node": "~6.0.60", 37 | "codelyzer": "^4.1.0", 38 | "jasmine-core": "~2.6.2", 39 | "jasmine-spec-reporter": "~4.1.0", 40 | "karma": "~1.7.0", 41 | "karma-chrome-launcher": "~2.1.1", 42 | "karma-cli": "~1.0.1", 43 | "karma-coverage-istanbul-reporter": "^1.2.1", 44 | "karma-jasmine": "~1.1.0", 45 | "karma-jasmine-html-reporter": "^0.2.2", 46 | "protractor": "~5.1.2", 47 | "ts-node": "^5.0.1", 48 | "tslint": "^5.9.1", 49 | "typescript": "~2.6.2" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /demo-library/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 100000, 8 | specs: [ 9 | './e2e/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 100000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: 'e2e/tsconfig.e2e.json' 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | }, 28 | getPageTimeout: 100000 29 | }; 30 | -------------------------------------------------------------------------------- /demo-library/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |

Example App

2 |

3 | The cool thing about developing a pure-typescript Angular library is, that it's like developing a regular app! 4 | This helps to develop libraries at a high pace, since you can use all the tools you're familiar with (angular cli etc.) 5 | and you'll have an example library-client to test things out. Here's an example from the library: 6 |

7 | 8 |

9 | And here we'll call the service 'Hello Service' from the library: 10 | 11 |

12 |
13 | I'm outside of hello... but still I get styled... :( 14 |
15 | -------------------------------------------------------------------------------- /demo-library/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bersling/angular-library-example/7c56f52965d8e01d40c7fde48770e3e154710141/demo-library/src/app/app.component.scss -------------------------------------------------------------------------------- /demo-library/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | describe('app', () => { 2 | it('should be able to test', () => { 3 | expect(true).toBe(true); 4 | }) 5 | }); 6 | -------------------------------------------------------------------------------- /demo-library/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import {HelloService} from './libex'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.scss'] 8 | }) 9 | export class AppComponent { 10 | 11 | constructor(private helloService: HelloService) {} 12 | 13 | sayHello() { 14 | this.helloService.sayHello(); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /demo-library/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppComponent } from './app.component'; 5 | 6 | import { LibexModule } from './libex/libex.module'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | AppComponent 11 | ], 12 | imports: [ 13 | BrowserModule, 14 | LibexModule.forRoot() 15 | ], 16 | providers: [], 17 | bootstrap: [AppComponent] 18 | }) 19 | export class AppModule { } 20 | -------------------------------------------------------------------------------- /demo-library/src/app/libex/hello.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable() 4 | export class HelloService { 5 | 6 | constructor() { } 7 | 8 | sayHello() { 9 | alert('hello!'); 10 | } 11 | 12 | } 13 | -------------------------------------------------------------------------------- /demo-library/src/app/libex/hello/hello.component.html: -------------------------------------------------------------------------------- 1 |

2 | hello works! 3 |

4 | -------------------------------------------------------------------------------- /demo-library/src/app/libex/hello/hello.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bersling/angular-library-example/7c56f52965d8e01d40c7fde48770e3e154710141/demo-library/src/app/libex/hello/hello.component.scss -------------------------------------------------------------------------------- /demo-library/src/app/libex/hello/hello.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'libex-hello', 5 | templateUrl: './hello.component.html', 6 | styleUrls: ['./hello.component.scss'] 7 | }) 8 | export class HelloComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /demo-library/src/app/libex/index.ts: -------------------------------------------------------------------------------- 1 | export {LibexModule} from './libex.module'; 2 | export {HelloService} from './hello.service'; 3 | export {HelloComponent} from './hello/hello.component'; 4 | 5 | -------------------------------------------------------------------------------- /demo-library/src/app/libex/libex.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { HelloComponent } from './hello/hello.component'; 4 | import { HelloService } from './hello.service'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | CommonModule 9 | ], 10 | declarations: [HelloComponent], 11 | exports: [HelloComponent] 12 | }) 13 | export class LibexModule { 14 | 15 | static forRoot() { 16 | return { 17 | ngModule: LibexModule, 18 | providers: [ HelloService ] 19 | } 20 | } 21 | 22 | } 23 | -------------------------------------------------------------------------------- /demo-library/src/app/libex/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "libex", 3 | "version": "2.0.0", 4 | "description": "An example angular2 library", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1" 7 | }, 8 | "author": "", 9 | "license": "MIT" 10 | } 11 | -------------------------------------------------------------------------------- /demo-library/src/app/libex/theming.scss: -------------------------------------------------------------------------------- 1 | @mixin hello($theme) { 2 | $hello-background: map-get($theme, 'hello-background'); 3 | .libex-hello { 4 | background: $hello-background; 5 | } 6 | } 7 | 8 | 9 | @mixin apply-theme($theme) { 10 | @include hello($theme); 11 | } 12 | 13 | -------------------------------------------------------------------------------- /demo-library/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bersling/angular-library-example/7c56f52965d8e01d40c7fde48770e3e154710141/demo-library/src/assets/.gitkeep -------------------------------------------------------------------------------- /demo-library/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /demo-library/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /demo-library/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bersling/angular-library-example/7c56f52965d8e01d40c7fde48770e3e154710141/demo-library/src/favicon.ico -------------------------------------------------------------------------------- /demo-library/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LibexProject 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo-library/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule); 12 | -------------------------------------------------------------------------------- /demo-library/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following to support `@angular/animation`. */ 41 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | import 'core-js/es6/reflect'; 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** ALL Firefox browsers require the following to support `@angular/animation`. **/ 50 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 51 | 52 | 53 | 54 | /*************************************************************************************************** 55 | * Zone JS is required by Angular itself. 56 | */ 57 | import 'zone.js/dist/zone'; // Included with Angular CLI. 58 | 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | 65 | /** 66 | * Date, currency, decimal and percent pipes. 67 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 68 | */ 69 | // import 'intl'; // Run `npm install --save intl`. 70 | /** 71 | * Need to import at least one locale-data with intl. 72 | */ 73 | // import 'intl/locale-data/jsonp/en'; 74 | -------------------------------------------------------------------------------- /demo-library/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import 'app/libex/theming'; 3 | 4 | $theme: ( 5 | 'hello-background': yellow 6 | ); 7 | 8 | @include apply-theme($theme); 9 | 10 | -------------------------------------------------------------------------------- /demo-library/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/long-stack-trace-zone'; 4 | import 'zone.js/dist/proxy.js'; 5 | import 'zone.js/dist/sync-test'; 6 | import 'zone.js/dist/jasmine-patch'; 7 | import 'zone.js/dist/async-test'; 8 | import 'zone.js/dist/fake-async-test'; 9 | import { getTestBed } from '@angular/core/testing'; 10 | import { 11 | BrowserDynamicTestingModule, 12 | platformBrowserDynamicTesting 13 | } from '@angular/platform-browser-dynamic/testing'; 14 | 15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 16 | declare const __karma__: any; 17 | declare const require: any; 18 | 19 | // Prevent Karma from running prematurely. 20 | __karma__.loaded = function () {}; 21 | 22 | // First, initialize the Angular testing environment. 23 | getTestBed().initTestEnvironment( 24 | BrowserDynamicTestingModule, 25 | platformBrowserDynamicTesting() 26 | ); 27 | // Then we find all the tests. 28 | const context = require.context('./', true, /\.spec\.ts$/); 29 | // And load the modules. 30 | context.keys().map(context); 31 | // Finally, start Karma to run the tests. 32 | __karma__.start(); 33 | -------------------------------------------------------------------------------- /demo-library/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "es2015", 6 | "baseUrl": "", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /demo-library/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "baseUrl": "", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | }, 13 | "files": [ 14 | "test.ts" 15 | ], 16 | "include": [ 17 | "**/*.spec.ts", 18 | "**/*.d.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /demo-library/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /demo-library/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "outDir": "./dist/out-tsc", 5 | "baseUrl": "src", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "moduleResolution": "node", 9 | "emitDecoratorMetadata": true, 10 | "experimentalDecorators": true, 11 | "target": "es5", 12 | "typeRoots": [ 13 | "node_modules/@types" 14 | ], 15 | "lib": [ 16 | "es2016", 17 | "dom" 18 | ] 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-library/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "comment-format": [ 10 | true, 11 | "check-space" 12 | ], 13 | "curly": true, 14 | "eofline": true, 15 | "forin": true, 16 | "import-blacklist": [ 17 | true, 18 | "rxjs" 19 | ], 20 | "import-spacing": true, 21 | "indent": [ 22 | true, 23 | "spaces" 24 | ], 25 | "interface-over-type-literal": true, 26 | "label-position": true, 27 | "max-line-length": [ 28 | true, 29 | 140 30 | ], 31 | "member-access": false, 32 | "member-ordering": [ 33 | true, 34 | "static-before-instance", 35 | "variables-before-functions" 36 | ], 37 | "no-arg": true, 38 | "no-bitwise": true, 39 | "no-console": [ 40 | true, 41 | "debug", 42 | "info", 43 | "time", 44 | "timeEnd", 45 | "trace" 46 | ], 47 | "no-construct": true, 48 | "no-debugger": true, 49 | "no-duplicate-super": true, 50 | "no-empty": false, 51 | "no-empty-interface": true, 52 | "no-eval": true, 53 | "no-inferrable-types": [ 54 | true, 55 | "ignore-params" 56 | ], 57 | "no-misused-new": true, 58 | "no-non-null-assertion": true, 59 | "no-shadowed-variable": true, 60 | "no-string-literal": false, 61 | "no-string-throw": true, 62 | "no-switch-case-fall-through": true, 63 | "no-trailing-whitespace": true, 64 | "no-unnecessary-initializer": true, 65 | "no-unused-expression": true, 66 | "no-use-before-declare": true, 67 | "no-var-keyword": true, 68 | "object-literal-sort-keys": false, 69 | "one-line": [ 70 | true, 71 | "check-open-brace", 72 | "check-catch", 73 | "check-else", 74 | "check-whitespace" 75 | ], 76 | "prefer-const": true, 77 | "quotemark": [ 78 | true, 79 | "single" 80 | ], 81 | "radix": true, 82 | "semicolon": [ 83 | "always" 84 | ], 85 | "triple-equals": [ 86 | true, 87 | "allow-null-check" 88 | ], 89 | "typedef-whitespace": [ 90 | true, 91 | { 92 | "call-signature": "nospace", 93 | "index-signature": "nospace", 94 | "parameter": "nospace", 95 | "property-declaration": "nospace", 96 | "variable-declaration": "nospace" 97 | } 98 | ], 99 | "unified-signatures": true, 100 | "variable-name": false, 101 | "whitespace": [ 102 | true, 103 | "check-branch", 104 | "check-decl", 105 | "check-operator", 106 | "check-separator", 107 | "check-type" 108 | ], 109 | "directive-selector": [ 110 | true, 111 | "attribute", 112 | "libex", 113 | "camelCase" 114 | ], 115 | "component-selector": [ 116 | true, 117 | "element", 118 | "libex", 119 | "kebab-case" 120 | ], 121 | "use-input-property-decorator": true, 122 | "use-output-property-decorator": true, 123 | "use-host-property-decorator": true, 124 | "no-input-rename": true, 125 | "no-output-rename": true, 126 | "use-life-cycle-interface": true, 127 | "use-pipe-transform-interface": true, 128 | "component-class-suffix": true, 129 | "directive-class-suffix": true, 130 | "no-access-missing-member": true, 131 | "templates-use-public": true, 132 | "invoke-injectable": true 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /example-consumer/.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "libex-consumer" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "dist", 10 | "assets": [ 11 | "assets", 12 | "favicon.ico" 13 | ], 14 | "index": "index.html", 15 | "main": "main.ts", 16 | "polyfills": "polyfills.ts", 17 | "test": "test.ts", 18 | "tsconfig": "tsconfig.app.json", 19 | "testTsconfig": "tsconfig.spec.json", 20 | "prefix": "app", 21 | "styles": [ 22 | "styles.scss" 23 | ], 24 | "scripts": [], 25 | "environmentSource": "environments/environment.ts", 26 | "environments": { 27 | "dev": "environments/environment.ts", 28 | "prod": "environments/environment.prod.ts" 29 | } 30 | } 31 | ], 32 | "e2e": { 33 | "protractor": { 34 | "config": "./protractor.conf.js" 35 | } 36 | }, 37 | "lint": [ 38 | { 39 | "project": "src/tsconfig.app.json", 40 | "exclude": "**/node_modules/**" 41 | }, 42 | { 43 | "project": "src/tsconfig.spec.json", 44 | "exclude": "**/node_modules/**" 45 | }, 46 | { 47 | "project": "e2e/tsconfig.e2e.json", 48 | "exclude": "**/node_modules/**" 49 | } 50 | ], 51 | "test": { 52 | "karma": { 53 | "config": "./karma.conf.js" 54 | } 55 | }, 56 | "defaults": { 57 | "styleExt": "scss", 58 | "component": {}, 59 | "build": { 60 | "preserveSymlinks": true 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /example-consumer/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /example-consumer/README.md: -------------------------------------------------------------------------------- 1 | # LibexConsumer 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.5.4. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 28 | -------------------------------------------------------------------------------- /example-consumer/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import {browser} from 'protractor'; 2 | import {LibexProjectPage} from './app.po'; 3 | 4 | describe('libex-project App', () => { 5 | let page: LibexProjectPage; 6 | 7 | beforeEach(() => { 8 | page = new LibexProjectPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | page.getHelloButton().click(); 14 | const alertDialog = browser.switchTo().alert(); 15 | expect(alertDialog.getText()).toEqual('hello!'); 16 | expect(alertDialog.accept).toBeDefined(); 17 | alertDialog.accept(); 18 | browser.sleep(200); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /example-consumer/e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class LibexProjectPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getHelloButton() { 9 | return element(by.id('hello-button')); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /example-consumer/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "jasminewd2", 11 | "node" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /example-consumer/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular/cli'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular/cli/plugins/karma') 14 | ], 15 | client:{ 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | reports: [ 'html', 'lcovonly' ], 20 | fixWebpackSourcePaths: true 21 | }, 22 | angularCli: { 23 | environment: 'dev' 24 | }, 25 | reporters: ['progress', 'kjhtml'], 26 | port: 9876, 27 | colors: true, 28 | logLevel: config.LOG_INFO, 29 | autoWatch: true, 30 | browsers: ['Chrome'], 31 | singleRun: false 32 | }); 33 | }; 34 | -------------------------------------------------------------------------------- /example-consumer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "libex-consumer", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "e2e": "ng e2e" 12 | }, 13 | "private": true, 14 | "dependencies": { 15 | "@angular/animations": "^5.2.6", 16 | "@angular/common": "^5.2.6", 17 | "@angular/compiler": "^5.2.6", 18 | "@angular/core": "^5.2.6", 19 | "@angular/forms": "^5.2.6", 20 | "@angular/http": "^5.2.6", 21 | "@angular/platform-browser": "^5.2.6", 22 | "@angular/platform-browser-dynamic": "^5.2.6", 23 | "@angular/router": "^5.2.6", 24 | "core-js": "^2.4.1", 25 | "libex": "^2.0.0", 26 | "rxjs": "^5.5.2", 27 | "zone.js": "^0.8.14" 28 | }, 29 | "devDependencies": { 30 | "@angular/cli": "^1.7.1", 31 | "@angular/compiler-cli": "^5.2.6", 32 | "@angular/language-service": "^5.2.6", 33 | "@types/jasmine": "^2.8.6", 34 | "@types/jasminewd2": "^2.0.3", 35 | "@types/node": "^9.4.6", 36 | "codelyzer": "^4.1.0", 37 | "jasmine-core": "^2.99.1", 38 | "jasmine-spec-reporter": "^4.2.1", 39 | "karma": "^2.0.0", 40 | "karma-chrome-launcher": "^2.2.0", 41 | "karma-cli": "^1.0.1", 42 | "karma-coverage-istanbul-reporter": "^1.4.1", 43 | "karma-jasmine": "^1.1.1", 44 | "karma-jasmine-html-reporter": "^0.2.2", 45 | "protractor": "^5.3.0", 46 | "ts-node": "^5.0.0", 47 | "tslint": "^5.9.1", 48 | "typescript": "~2.6.2", 49 | "webpack": "^3.11.0" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /example-consumer/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './e2e/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: 'e2e/tsconfig.e2e.json' 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /example-consumer/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |

Example App

2 |

3 | Testing the import via npm (or npm link). 4 |

5 | 6 |

7 | And here we'll call the service 'Hello Service' from the library: 8 | 9 |

10 | -------------------------------------------------------------------------------- /example-consumer/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bersling/angular-library-example/7c56f52965d8e01d40c7fde48770e3e154710141/example-consumer/src/app/app.component.scss -------------------------------------------------------------------------------- /example-consumer/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | describe('app', () => { 2 | it('should be able to test', () => { 3 | expect(true).toBe(true); 4 | }) 5 | }); 6 | -------------------------------------------------------------------------------- /example-consumer/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import {HelloService} from 'libex'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.scss'] 8 | }) 9 | export class AppComponent { 10 | constructor(private helloService: HelloService) {} 11 | 12 | sayHello() { 13 | this.helloService.sayHello(); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /example-consumer/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { LibexModule } from 'libex'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | imports: [ 12 | BrowserModule, 13 | LibexModule.forRoot() 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /example-consumer/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bersling/angular-library-example/7c56f52965d8e01d40c7fde48770e3e154710141/example-consumer/src/assets/.gitkeep -------------------------------------------------------------------------------- /example-consumer/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /example-consumer/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /example-consumer/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bersling/angular-library-example/7c56f52965d8e01d40c7fde48770e3e154710141/example-consumer/src/favicon.ico -------------------------------------------------------------------------------- /example-consumer/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LibexConsumer 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /example-consumer/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /example-consumer/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Required to support Web Animations `@angular/platform-browser/animations`. 51 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation 52 | **/ 53 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 54 | 55 | 56 | 57 | /*************************************************************************************************** 58 | * Zone JS is required by Angular itself. 59 | */ 60 | import 'zone.js/dist/zone'; // Included with Angular CLI. 61 | 62 | 63 | 64 | /*************************************************************************************************** 65 | * APPLICATION IMPORTS 66 | */ 67 | 68 | /** 69 | * Date, currency, decimal and percent pipes. 70 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 71 | */ 72 | // import 'intl'; // Run `npm install --save intl`. 73 | /** 74 | * Need to import at least one locale-data with intl. 75 | */ 76 | // import 'intl/locale-data/jsonp/en'; 77 | -------------------------------------------------------------------------------- /example-consumer/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import '~libex/theming'; 3 | $theme: ( 4 | 'hello-background': yellow 5 | ); 6 | @include apply-theme($theme); 7 | 8 | -------------------------------------------------------------------------------- /example-consumer/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/long-stack-trace-zone'; 4 | import 'zone.js/dist/proxy.js'; 5 | import 'zone.js/dist/sync-test'; 6 | import 'zone.js/dist/jasmine-patch'; 7 | import 'zone.js/dist/async-test'; 8 | import 'zone.js/dist/fake-async-test'; 9 | import { getTestBed } from '@angular/core/testing'; 10 | import { 11 | BrowserDynamicTestingModule, 12 | platformBrowserDynamicTesting 13 | } from '@angular/platform-browser-dynamic/testing'; 14 | 15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 16 | declare const __karma__: any; 17 | declare const require: any; 18 | 19 | // Prevent Karma from running prematurely. 20 | __karma__.loaded = function () {}; 21 | 22 | // First, initialize the Angular testing environment. 23 | getTestBed().initTestEnvironment( 24 | BrowserDynamicTestingModule, 25 | platformBrowserDynamicTesting() 26 | ); 27 | // Then we find all the tests. 28 | const context = require.context('./', true, /\.spec\.ts$/); 29 | // And load the modules. 30 | context.keys().map(context); 31 | // Finally, start Karma to run the tests. 32 | __karma__.start(); 33 | -------------------------------------------------------------------------------- /example-consumer/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "baseUrl": "./", 6 | "module": "es2015", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts", 12 | "../node_modules/libex/**/*spec.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /example-consumer/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | }, 13 | "files": [ 14 | "test.ts" 15 | ], 16 | "include": [ 17 | "**/*.spec.ts", 18 | "**/*.d.ts", 19 | "../node_modules/libex/**/*.ts" 20 | ], 21 | "exclude": [ 22 | "../node_modules/libex/**/*spec.ts" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /example-consumer/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /example-consumer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "outDir": "./dist/out-tsc", 5 | "sourceMap": true, 6 | "declaration": false, 7 | "moduleResolution": "node", 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "target": "es5", 11 | "typeRoots": [ 12 | "node_modules/@types" 13 | ], 14 | "lib": [ 15 | "es2017", 16 | "dom" 17 | ] 18 | }, 19 | "include": [ 20 | "./src/**/*", 21 | "./node_modules/libex/**/*.ts" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /example-consumer/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "comment-format": [ 10 | true, 11 | "check-space" 12 | ], 13 | "curly": true, 14 | "eofline": true, 15 | "forin": true, 16 | "import-blacklist": [ 17 | true, 18 | "rxjs", 19 | "rxjs/Rx" 20 | ], 21 | "import-spacing": true, 22 | "indent": [ 23 | true, 24 | "spaces" 25 | ], 26 | "interface-over-type-literal": true, 27 | "label-position": true, 28 | "max-line-length": [ 29 | true, 30 | 140 31 | ], 32 | "member-access": false, 33 | "member-ordering": [ 34 | true, 35 | { 36 | "order": [ 37 | "static-field", 38 | "instance-field", 39 | "static-method", 40 | "instance-method" 41 | ] 42 | } 43 | ], 44 | "no-arg": true, 45 | "no-bitwise": true, 46 | "no-console": [ 47 | true, 48 | "debug", 49 | "info", 50 | "time", 51 | "timeEnd", 52 | "trace" 53 | ], 54 | "no-construct": true, 55 | "no-debugger": true, 56 | "no-duplicate-super": true, 57 | "no-empty": false, 58 | "no-empty-interface": true, 59 | "no-eval": true, 60 | "no-inferrable-types": [ 61 | true, 62 | "ignore-params" 63 | ], 64 | "no-misused-new": true, 65 | "no-non-null-assertion": true, 66 | "no-shadowed-variable": true, 67 | "no-string-literal": false, 68 | "no-string-throw": true, 69 | "no-switch-case-fall-through": true, 70 | "no-trailing-whitespace": true, 71 | "no-unnecessary-initializer": true, 72 | "no-unused-expression": true, 73 | "no-use-before-declare": true, 74 | "no-var-keyword": true, 75 | "object-literal-sort-keys": false, 76 | "one-line": [ 77 | true, 78 | "check-open-brace", 79 | "check-catch", 80 | "check-else", 81 | "check-whitespace" 82 | ], 83 | "prefer-const": true, 84 | "quotemark": [ 85 | true, 86 | "single" 87 | ], 88 | "radix": true, 89 | "semicolon": [ 90 | true, 91 | "always" 92 | ], 93 | "triple-equals": [ 94 | true, 95 | "allow-null-check" 96 | ], 97 | "typedef-whitespace": [ 98 | true, 99 | { 100 | "call-signature": "nospace", 101 | "index-signature": "nospace", 102 | "parameter": "nospace", 103 | "property-declaration": "nospace", 104 | "variable-declaration": "nospace" 105 | } 106 | ], 107 | "unified-signatures": true, 108 | "variable-name": false, 109 | "whitespace": [ 110 | true, 111 | "check-branch", 112 | "check-decl", 113 | "check-operator", 114 | "check-separator", 115 | "check-type" 116 | ], 117 | "directive-selector": [ 118 | true, 119 | "attribute", 120 | "app", 121 | "camelCase" 122 | ], 123 | "component-selector": [ 124 | true, 125 | "element", 126 | "app", 127 | "kebab-case" 128 | ], 129 | "angular-whitespace": [true, "check-interpolation"], 130 | "no-output-on-prefix": true, 131 | "use-input-property-decorator": true, 132 | "use-output-property-decorator": true, 133 | "use-host-property-decorator": true, 134 | "no-input-rename": true, 135 | "no-output-rename": true, 136 | "use-life-cycle-interface": true, 137 | "use-pipe-transform-interface": true, 138 | "component-class-suffix": true, 139 | "directive-class-suffix": true 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "2.9.0", 3 | "packages": [ 4 | "demo-library/src/app/libex", 5 | "example-consumer" 6 | ], 7 | "version": "0.0.0" 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "lerna": "^2.9.0" 4 | } 5 | } 6 | --------------------------------------------------------------------------------