├── dynamic ├── base │ ├── src │ │ ├── styles.css │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── plugin-metadata.model.ts │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ └── dynamic-plugin-loader.component.ts │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── tsconfig.app.json │ │ ├── main.ts │ │ └── index.html │ ├── tsconfig.json │ ├── .angular-cli.json │ ├── package.json │ └── webpack.config.js ├── myplugin │ ├── README.md │ ├── plugin-metadata.json │ ├── plugin.component.ts │ ├── src │ │ └── app │ │ │ ├── plugin.component.ts │ │ │ └── plugin.module.ts │ ├── rollup.config.js │ ├── tsconfig.tsc.json │ ├── tsconfig.json │ ├── tsconfig.ngc.json │ ├── package.json │ └── tslint.json ├── myplugin-cli │ ├── src │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── styles.css │ │ ├── favicon.ico │ │ ├── typings.d.ts │ │ ├── app │ │ │ ├── plugin.component.ts │ │ │ ├── app.module.ts │ │ │ └── plugin.module.ts │ │ ├── tsconfig.app.json │ │ ├── index.html │ │ ├── main.ts │ │ ├── tsconfig.spec.json │ │ ├── test.ts │ │ └── polyfills.ts │ ├── plugin-metadata.json │ ├── e2e │ │ ├── tsconfig.e2e.json │ │ ├── app.po.ts │ │ └── app.e2e-spec.ts │ ├── .editorconfig │ ├── aot │ │ ├── non-codegen-transpiled-src │ │ │ ├── plugin.component.js.map │ │ │ ├── plugin.module.js.map │ │ │ ├── plugin.component.js │ │ │ └── plugin.module.js │ │ ├── src │ │ │ └── app │ │ │ │ ├── plugin.component.js │ │ │ │ ├── plugin.module.ngsummary.json │ │ │ │ ├── plugin.component.ngsummary.json │ │ │ │ ├── plugin.module.js │ │ │ │ ├── plugin.module.ngfactory.ts │ │ │ │ └── plugin.component.ngfactory.ts │ │ └── aot │ │ │ └── src │ │ │ └── app │ │ │ ├── plugin.component.ngfactory.js │ │ │ └── plugin.module.ngfactory.js │ ├── rollup.config.js │ ├── tsconfig.tsc.json │ ├── tsconfig.json │ ├── tsconfig.ngc.json │ ├── .gitignore │ ├── protractor.conf.js │ ├── README.md │ ├── .angular-cli.json │ ├── karma.conf.js │ ├── package.json │ └── tslint.json └── package.json ├── static ├── src │ ├── favicon.ico │ ├── main.ts │ ├── app │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── dynamic-loader.component.ts │ ├── index.html │ ├── plugins │ │ ├── lazy.module.ts │ │ └── lazy.module.ngfactory.ts │ ├── tsconfig.json │ └── polyfills.ts ├── tsconfig-ngc.json ├── angular-cli.json ├── package.json └── tslint.json ├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md └── tslint.json /dynamic/base/src/styles.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dynamic/myplugin/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dynamic/base/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dynamic/base/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Toxicable/module-loading/HEAD/static/src/favicon.ico -------------------------------------------------------------------------------- /dynamic/base/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /dynamic/myplugin/plugin-metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "moduleName": "PluginModule", 3 | "name": "myplugin" 4 | } 5 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/plugin-metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "moduleName": "PluginModule", 3 | "name": "myplugin-cli" 4 | } 5 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Toxicable/module-loading/HEAD/dynamic/myplugin-cli/src/favicon.ico -------------------------------------------------------------------------------- /dynamic/base/src/app/plugin-metadata.model.ts: -------------------------------------------------------------------------------- 1 | 2 | export interface PluginMetadata { 3 | moduleName: string; 4 | name: string; 5 | } 6 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /dynamic/base/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |

Hello Dynaimc Components!

2 | Dynamic Component: 3 | -------------------------------------------------------------------------------- /dynamic/myplugin/plugin.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'myplugin', 5 | template: ` 6 | I am a plugin! 7 | 8 | ` 9 | }) 10 | export class PluginComponent { 11 | } 12 | -------------------------------------------------------------------------------- /dynamic/myplugin/src/app/plugin.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'myplugin', 5 | template: ` 6 | I am a plugin! 7 | ` 8 | }) 9 | export class PluginComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /static/src/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { enableProdMode } from '@angular/core'; 3 | import { AppModule } from './app/app.module'; 4 | 5 | 6 | platformBrowserDynamic().bootstrapModule(AppModule); 7 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/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 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/src/app/plugin.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'myplugin', 5 | template: ` 6 | I am a plugin! 7 | I am a changed plugin :D 8 | 9 | ` 10 | }) 11 | export class PluginComponent { 12 | 13 | } 14 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, element, by } from 'protractor'; 2 | 3 | export class MypluginCliPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /dynamic/base/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 | -------------------------------------------------------------------------------- /static/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | template: ` 6 |
7 | App 8 |
9 | 10 | 11 | 12 | `, 13 | }) 14 | export class AppComponent { 15 | 16 | 17 | } 18 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /dynamic/base/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Injector, NgModuleFactory, ViewContainerRef } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/.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 | -------------------------------------------------------------------------------- /static/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ModuleLoading 6 | 7 | 8 | 9 | 10 | 11 | 12 | Loading... 13 | 14 | 15 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MypluginCli 6 | 7 | 8 | 9 | 10 | 11 | 12 | Loading... 13 | 14 | 15 | -------------------------------------------------------------------------------- /dynamic/base/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 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/aot/non-codegen-transpiled-src/plugin.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../src/app/plugin.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAA,EAAU,MAAO,eAAA,CAAgB;AAU1C,IAAa,eAAe;IAA5B;IAEA,CAAC;IAAD,sBAAC;AAAD,CAFA,AAEC,IAAA;AAFY,eAAe;IAR3B,SAAS,CAAC;QACT,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,4DAIP;KACJ,CAAC;GACW,eAAe,CAE3B;SAFY,eAAe","file":"plugin.component.js","sourceRoot":""} -------------------------------------------------------------------------------- /dynamic/myplugin-cli/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 | -------------------------------------------------------------------------------- /dynamic/myplugin/rollup.config.js: -------------------------------------------------------------------------------- 1 | let metadata = require('./plugin-metadata.json') 2 | 3 | export default { 4 | entry: './aot/aot/src/app/plugin.module.ngfactory.js', 5 | dest: '../bundled-plugins/' + metadata.name + '/plugin-factory.umd.js', 6 | format: 'umd', 7 | moduleName: metadata.name, 8 | globals: { 9 | '@angular/core': 'ng.core', 10 | '@angular/common': 'ng.common', 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { MypluginCliPage } from './app.po'; 2 | 3 | describe('myplugin-cli App', () => { 4 | let page: MypluginCliPage; 5 | 6 | beforeEach(() => { 7 | page = new MypluginCliPage(); 8 | }); 9 | 10 | it('should display message saying app works', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('app works!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/rollup.config.js: -------------------------------------------------------------------------------- 1 | let metadata = require('./plugin-metadata.json') 2 | 3 | export default { 4 | entry: './aot/aot/src/app/plugin.module.ngfactory.js', 5 | dest: '../bundled-plugins/' + metadata.name + '/plugin-factory.umd.js', 6 | format: 'umd', 7 | moduleName: metadata.name, 8 | globals: { 9 | '@angular/core': 'ng.core', 10 | '@angular/common': 'ng.common', 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/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 | -------------------------------------------------------------------------------- /dynamic/base/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 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/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 | -------------------------------------------------------------------------------- /dynamic/myplugin/tsconfig.tsc.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "outDir":"aot", 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "lib": ["es2015", "dom"], 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "files": [ 14 | "aot/src/app/plugin.module.ngfactory.ts" 15 | ] 16 | 17 | } 18 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/tsconfig.tsc.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "outDir":"aot", 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "lib": ["es2015", "dom"], 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "files": [ 14 | "aot/src/app/plugin.module.ngfactory.ts" 15 | ] 16 | 17 | } 18 | -------------------------------------------------------------------------------- /dynamic/base/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 | -------------------------------------------------------------------------------- /static/src/plugins/lazy.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, Component } from '@angular/core'; 2 | import { CommonModule} from '@angular/common' 3 | @NgModule({ 4 | declarations: [ LazyComp ], 5 | imports: [ CommonModule ], 6 | exports: [ LazyComp ], 7 | entryComponents: [ LazyComp ] 8 | }) 9 | export class Lazy{} 10 | 11 | 12 | @Component({ 13 | selector: 'lazy-comp', 14 | template: 'hi' 15 | }) 16 | export class LazyComp{ 17 | constructor(){ 18 | console.log('lazy') 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/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 | -------------------------------------------------------------------------------- /static/src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "", 4 | "declaration": false, 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "lib": [ 8 | "es2016", 9 | "dom" 10 | ], 11 | "mapRoot": "./", 12 | "module": "es2015", 13 | "moduleResolution": "node", 14 | "outDir": "../dist/out-tsc", 15 | "sourceMap": true, 16 | "target": "es5", 17 | "typeRoots": [ 18 | "../node_modules/@types" 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { PluginComponent } from './plugin.component'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { NgModule } from '@angular/core'; 4 | import { FormsModule } from '@angular/forms'; 5 | import { HttpModule } from '@angular/http'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | PluginComponent 10 | ], 11 | imports: [ 12 | BrowserModule, 13 | ], 14 | providers: [], 15 | bootstrap: [PluginComponent] 16 | }) 17 | export class AppModule { } 18 | -------------------------------------------------------------------------------- /dynamic/myplugin/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "outDir": "aot/unbundled", 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "lib": ["es2015", "dom"], 11 | "noImplicitAny": true, 12 | "suppressImplicitAnyIndexErrors": true 13 | }, 14 | 15 | 16 | 17 | "angularCompilerOptions": { 18 | "genDir": "aot", 19 | "skipMetadataEmit" : true 20 | } 21 | } -------------------------------------------------------------------------------- /dynamic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "moduleloading", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "build-plugin": "npm run build --prefix myplugin", 7 | "move-plugin": "cpy bundled-plugins/myplugin/* base/src/assets/plugins/myplugin", 8 | "start-base": "npm run start --prefix base", 9 | "start": "npm run build-plugin && npm run move-plugin && npm run start-base" 10 | }, 11 | "private": true, 12 | "dependencies": { 13 | }, 14 | "devDependencies": { 15 | "cpy-cli": "^1.0.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/aot/non-codegen-transpiled-src/plugin.module.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../src/app/plugin.module.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,eAAA,EAAgB,MAAO,oBAAA,CAAqB;AACrD,OAAO,EAAE,QAAA,EAAyB,MAAO,eAAA,CAAgB;AAezD,IAAa,YAAY;IAAzB;IAEA,CAAC;IAAD,mBAAC;AAAD,CAFA,AAEC,IAAA;AAFY,YAAY;IAbxB,QAAQ,CAAC;QACR,YAAY,EAAE;YACZ,eAAe;SAChB;QACD,eAAe,EAAE;YACf,kEAAkE;YAClE,eAAe;SAChB;QACD,SAAS,EAAE;YACT,+DAA+D;YAC/D,EAAE,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,eAAe,EAAE;SAC7D;KACF,CAAC;GACW,YAAY,CAExB;SAFY,YAAY","file":"plugin.module.js","sourceRoot":""} -------------------------------------------------------------------------------- /dynamic/myplugin/src/app/plugin.module.ts: -------------------------------------------------------------------------------- 1 | import { PluginComponent } from './plugin.component'; 2 | import { NgModule, InjectionToken } from '@angular/core'; 3 | 4 | @NgModule({ 5 | declarations: [ 6 | PluginComponent 7 | ], 8 | entryComponents: [ 9 | //makes sure a factory is created in the bundle for this component 10 | PluginComponent 11 | ], 12 | providers: [ 13 | //provide a token for the base to know what component to render 14 | { provide: 'PLUGIN_ENTRY_POINT', useValue: PluginComponent } 15 | ] 16 | }) 17 | export class PluginModule { 18 | 19 | } 20 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/src/app/plugin.module.ts: -------------------------------------------------------------------------------- 1 | import { PluginComponent } from './plugin.component'; 2 | import { NgModule, InjectionToken } from '@angular/core'; 3 | 4 | @NgModule({ 5 | declarations: [ 6 | PluginComponent 7 | ], 8 | entryComponents: [ 9 | //makes sure a factory is created in the bundle for this component 10 | PluginComponent 11 | ], 12 | providers: [ 13 | //provide a token for the base to know what component to render 14 | { provide: 'PLUGIN_ENTRY_POINT', useValue: PluginComponent } 15 | ] 16 | }) 17 | export class PluginModule { 18 | 19 | } 20 | -------------------------------------------------------------------------------- /dynamic/myplugin/tsconfig.ngc.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "outDir": "aot/non-codegen-transpiled-src", 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "lib": ["es2015", "dom"], 11 | "noImplicitAny": true, 12 | "suppressImplicitAnyIndexErrors": true 13 | }, 14 | 15 | "files": [ 16 | "src/app/plugin.module.ts" 17 | ], 18 | 19 | "angularCompilerOptions": { 20 | "genDir": "aot", 21 | "skipMetadataEmit" : true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/tsconfig.ngc.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "outDir": "aot/non-codegen-transpiled-src", 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "lib": ["es2015", "dom"], 11 | "noImplicitAny": true, 12 | "suppressImplicitAnyIndexErrors": true 13 | }, 14 | 15 | "files": [ 16 | "src/app/plugin.module.ts" 17 | ], 18 | 19 | "angularCompilerOptions": { 20 | "genDir": "aot", 21 | "skipMetadataEmit" : true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /dynamic/base/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { DynamicComponentLoader } from './dynamic-plugin-loader.component'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { NgModule } from '@angular/core'; 4 | import { FormsModule } from '@angular/forms'; 5 | import { HttpModule } from '@angular/http'; 6 | 7 | import { AppComponent } from './app.component'; 8 | 9 | @NgModule({ 10 | declarations: [ 11 | AppComponent, 12 | DynamicComponentLoader 13 | ], 14 | imports: [ 15 | BrowserModule, 16 | FormsModule, 17 | HttpModule 18 | ], 19 | providers: [], 20 | bootstrap: [AppComponent] 21 | }) 22 | export class AppModule { } 23 | -------------------------------------------------------------------------------- /static/tsconfig-ngc.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "removeComments": false, 10 | "noImplicitAny": true, 11 | "declaration": true, 12 | "stripInternal": true, 13 | }, 14 | "exclude": [ 15 | "node_modules" 16 | ], 17 | "files": [ 18 | "./node_modules/@types/core-js/index.d.ts", 19 | "./src/plugins/lazy.module.ts" 20 | ], 21 | "angularCompilerOptions": { 22 | "skipTemplateCodegen": false, 23 | "genDir": "./output" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | 7 | # dependencies 8 | **/node_modules 9 | 10 | 11 | 12 | # IDEs and editors 13 | /.idea 14 | .project 15 | .classpath 16 | .c9/ 17 | *.launch 18 | .settings/ 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage/* 31 | /libpeerconnection.log 32 | npm-debug.log 33 | testem.log 34 | /typings 35 | 36 | # e2e 37 | /e2e/*.js 38 | /e2e/*.map 39 | 40 | #System Files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /static/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { DynamicLoader } from './dynamic-loader.component'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { NgModule } from '@angular/core'; 4 | import { FormsModule } from '@angular/forms'; 5 | import { HttpModule } from '@angular/http'; 6 | import { RouterModule } from '@angular/router'; 7 | import { AppComponent } from './app.component'; 8 | 9 | @NgModule({ 10 | declarations: [ 11 | AppComponent, 12 | DynamicLoader 13 | ], 14 | imports: [ 15 | BrowserModule, 16 | FormsModule, 17 | HttpModule, 18 | RouterModule.forRoot([]) 19 | ], 20 | providers: [], 21 | bootstrap: [AppComponent] 22 | }) 23 | export class AppModule { } 24 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/.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 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | testem.log 34 | /typings 35 | 36 | # e2e 37 | /e2e/*.js 38 | /e2e/*.map 39 | 40 | # System Files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/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 | beforeLaunch: function() { 23 | require('ts-node').register({ 24 | project: 'e2e/tsconfig.e2e.json' 25 | }); 26 | }, 27 | onPrepare() { 28 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/aot/src/app/plugin.component.js: -------------------------------------------------------------------------------- 1 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 2 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 3 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 4 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 5 | return c > 3 && r && Object.defineProperty(target, key, r), r; 6 | }; 7 | import { Component } from '@angular/core'; 8 | var PluginComponent = (function () { 9 | function PluginComponent() { 10 | } 11 | return PluginComponent; 12 | }()); 13 | PluginComponent = __decorate([ 14 | Component({ 15 | selector: 'myplugin', 16 | template: "\n I am a plugin!\n I am a changed plugin :D\n\n " 17 | }) 18 | ], PluginComponent); 19 | export { PluginComponent }; 20 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/aot/non-codegen-transpiled-src/plugin.component.js: -------------------------------------------------------------------------------- 1 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 2 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 3 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 4 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 5 | return c > 3 && r && Object.defineProperty(target, key, r), r; 6 | }; 7 | import { Component } from '@angular/core'; 8 | var PluginComponent = (function () { 9 | function PluginComponent() { 10 | } 11 | return PluginComponent; 12 | }()); 13 | PluginComponent = __decorate([ 14 | Component({ 15 | selector: 'myplugin', 16 | template: "\n I am a plugin!\n I am a changed plugin :D\n\n " 17 | }) 18 | ], PluginComponent); 19 | export { PluginComponent }; 20 | //# sourceMappingURL=plugin.component.js.map -------------------------------------------------------------------------------- /dynamic/myplugin-cli/aot/src/app/plugin.module.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class"},"type":{"summaryKind":2,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[],"lifecycleHooks":[]},"entryComponents":[{"componentType":{"__symbol":1,"members":[]},"componentFactory":{"__symbol":2,"members":[]}}],"providers":[{"provider":{"token":{"value":"PLUGIN_ENTRY_POINT"},"useClass":null,"useValue":{"__symbol":1,"members":[]},"useFactory":null,"multi":false},"module":{"reference":{"__symbol":0,"members":[]},"diDeps":[],"lifecycleHooks":[]}}],"modules":[{"reference":{"__symbol":0,"members":[]},"diDeps":[],"lifecycleHooks":[]}],"exportedDirectives":[],"exportedPipes":[]}}],"symbols":[{"__symbol":0,"name":"PluginModule","filePath":"C:/Projects/module-loading/dynamic/myplugin-cli/src/app/plugin.module.d.ts"},{"__symbol":1,"name":"PluginComponent","filePath":"C:/Projects/module-loading/dynamic/myplugin-cli/src/app/plugin.component.d.ts"},{"__symbol":2,"name":"PluginComponentNgFactory","filePath":"C:/Projects/module-loading/dynamic/myplugin-cli/src/app/plugin.component.ngfactory.d.ts"}]} -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Fabian Wiles 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /static/src/app/dynamic-loader.component.ts: -------------------------------------------------------------------------------- 1 | import { LazyComp } from './../plugins/lazy.module'; 2 | import { 3 | Component, Injector, NgModuleFactory, 4 | ComponentFactoryResolver, ViewContainerRef, 5 | Input 6 | } from '@angular/core'; 7 | 8 | declare let System: any; 9 | const FACTORY_SUFFIX = 'NgFactory'; 10 | 11 | @Component({ 12 | selector: 'dynamic-loader', 13 | template: '' 14 | }) 15 | export class DynamicComponentLoader { 16 | 17 | @Input() componentName: string 18 | @Input() moduleName: string; 19 | @Input() moduleFactoryPath: string 20 | 21 | constructor( 22 | private injector: Injector, 23 | private viewRef: ViewContainerRef, 24 | ) { 25 | 26 | System.import('./lazy.module.ngfactory.ts').then((moduleFactories: any) => { 27 | const compType = moduleFactories['LazyCompNgFactory']._componentType; 28 | const moduleFactory: NgModuleFactory = moduleFactories['LazyModuleNgFactory']; 29 | const moduleRef = moduleFactory.create(injector); 30 | const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(compType); 31 | viewRef.createComponent(compFactory); 32 | }); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /static/angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "version": "1.0.0-beta.31", 5 | "name": "module-loading" 6 | }, 7 | "apps": [ 8 | { 9 | "root": "src", 10 | "outDir": "dist", 11 | "assets": [ 12 | "assets", 13 | "favicon.ico" 14 | ], 15 | "index": "index.html", 16 | "main": "main.ts", 17 | "polyfills": "polyfills.ts", 18 | "test": "test.ts", 19 | "tsconfig": "tsconfig.json", 20 | "prefix": "app" 21 | } 22 | ], 23 | "lint": [ 24 | { 25 | "files": "src/**/*.ts", 26 | "project": "src/tsconfig.json" 27 | }, 28 | { 29 | "files": "e2e/**/*.ts", 30 | "project": "e2e/tsconfig.json" 31 | } 32 | ], 33 | 34 | "defaults": { 35 | "styleExt": "css", 36 | "prefixInterfaces": false, 37 | "inline": { 38 | "style": false, 39 | "template": false 40 | }, 41 | "spec": { 42 | "class": false, 43 | "component": true, 44 | "directive": true, 45 | "module": false, 46 | "pipe": true, 47 | "service": true 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/README.md: -------------------------------------------------------------------------------- 1 | # MypluginCli 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0. 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/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 | Before running the tests make sure you are serving the app via `ng serve`. 25 | 26 | ## Further help 27 | 28 | 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). 29 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/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 var __karma__: any; 17 | declare var 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 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/aot/src/app/plugin.component.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class"},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[],"lifecycleHooks":[]},"isComponent":true,"selector":"myplugin","exportAs":null,"inputs":{},"outputs":{},"hostListeners":{},"hostProperties":{},"hostAttributes":{},"providers":[],"viewProviders":[],"queries":[],"viewQueries":[],"entryComponents":[],"changeDetection":1,"template":{"animations":[],"ngContentSelectors":[],"encapsulation":2},"componentViewType":{"__symbol":1,"members":[]},"rendererType":{"__symbol":2,"members":[]},"componentFactory":{"__symbol":3,"members":[]}}}],"symbols":[{"__symbol":0,"name":"PluginComponent","filePath":"C:/Projects/module-loading/dynamic/myplugin-cli/src/app/plugin.component.d.ts"},{"__symbol":1,"name":"View_PluginComponent_0","filePath":"C:/Projects/module-loading/dynamic/myplugin-cli/src/app/plugin.component.ngfactory.d.ts"},{"__symbol":2,"name":"RenderType_PluginComponent","filePath":"C:/Projects/module-loading/dynamic/myplugin-cli/src/app/plugin.component.ngfactory.d.ts"},{"__symbol":3,"name":"PluginComponentNgFactory","filePath":"C:/Projects/module-loading/dynamic/myplugin-cli/src/app/plugin.component.ngfactory.d.ts"}]} -------------------------------------------------------------------------------- /dynamic/myplugin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "moduleloading", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ngc": "ngc -p tsconfig.ngc.json ", 7 | "tsc": "tsc -p tsconfig.tsc.json", 8 | "rollup": "rollup -c rollup.config.js", 9 | "clean": "rimraf aot && rimraf ../bundled-plugins", 10 | "copy-metadata": "cpy plugin-metadata.json ../bundled-plugins/myplugin", 11 | "build": "npm run clean && npm run ngc && npm run tsc && npm run rollup && npm run copy-metadata" 12 | }, 13 | "private": true, 14 | "dependencies": { 15 | "@angular/common": "^4.0.0", 16 | "@angular/compiler": "^4.0.0", 17 | "@angular/core": "^4.0.0", 18 | "@angular/forms": "^4.0.0", 19 | "@angular/http": "^4.0.0", 20 | "@angular/platform-browser": "^4.0.0", 21 | "@angular/platform-browser-dynamic": "^4.0.0", 22 | "@angular/router": "^4.0.0", 23 | "core-js": "^2.4.1", 24 | "rxjs": "^5.1.0", 25 | "zone.js": "^0.8.4" 26 | }, 27 | "devDependencies": { 28 | "@angular/compiler-cli": "^4.0.0", 29 | "@types/jasmine": "2.5.38", 30 | "@types/node": "~6.0.60", 31 | "autoprefixer": "^6.5.3", 32 | "codelyzer": "~2.0.0", 33 | "cpy-cli": "^1.0.1", 34 | "rimraf": "^2.6.1", 35 | "rollup": "^0.41.6", 36 | "tslint": "^4.0.0", 37 | "typescript": "^2.2.2" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/aot/src/app/plugin.module.js: -------------------------------------------------------------------------------- 1 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 2 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 3 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 4 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 5 | return c > 3 && r && Object.defineProperty(target, key, r), r; 6 | }; 7 | import { PluginComponent } from './plugin.component'; 8 | import { NgModule } from '@angular/core'; 9 | var PluginModule = (function () { 10 | function PluginModule() { 11 | } 12 | return PluginModule; 13 | }()); 14 | PluginModule = __decorate([ 15 | NgModule({ 16 | declarations: [ 17 | PluginComponent 18 | ], 19 | entryComponents: [ 20 | //makes sure a factory is created in the bundle for this component 21 | PluginComponent 22 | ], 23 | providers: [ 24 | //provide a token for the base to know what component to render 25 | { provide: 'PLUGIN_ENTRY_POINT', useValue: PluginComponent } 26 | ] 27 | }) 28 | ], PluginModule); 29 | export { PluginModule }; 30 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "myplugin-cli" 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.css" 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": "css", 55 | "component": {} 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /dynamic/base/.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "base", 5 | "ejected": true 6 | }, 7 | "apps": [ 8 | { 9 | "root": "src", 10 | "outDir": "dist", 11 | "assets": [ 12 | "assets", 13 | "favicon.ico" 14 | ], 15 | "index": "index.html", 16 | "main": "main.ts", 17 | "polyfills": "polyfills.ts", 18 | "test": "test.ts", 19 | "tsconfig": "tsconfig.app.json", 20 | "testTsconfig": "tsconfig.spec.json", 21 | "prefix": "app", 22 | "styles": [ 23 | "styles.css" 24 | ], 25 | "scripts": [ 26 | ], 27 | "environmentSource": "environments/environment.ts", 28 | "environments": { 29 | "dev": "environments/environment.ts", 30 | "prod": "environments/environment.prod.ts" 31 | } 32 | } 33 | ], 34 | "e2e": { 35 | "protractor": { 36 | "config": "./protractor.conf.js" 37 | } 38 | }, 39 | "lint": [ 40 | { 41 | "project": "src/tsconfig.app.json" 42 | }, 43 | { 44 | "project": "src/tsconfig.spec.json" 45 | }, 46 | { 47 | "project": "e2e/tsconfig.e2e.json" 48 | } 49 | ], 50 | "test": { 51 | "karma": { 52 | "config": "./karma.conf.js" 53 | } 54 | }, 55 | "defaults": { 56 | "styleExt": "css", 57 | "component": { 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/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 | files: [ 19 | { pattern: './src/test.ts', watched: false } 20 | ], 21 | preprocessors: { 22 | './src/test.ts': ['@angular/cli'] 23 | }, 24 | mime: { 25 | 'text/x-typescript': ['ts','tsx'] 26 | }, 27 | coverageIstanbulReporter: { 28 | reports: [ 'html', 'lcovonly' ], 29 | fixWebpackSourcePaths: true 30 | }, 31 | angularCli: { 32 | environment: 'dev' 33 | }, 34 | reporters: config.angularCli && config.angularCli.codeCoverage 35 | ? ['progress', 'coverage-istanbul'] 36 | : ['progress', 'kjhtml'], 37 | port: 9876, 38 | colors: true, 39 | logLevel: config.LOG_INFO, 40 | autoWatch: true, 41 | browsers: ['Chrome'], 42 | singleRun: false 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/aot/non-codegen-transpiled-src/plugin.module.js: -------------------------------------------------------------------------------- 1 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 2 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 3 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 4 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 5 | return c > 3 && r && Object.defineProperty(target, key, r), r; 6 | }; 7 | import { PluginComponent } from './plugin.component'; 8 | import { NgModule } from '@angular/core'; 9 | var PluginModule = (function () { 10 | function PluginModule() { 11 | } 12 | return PluginModule; 13 | }()); 14 | PluginModule = __decorate([ 15 | NgModule({ 16 | declarations: [ 17 | PluginComponent 18 | ], 19 | entryComponents: [ 20 | //makes sure a factory is created in the bundle for this component 21 | PluginComponent 22 | ], 23 | providers: [ 24 | //provide a token for the base to know what component to render 25 | { provide: 'PLUGIN_ENTRY_POINT', useValue: PluginComponent } 26 | ] 27 | }) 28 | ], PluginModule); 29 | export { PluginModule }; 30 | //# sourceMappingURL=plugin.module.js.map -------------------------------------------------------------------------------- /static/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "module-loading", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "angular-cli": {}, 6 | "scripts": { 7 | "ng": "ng", 8 | "start": "ng serve", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "e2e": "ng e2e", 12 | "ngc": "ngc -p tsconfig-ngc.json", 13 | "tsc": "tsc -p tsconfig-ngc.json" 14 | }, 15 | "private": true, 16 | "dependencies": { 17 | "@angular/common": "^2.4.0", 18 | "@angular/compiler": "^2.4.0", 19 | "@angular/core": "^2.4.0", 20 | "@angular/forms": "^2.4.0", 21 | "@angular/http": "^2.4.0", 22 | "@angular/platform-browser": "^2.4.0", 23 | "@angular/platform-browser-dynamic": "^2.4.0", 24 | "@angular/router": "^3.4.0", 25 | "core-js": "^2.4.1", 26 | "rollup": "^0.41.4", 27 | "rxjs": "^5.0.1", 28 | "ts-helpers": "^1.1.1", 29 | "zone.js": "^0.7.2" 30 | }, 31 | "devDependencies": { 32 | "@angular/cli": "1.0.0-beta.31", 33 | "@angular/compiler-cli": "^2.4.0", 34 | "@types/jasmine": "2.5.38", 35 | "@types/node": "^6.0.42", 36 | "codelyzer": "~2.0.0-beta.1", 37 | "jasmine-core": "2.5.2", 38 | "jasmine-spec-reporter": "2.5.0", 39 | "karma": "1.2.0", 40 | "karma-chrome-launcher": "^2.0.0", 41 | "karma-cli": "^1.0.1", 42 | "karma-jasmine": "^1.0.2", 43 | "karma-coverage-istanbul-reporter": "^0.2.0", 44 | "protractor": "~5.1.0", 45 | "ts-node": "1.2.1", 46 | "tslint": "^4.3.0", 47 | "typescript": "~2.0.0" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myplugin-cli", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "start": "ng serve", 7 | "ngc": "ngc -p tsconfig.ngc.json ", 8 | "tsc": "tsc -p tsconfig.tsc.json", 9 | "rollup": "rollup -c rollup.config.js", 10 | "clean": "rimraf aot", 11 | "copy-metadata": "cpy plugin-metadata.json ../bundled-plugins/myplugin-cli", 12 | "build": "npm run clean && npm run ngc && npm run tsc && npm run rollup && npm run copy-metadata" 13 | }, 14 | "private": true, 15 | "dependencies": { 16 | "@angular/common": "^4.0.0", 17 | "@angular/compiler": "^4.0.0", 18 | "@angular/core": "^4.0.0", 19 | "@angular/forms": "^4.0.0", 20 | "@angular/http": "^4.0.0", 21 | "@angular/platform-browser": "^4.0.0", 22 | "@angular/platform-browser-dynamic": "^4.0.0", 23 | "@angular/router": "^4.0.0", 24 | "core-js": "^2.4.1", 25 | "rxjs": "^5.1.0", 26 | "zone.js": "^0.8.4" 27 | }, 28 | "devDependencies": { 29 | "@angular/cli": "1.0.0", 30 | "@angular/compiler-cli": "^4.0.0", 31 | "@types/jasmine": "2.5.38", 32 | "@types/node": "~6.0.60", 33 | "codelyzer": "~2.0.0", 34 | "cpy-cli": "^1.0.1", 35 | "jasmine-core": "~2.5.2", 36 | "jasmine-spec-reporter": "~3.2.0", 37 | "karma": "~1.4.1", 38 | "karma-chrome-launcher": "~2.0.0", 39 | "karma-cli": "~1.0.1", 40 | "karma-coverage-istanbul-reporter": "^0.2.0", 41 | "karma-jasmine": "~1.1.0", 42 | "karma-jasmine-html-reporter": "^0.2.2", 43 | "protractor": "~5.1.0", 44 | "rollup": "^0.41.6", 45 | "ts-node": "~2.0.0", 46 | "tslint": "~4.5.0", 47 | "typescript": "~2.2.0" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /dynamic/base/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Base 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | Loading... 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # module-loading 2 | 3 | If you're looking at using this then I highly suggest hold out a little long till you can use Angular Elements, theyr'e a far better fit this this kind of situation. 4 | See here for a small demo on what they are: https://www.youtube.com/watch?v=ljsOPm4MMEo 5 | or use another form of dynamic content that you can find out about here: https://www.youtube.com/watch?v=__H65AsA_bE&feature=youtu.be&t=2h14m13s 6 | and demo here: https://stackblitz.com/edit/angular-dynamic-content-viewer 7 | 8 | --- 9 | 10 | This repo has 2 examples of how to dynamically load Modules in Angular 11 | 12 | ## Static 13 | This shows how you can load in a module similar to how `@angular/router` does. 14 | Here we require the module to be known at build time. 15 | Do note that it also makes use of a private API on this line 16 | ``` 17 | const compType = moduleFactories['LazyCompNgFactory']._componentType; 18 | ```` 19 | Noted by the `_`, do not use this API unless you want to risk it being broken in the future since private API's are not subject to any of Angular's policies on breaking changes. 20 | This is mainly for comparison to the more dynamic way. 21 | 22 | ## Dynamic 23 | This is the main feature of this repository. 24 | Here the plugin (Angular module) does not need to be known at build time for the main application to be built. 25 | With this method you can make plugins independantly of the main application. 26 | This is accomplished through the use of Webpack and Rollup and externalising dependencies. 27 | However, the issue with doing this is that all your dependencies must be loaded in as UMD bundles, which means that you loose all global optimisations. Meaning that you wont be able to do tree shaking or similar optimisations. 28 | 29 | If you have any questions feel free to make an issue or ping on on [Gitter](https://gitter.im/angular/angular) with `@Toxicable` 30 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/aot/src/app/plugin.module.ngfactory.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview This file is generated by the Angular template compiler. 3 | * Do not edit. 4 | * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride} 5 | */ 6 | /* tslint:disable */ 7 | 8 | 9 | import * as import0 from '@angular/core'; 10 | import * as import1 from '../../../src/app/plugin.module'; 11 | import * as import2 from './plugin.component.ngfactory'; 12 | import * as import3 from '../../../src/app/plugin.component'; 13 | class PluginModuleInjector extends import0.ɵNgModuleInjector { 14 | _PluginModule_0:import1.PluginModule; 15 | _PLUGIN_ENTRY_POINT_1:any; 16 | constructor(parent:import0.Injector) { 17 | super(parent,[import2.PluginComponentNgFactory],([] as any[])); 18 | } 19 | createInternal():import1.PluginModule { 20 | this._PluginModule_0 = new import1.PluginModule(); 21 | this._PLUGIN_ENTRY_POINT_1 = import3.PluginComponent; 22 | return this._PluginModule_0; 23 | } 24 | getInternal(token:any,notFoundResult:any):any { 25 | if ((token === import1.PluginModule)) { return this._PluginModule_0; } 26 | if ((token === 'PLUGIN_ENTRY_POINT')) { return this._PLUGIN_ENTRY_POINT_1; } 27 | return notFoundResult; 28 | } 29 | destroyInternal():void { 30 | } 31 | } 32 | export const PluginModuleNgFactory:import0.NgModuleFactory = new import0.NgModuleFactory(PluginModuleInjector,import1.PluginModule); 33 | //# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoiQzovUHJvamVjdHMvbW9kdWxlLWxvYWRpbmcvZHluYW1pYy9teXBsdWdpbi1jbGkvc3JjL2FwcC9wbHVnaW4ubW9kdWxlLm5nZmFjdG9yeS50cyIsInZlcnNpb24iOjMsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIm5nOi8vL0M6L1Byb2plY3RzL21vZHVsZS1sb2FkaW5nL2R5bmFtaWMvbXlwbHVnaW4tY2xpL3NyYy9hcHAvcGx1Z2luLm1vZHVsZS50cyJdLCJzb3VyY2VzQ29udGVudCI6WyIgIl0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsifQ== 34 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/aot/aot/src/app/plugin.component.ngfactory.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview This file is generated by the Angular template compiler. 3 | * Do not edit. 4 | * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride} 5 | */ 6 | /* tslint:disable */ 7 | import * as import0 from '@angular/core'; 8 | import * as import1 from '../../../src/app/plugin.component'; 9 | var styles_PluginComponent = []; 10 | export var RenderType_PluginComponent = import0.ɵcrt({ 11 | encapsulation: 2, 12 | styles: styles_PluginComponent, 13 | data: {} 14 | }); 15 | export function View_PluginComponent_0(l) { 16 | return import0.ɵvid(0, [(l()(), import0.ɵted(null, ['\n I am a plugin!\n I am a changed plugin :D\n\n ']))], null, null); 17 | } 18 | function View_PluginComponent_Host_0(l) { 19 | return import0.ɵvid(0, [ 20 | (l()(), import0.ɵeld(0, null, null, 1, 'myplugin', [], null, null, null, View_PluginComponent_0, RenderType_PluginComponent)), 21 | import0.ɵdid(49152, null, 0, import1.PluginComponent, [], null, null) 22 | ], null, null); 23 | } 24 | export var PluginComponentNgFactory = import0.ɵccf('myplugin', import1.PluginComponent, View_PluginComponent_Host_0, {}, {}, []); 25 | //# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoiQzovUHJvamVjdHMvbW9kdWxlLWxvYWRpbmcvZHluYW1pYy9teXBsdWdpbi1jbGkvc3JjL2FwcC9wbHVnaW4uY29tcG9uZW50Lm5nZmFjdG9yeS50cyIsInZlcnNpb24iOjMsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIm5nOi8vL0M6L1Byb2plY3RzL21vZHVsZS1sb2FkaW5nL2R5bmFtaWMvbXlwbHVnaW4tY2xpL3NyYy9hcHAvcGx1Z2luLmNvbXBvbmVudC50cyIsIm5nOi8vL0M6L1Byb2plY3RzL21vZHVsZS1sb2FkaW5nL2R5bmFtaWMvbXlwbHVnaW4tY2xpL3NyYy9hcHAvcGx1Z2luLmNvbXBvbmVudC50cy5QbHVnaW5Db21wb25lbnQuaHRtbCIsIm5nOi8vL0M6L1Byb2plY3RzL21vZHVsZS1sb2FkaW5nL2R5bmFtaWMvbXlwbHVnaW4tY2xpL3NyYy9hcHAvcGx1Z2luLmNvbXBvbmVudC50cy5QbHVnaW5Db21wb25lbnRfSG9zdC5odG1sIl0sInNvdXJjZXNDb250ZW50IjpbIiAiLCJcbiAgICBJIGFtIGEgcGx1Z2luIVxuICAgIEkgYW0gYSBjaGFuZ2VkIHBsdWdpbiA6RFxuXG4gICAgIiwiPG15cGx1Z2luPjwvbXlwbHVnaW4+Il0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7O3lCQ0FBOzs7O0lDQUE7Z0JBQUE7Ozs7In0= 26 | -------------------------------------------------------------------------------- /dynamic/base/src/app/dynamic-plugin-loader.component.ts: -------------------------------------------------------------------------------- 1 | import { PluginMetadata } from './plugin-metadata.model'; 2 | import { Component, Injector, ViewContainerRef, NgModuleFactory, Input, ComponentFactory } from '@angular/core'; 3 | import { Http } from '@angular/http'; 4 | import 'rxjs/add/operator/map'; 5 | 6 | @Component({ 7 | selector: 'dynamic-component-loader', 8 | template: ' ' 9 | }) 10 | export class DynamicComponentLoader { 11 | 12 | @Input() name: string; 13 | 14 | constructor( 15 | private injector: Injector, 16 | private viewRef: ViewContainerRef, 17 | private http: Http, 18 | ) { } 19 | 20 | 21 | ngOnInit() { 22 | const metadataFileName = 'plugin-metadata.json'; 23 | const factoryFileName = 'plugin-factory.umd.js'; 24 | const pluginUrlPrefix = 'assets/plugins'; 25 | const factorySuffix = 'NgFactory'; 26 | const pluginEntryPointToken = 'PLUGIN_ENTRY_POINT' 27 | 28 | // retrieved the metadata for the plugin 29 | this.http.get(`${pluginUrlPrefix}/${this.name}/${metadataFileName}`) 30 | .map(res => res.json()) 31 | .map((metadata: PluginMetadata) => { 32 | 33 | // create the element to load in the module and factories 34 | const script = document.createElement('script'); 35 | script.src = `${pluginUrlPrefix}/${this.name}/${factoryFileName}`; 36 | 37 | script.onload = () => { 38 | //rollup builds the bundle so it's attached to the window object when loaded in 39 | const moduleFactory: NgModuleFactory = window[metadata.name][metadata.moduleName + factorySuffix]; 40 | const moduleRef = moduleFactory.create(this.injector); 41 | 42 | //use the entry point token to grab the component type that we should be rendering 43 | const compType = moduleRef.injector.get(pluginEntryPointToken); 44 | const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(compType); 45 | 46 | this.viewRef.createComponent(compFactory); 47 | } 48 | 49 | document.head.appendChild(script); 50 | 51 | }).subscribe(); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /dynamic/base/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "base", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "webpack-dev-server --port=4200", 8 | "build": "webpack", 9 | "test": "karma start ./karma.conf.js", 10 | "lint": "ng lint", 11 | "e2e": "protractor ./protractor.conf.js", 12 | "prepree2e": "npm start", 13 | "pree2e": "webdriver-manager update --standalone false --gecko false --quiet" 14 | }, 15 | "private": true, 16 | "dependencies": { 17 | "@angular/common": "^4.0.0", 18 | "@angular/compiler": "^4.0.0", 19 | "@angular/core": "^4.0.0", 20 | "@angular/forms": "^4.0.0", 21 | "@angular/http": "^4.0.0", 22 | "@angular/platform-browser": "^4.0.0", 23 | "@angular/platform-browser-dynamic": "^4.0.0", 24 | "@angular/router": "^4.0.0", 25 | "core-js": "^2.4.1", 26 | "rxjs": "^5.1.0", 27 | "zone.js": "^0.8.4" 28 | }, 29 | "devDependencies": { 30 | "@angular/cli": "1.0.0", 31 | "@angular/compiler-cli": "^4.0.0", 32 | "@types/jasmine": "2.5.38", 33 | "@types/node": "~6.0.60", 34 | "codelyzer": "~2.0.0", 35 | "jasmine-core": "~2.5.2", 36 | "jasmine-spec-reporter": "~3.2.0", 37 | "karma": "~1.4.1", 38 | "karma-chrome-launcher": "~2.0.0", 39 | "karma-cli": "~1.0.1", 40 | "karma-jasmine": "~1.1.0", 41 | "karma-jasmine-html-reporter": "^0.2.2", 42 | "karma-coverage-istanbul-reporter": "^0.2.0", 43 | "protractor": "~5.1.0", 44 | "ts-node": "~2.0.0", 45 | "tslint": "~4.5.0", 46 | "typescript": "~2.2.0", 47 | "webpack-dev-server": "~2.3.0", 48 | "autoprefixer": "^6.5.3", 49 | "css-loader": "^0.26.1", 50 | "cssnano": "^3.10.0", 51 | "exports-loader": "^0.6.3", 52 | "file-loader": "^0.10.0", 53 | "json-loader": "^0.5.4", 54 | "karma-sourcemap-loader": "^0.3.7", 55 | "less-loader": "^2.2.3", 56 | "postcss-loader": "^0.13.0", 57 | "postcss-url": "^5.1.2", 58 | "raw-loader": "^0.5.1", 59 | "sass-loader": "^4.1.1", 60 | "script-loader": "^0.7.0", 61 | "source-map-loader": "^0.1.5", 62 | "istanbul-instrumenter-loader": "^2.0.0", 63 | "style-loader": "^0.13.1", 64 | "stylus-loader": "^2.4.0", 65 | "url-loader": "^0.5.7" 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/aot/src/app/plugin.component.ngfactory.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview This file is generated by the Angular template compiler. 3 | * Do not edit. 4 | * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride} 5 | */ 6 | /* tslint:disable */ 7 | 8 | 9 | import * as import0 from '@angular/core'; 10 | import * as import1 from '../../../src/app/plugin.component'; 11 | const styles_PluginComponent:any[] = ([] as any[]); 12 | export const RenderType_PluginComponent:import0.RendererType2 = import0.ɵcrt({ 13 | encapsulation: 2, 14 | styles: styles_PluginComponent, 15 | data: {} 16 | } 17 | ); 18 | export function View_PluginComponent_0(l:any):import0.ɵViewDefinition { 19 | return import0.ɵvid(0,[(l()(),import0.ɵted((null as any),['\n I am a plugin!\n I am a changed plugin :D\n\n ']))],(null as any),(null as any)); 20 | } 21 | function View_PluginComponent_Host_0(l:any):import0.ɵViewDefinition { 22 | return import0.ɵvid(0,[ 23 | (l()(),import0.ɵeld(0,(null as any),(null as any),1,'myplugin',([] as any[]),(null as any),(null as any),(null as any),View_PluginComponent_0,RenderType_PluginComponent)), 24 | import0.ɵdid(49152,(null as any),0,import1.PluginComponent,([] as any[]),(null as any),(null as any)) 25 | ] 26 | ,(null as any),(null as any)); 27 | } 28 | export const PluginComponentNgFactory:import0.ComponentFactory = import0.ɵccf('myplugin',import1.PluginComponent,View_PluginComponent_Host_0,{},{},([] as any[])); 29 | //# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoiQzovUHJvamVjdHMvbW9kdWxlLWxvYWRpbmcvZHluYW1pYy9teXBsdWdpbi1jbGkvc3JjL2FwcC9wbHVnaW4uY29tcG9uZW50Lm5nZmFjdG9yeS50cyIsInZlcnNpb24iOjMsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIm5nOi8vL0M6L1Byb2plY3RzL21vZHVsZS1sb2FkaW5nL2R5bmFtaWMvbXlwbHVnaW4tY2xpL3NyYy9hcHAvcGx1Z2luLmNvbXBvbmVudC50cyIsIm5nOi8vL0M6L1Byb2plY3RzL21vZHVsZS1sb2FkaW5nL2R5bmFtaWMvbXlwbHVnaW4tY2xpL3NyYy9hcHAvcGx1Z2luLmNvbXBvbmVudC50cy5QbHVnaW5Db21wb25lbnQuaHRtbCIsIm5nOi8vL0M6L1Byb2plY3RzL21vZHVsZS1sb2FkaW5nL2R5bmFtaWMvbXlwbHVnaW4tY2xpL3NyYy9hcHAvcGx1Z2luLmNvbXBvbmVudC50cy5QbHVnaW5Db21wb25lbnRfSG9zdC5odG1sIl0sInNvdXJjZXNDb250ZW50IjpbIiAiLCJcbiAgICBJIGFtIGEgcGx1Z2luIVxuICAgIEkgYW0gYSBjaGFuZ2VkIHBsdWdpbiA6RFxuXG4gICAgIiwiPG15cGx1Z2luPjwvbXlwbHVnaW4+Il0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7O3lCQ0FBOzs7O0lDQUE7Z0JBQUE7Ozs7In0= 30 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/aot/aot/src/app/plugin.module.ngfactory.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview This file is generated by the Angular template compiler. 3 | * Do not edit. 4 | * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride} 5 | */ 6 | /* tslint:disable */ 7 | var __extends = (this && this.__extends) || (function () { 8 | var extendStatics = Object.setPrototypeOf || 9 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || 10 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; 11 | return function (d, b) { 12 | extendStatics(d, b); 13 | function __() { this.constructor = d; } 14 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 15 | }; 16 | })(); 17 | import * as import0 from '@angular/core'; 18 | import * as import1 from '../../../src/app/plugin.module'; 19 | import * as import2 from './plugin.component.ngfactory'; 20 | import * as import3 from '../../../src/app/plugin.component'; 21 | var PluginModuleInjector = (function (_super) { 22 | __extends(PluginModuleInjector, _super); 23 | function PluginModuleInjector(parent) { 24 | return _super.call(this, parent, [import2.PluginComponentNgFactory], []) || this; 25 | } 26 | PluginModuleInjector.prototype.createInternal = function () { 27 | this._PluginModule_0 = new import1.PluginModule(); 28 | this._PLUGIN_ENTRY_POINT_1 = import3.PluginComponent; 29 | return this._PluginModule_0; 30 | }; 31 | PluginModuleInjector.prototype.getInternal = function (token, notFoundResult) { 32 | if ((token === import1.PluginModule)) { 33 | return this._PluginModule_0; 34 | } 35 | if ((token === 'PLUGIN_ENTRY_POINT')) { 36 | return this._PLUGIN_ENTRY_POINT_1; 37 | } 38 | return notFoundResult; 39 | }; 40 | PluginModuleInjector.prototype.destroyInternal = function () { 41 | }; 42 | return PluginModuleInjector; 43 | }(import0.ɵNgModuleInjector)); 44 | export var PluginModuleNgFactory = new import0.NgModuleFactory(PluginModuleInjector, import1.PluginModule); 45 | //# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoiQzovUHJvamVjdHMvbW9kdWxlLWxvYWRpbmcvZHluYW1pYy9teXBsdWdpbi1jbGkvc3JjL2FwcC9wbHVnaW4ubW9kdWxlLm5nZmFjdG9yeS50cyIsInZlcnNpb24iOjMsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIm5nOi8vL0M6L1Byb2plY3RzL21vZHVsZS1sb2FkaW5nL2R5bmFtaWMvbXlwbHVnaW4tY2xpL3NyYy9hcHAvcGx1Z2luLm1vZHVsZS50cyJdLCJzb3VyY2VzQ29udGVudCI6WyIgIl0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsifQ== 46 | -------------------------------------------------------------------------------- /static/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/set'; 35 | 36 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 37 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 38 | 39 | /** IE10 and IE11 requires the following to support `@angular/animation`. */ 40 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 41 | 42 | 43 | /** Evergreen browsers require these. **/ 44 | import 'core-js/es6/reflect'; 45 | import 'core-js/es7/reflect'; 46 | 47 | 48 | /** ALL Firefox browsers require the following to support `@angular/animation`. **/ 49 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 50 | 51 | 52 | 53 | /*************************************************************************************************** 54 | * Zone JS is required by Angular itself. 55 | */ 56 | import 'zone.js/dist/zone'; // Included with Angular-CLI. 57 | 58 | 59 | 60 | /*************************************************************************************************** 61 | * APPLICATION IMPORTS 62 | */ 63 | 64 | /** 65 | * Date, currency, decimal and percent pipes. 66 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 67 | */ 68 | // import 'intl'; // Run `npm install --save intl`. 69 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/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/set'; 35 | 36 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 37 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 38 | 39 | /** IE10 and IE11 requires the following to support `@angular/animation`. */ 40 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 41 | 42 | 43 | /** Evergreen browsers require these. **/ 44 | import 'core-js/es6/reflect'; 45 | import 'core-js/es7/reflect'; 46 | 47 | 48 | /** ALL Firefox browsers require the following to support `@angular/animation`. **/ 49 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 50 | 51 | 52 | 53 | /*************************************************************************************************** 54 | * Zone JS is required by Angular itself. 55 | */ 56 | import 'zone.js/dist/zone'; // Included with Angular CLI. 57 | 58 | 59 | 60 | /*************************************************************************************************** 61 | * APPLICATION IMPORTS 62 | */ 63 | 64 | /** 65 | * Date, currency, decimal and percent pipes. 66 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 67 | */ 68 | // import 'intl'; // Run `npm install --save intl`. 69 | -------------------------------------------------------------------------------- /static/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "callable-types": true, 7 | "class-name": true, 8 | "comment-format": [ 9 | true, 10 | "check-space" 11 | ], 12 | "curly": true, 13 | "eofline": true, 14 | "forin": true, 15 | "import-blacklist": [true, "rxjs"], 16 | "import-spacing": true, 17 | "indent": [ 18 | true, 19 | "spaces" 20 | ], 21 | "interface-over-type-literal": true, 22 | "label-position": true, 23 | "max-line-length": [ 24 | true, 25 | 140 26 | ], 27 | "member-access": false, 28 | "member-ordering": [ 29 | true, 30 | "static-before-instance", 31 | "variables-before-functions" 32 | ], 33 | "no-arg": true, 34 | "no-bitwise": true, 35 | "no-console": [ 36 | true, 37 | "debug", 38 | "info", 39 | "time", 40 | "timeEnd", 41 | "trace" 42 | ], 43 | "no-construct": true, 44 | "no-debugger": true, 45 | "no-duplicate-variable": true, 46 | "no-empty": false, 47 | "no-empty-interface": true, 48 | "no-eval": true, 49 | "no-inferrable-types": true, 50 | "no-shadowed-variable": true, 51 | "no-string-literal": false, 52 | "no-string-throw": true, 53 | "no-switch-case-fall-through": true, 54 | "no-trailing-whitespace": true, 55 | "no-unused-expression": true, 56 | "no-use-before-declare": true, 57 | "no-var-keyword": true, 58 | "object-literal-sort-keys": false, 59 | "one-line": [ 60 | true, 61 | "check-open-brace", 62 | "check-catch", 63 | "check-else", 64 | "check-whitespace" 65 | ], 66 | "prefer-const": true, 67 | "quotemark": [ 68 | true, 69 | "single" 70 | ], 71 | "radix": true, 72 | "semicolon": [ 73 | "always" 74 | ], 75 | "triple-equals": [ 76 | true, 77 | "allow-null-check" 78 | ], 79 | "typedef-whitespace": [ 80 | true, 81 | { 82 | "call-signature": "nospace", 83 | "index-signature": "nospace", 84 | "parameter": "nospace", 85 | "property-declaration": "nospace", 86 | "variable-declaration": "nospace" 87 | } 88 | ], 89 | "typeof-compare": true, 90 | "unified-signatures": true, 91 | "variable-name": false, 92 | "whitespace": [ 93 | true, 94 | "check-branch", 95 | "check-decl", 96 | "check-operator", 97 | "check-separator", 98 | "check-type" 99 | ], 100 | 101 | "directive-selector": [true, "attribute", "app", "camelCase"], 102 | "component-selector": [true, "element", "app", "kebab-case"], 103 | "use-input-property-decorator": true, 104 | "use-output-property-decorator": true, 105 | "use-host-property-decorator": true, 106 | "no-input-rename": true, 107 | "no-output-rename": true, 108 | "use-life-cycle-interface": true, 109 | "use-pipe-transform-interface": true, 110 | "component-class-suffix": true, 111 | "directive-class-suffix": true, 112 | "no-access-missing-member": true, 113 | "templates-use-public": true, 114 | "invoke-injectable": true 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "callable-types": true, 7 | "class-name": true, 8 | "comment-format": [ 9 | true, 10 | "check-space" 11 | ], 12 | "curly": true, 13 | "eofline": true, 14 | "forin": true, 15 | "import-blacklist": [true, "rxjs"], 16 | "import-spacing": true, 17 | "indent": [ 18 | true, 19 | "spaces" 20 | ], 21 | "interface-over-type-literal": true, 22 | "label-position": true, 23 | "max-line-length": [ 24 | true, 25 | 140 26 | ], 27 | "member-access": false, 28 | "member-ordering": [ 29 | true, 30 | "static-before-instance", 31 | "variables-before-functions" 32 | ], 33 | "no-arg": true, 34 | "no-bitwise": true, 35 | "no-console": [ 36 | true, 37 | "debug", 38 | "info", 39 | "time", 40 | "timeEnd", 41 | "trace" 42 | ], 43 | "no-construct": true, 44 | "no-debugger": true, 45 | "no-duplicate-variable": true, 46 | "no-empty": false, 47 | "no-empty-interface": true, 48 | "no-eval": true, 49 | "no-inferrable-types": [true, "ignore-params"], 50 | "no-shadowed-variable": true, 51 | "no-string-literal": false, 52 | "no-string-throw": true, 53 | "no-switch-case-fall-through": true, 54 | "no-trailing-whitespace": true, 55 | "no-unused-expression": true, 56 | "no-use-before-declare": true, 57 | "no-var-keyword": true, 58 | "object-literal-sort-keys": false, 59 | "one-line": [ 60 | true, 61 | "check-open-brace", 62 | "check-catch", 63 | "check-else", 64 | "check-whitespace" 65 | ], 66 | "prefer-const": true, 67 | "quotemark": [ 68 | true, 69 | "single" 70 | ], 71 | "radix": true, 72 | "semicolon": [ 73 | "always" 74 | ], 75 | "triple-equals": [ 76 | true, 77 | "allow-null-check" 78 | ], 79 | "typedef-whitespace": [ 80 | true, 81 | { 82 | "call-signature": "nospace", 83 | "index-signature": "nospace", 84 | "parameter": "nospace", 85 | "property-declaration": "nospace", 86 | "variable-declaration": "nospace" 87 | } 88 | ], 89 | "typeof-compare": true, 90 | "unified-signatures": true, 91 | "variable-name": false, 92 | "whitespace": [ 93 | true, 94 | "check-branch", 95 | "check-decl", 96 | "check-operator", 97 | "check-separator", 98 | "check-type" 99 | ], 100 | 101 | "directive-selector": [true, "attribute", "app", "camelCase"], 102 | "component-selector": [true, "element", "app", "kebab-case"], 103 | "use-input-property-decorator": true, 104 | "use-output-property-decorator": true, 105 | "use-host-property-decorator": true, 106 | "no-input-rename": true, 107 | "no-output-rename": true, 108 | "use-life-cycle-interface": true, 109 | "use-pipe-transform-interface": true, 110 | "component-class-suffix": true, 111 | "directive-class-suffix": true, 112 | "no-access-missing-member": true, 113 | "templates-use-public": true, 114 | "invoke-injectable": true 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /dynamic/myplugin/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "callable-types": true, 7 | "class-name": true, 8 | "comment-format": [ 9 | true, 10 | "check-space" 11 | ], 12 | "curly": true, 13 | "eofline": true, 14 | "forin": true, 15 | "import-blacklist": [true, "rxjs"], 16 | "import-spacing": true, 17 | "indent": [ 18 | true, 19 | "spaces" 20 | ], 21 | "interface-over-type-literal": true, 22 | "label-position": true, 23 | "max-line-length": [ 24 | true, 25 | 140 26 | ], 27 | "member-access": false, 28 | "member-ordering": [ 29 | true, 30 | "static-before-instance", 31 | "variables-before-functions" 32 | ], 33 | "no-arg": true, 34 | "no-bitwise": true, 35 | "no-console": [ 36 | true, 37 | "debug", 38 | "info", 39 | "time", 40 | "timeEnd", 41 | "trace" 42 | ], 43 | "no-construct": true, 44 | "no-debugger": true, 45 | "no-duplicate-variable": true, 46 | "no-empty": false, 47 | "no-empty-interface": true, 48 | "no-eval": true, 49 | "no-inferrable-types": [true, "ignore-params"], 50 | "no-shadowed-variable": true, 51 | "no-string-literal": false, 52 | "no-string-throw": true, 53 | "no-switch-case-fall-through": true, 54 | "no-trailing-whitespace": true, 55 | "no-unused-expression": true, 56 | "no-use-before-declare": true, 57 | "no-var-keyword": true, 58 | "object-literal-sort-keys": false, 59 | "one-line": [ 60 | true, 61 | "check-open-brace", 62 | "check-catch", 63 | "check-else", 64 | "check-whitespace" 65 | ], 66 | "prefer-const": true, 67 | "quotemark": [ 68 | true, 69 | "single" 70 | ], 71 | "radix": true, 72 | "semicolon": [ 73 | "always" 74 | ], 75 | "triple-equals": [ 76 | true, 77 | "allow-null-check" 78 | ], 79 | "typedef-whitespace": [ 80 | true, 81 | { 82 | "call-signature": "nospace", 83 | "index-signature": "nospace", 84 | "parameter": "nospace", 85 | "property-declaration": "nospace", 86 | "variable-declaration": "nospace" 87 | } 88 | ], 89 | "typeof-compare": true, 90 | "unified-signatures": true, 91 | "variable-name": false, 92 | "whitespace": [ 93 | true, 94 | "check-branch", 95 | "check-decl", 96 | "check-operator", 97 | "check-separator", 98 | "check-type" 99 | ], 100 | 101 | "directive-selector": [true, "attribute", "app", "camelCase"], 102 | "component-selector": [true, "element", "app", "kebab-case"], 103 | "use-input-property-decorator": true, 104 | "use-output-property-decorator": true, 105 | "use-host-property-decorator": true, 106 | "no-input-rename": true, 107 | "no-output-rename": true, 108 | "use-life-cycle-interface": true, 109 | "use-pipe-transform-interface": true, 110 | "component-class-suffix": true, 111 | "directive-class-suffix": true, 112 | "no-access-missing-member": true, 113 | "templates-use-public": true, 114 | "invoke-injectable": true 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /dynamic/myplugin-cli/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "callable-types": true, 7 | "class-name": true, 8 | "comment-format": [ 9 | true, 10 | "check-space" 11 | ], 12 | "curly": true, 13 | "eofline": true, 14 | "forin": true, 15 | "import-blacklist": [true, "rxjs"], 16 | "import-spacing": true, 17 | "indent": [ 18 | true, 19 | "spaces" 20 | ], 21 | "interface-over-type-literal": true, 22 | "label-position": true, 23 | "max-line-length": [ 24 | true, 25 | 140 26 | ], 27 | "member-access": false, 28 | "member-ordering": [ 29 | true, 30 | "static-before-instance", 31 | "variables-before-functions" 32 | ], 33 | "no-arg": true, 34 | "no-bitwise": true, 35 | "no-console": [ 36 | true, 37 | "debug", 38 | "info", 39 | "time", 40 | "timeEnd", 41 | "trace" 42 | ], 43 | "no-construct": true, 44 | "no-debugger": true, 45 | "no-duplicate-variable": true, 46 | "no-empty": false, 47 | "no-empty-interface": true, 48 | "no-eval": true, 49 | "no-inferrable-types": [true, "ignore-params"], 50 | "no-shadowed-variable": true, 51 | "no-string-literal": false, 52 | "no-string-throw": true, 53 | "no-switch-case-fall-through": true, 54 | "no-trailing-whitespace": true, 55 | "no-unused-expression": true, 56 | "no-use-before-declare": true, 57 | "no-var-keyword": true, 58 | "object-literal-sort-keys": false, 59 | "one-line": [ 60 | true, 61 | "check-open-brace", 62 | "check-catch", 63 | "check-else", 64 | "check-whitespace" 65 | ], 66 | "prefer-const": true, 67 | "quotemark": [ 68 | true, 69 | "single" 70 | ], 71 | "radix": true, 72 | "semicolon": [ 73 | "always" 74 | ], 75 | "triple-equals": [ 76 | true, 77 | "allow-null-check" 78 | ], 79 | "typedef-whitespace": [ 80 | true, 81 | { 82 | "call-signature": "nospace", 83 | "index-signature": "nospace", 84 | "parameter": "nospace", 85 | "property-declaration": "nospace", 86 | "variable-declaration": "nospace" 87 | } 88 | ], 89 | "typeof-compare": true, 90 | "unified-signatures": true, 91 | "variable-name": false, 92 | "whitespace": [ 93 | true, 94 | "check-branch", 95 | "check-decl", 96 | "check-operator", 97 | "check-separator", 98 | "check-type" 99 | ], 100 | 101 | "directive-selector": [true, "attribute", "app", "camelCase"], 102 | "component-selector": [true, "element", "app", "kebab-case"], 103 | "use-input-property-decorator": true, 104 | "use-output-property-decorator": true, 105 | "use-host-property-decorator": true, 106 | "no-input-rename": true, 107 | "no-output-rename": true, 108 | "use-life-cycle-interface": true, 109 | "use-pipe-transform-interface": true, 110 | "component-class-suffix": true, 111 | "directive-class-suffix": true, 112 | "no-access-missing-member": true, 113 | "templates-use-public": true, 114 | "invoke-injectable": true 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /static/src/plugins/lazy.module.ngfactory.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview This file is generated by the Angular 2 template compiler. 3 | * Do not edit. 4 | * @suppress {suspiciousCode,uselessCode,missingProperties} 5 | */ 6 | /* tslint:disable */ 7 | 8 | import * as import0 from '@angular/core/src/linker/ng_module_factory'; 9 | import * as import1 from './lazy.module'; 10 | import * as import2 from '@angular/common/src/common_module'; 11 | import * as import3 from '@angular/common/src/localization'; 12 | import * as import4 from '@angular/core/src/di/injector'; 13 | import * as import5 from '@angular/core/src/i18n/tokens'; 14 | import * as import6 from '@angular/core/src/linker/view'; 15 | import * as import7 from '@angular/core/src/render/api'; 16 | import * as import8 from '@angular/core/src/linker/view_utils'; 17 | import * as import9 from '@angular/core/src/metadata/view'; 18 | import * as import10 from '@angular/core/src/linker/view_type'; 19 | import * as import11 from '@angular/core/src/change_detection/constants'; 20 | import * as import12 from '@angular/core/src/linker/component_factory'; 21 | class LazyInjector extends import0.NgModuleInjector { 22 | _CommonModule_0:import2.CommonModule; 23 | _Lazy_1:import1.Lazy; 24 | __NgLocalization_2:import3.NgLocaleLocalization; 25 | constructor(parent:import4.Injector) { 26 | super(parent,[LazyCompNgFactory],([] as any[])); 27 | } 28 | get _NgLocalization_2():import3.NgLocaleLocalization { 29 | if ((this.__NgLocalization_2 == null)) { (this.__NgLocalization_2 = new import3.NgLocaleLocalization(this.parent.get(import5.LOCALE_ID))); } 30 | return this.__NgLocalization_2; 31 | } 32 | createInternal():import1.Lazy { 33 | this._CommonModule_0 = new import2.CommonModule(); 34 | this._Lazy_1 = new import1.Lazy(); 35 | return this._Lazy_1; 36 | } 37 | getInternal(token:any,notFoundResult:any):any { 38 | if ((token === import2.CommonModule)) { return this._CommonModule_0; } 39 | if ((token === import1.Lazy)) { return this._Lazy_1; } 40 | if ((token === import3.NgLocalization)) { return this._NgLocalization_2; } 41 | return notFoundResult; 42 | } 43 | destroyInternal():void { 44 | } 45 | } 46 | export const LazyNgFactory:import0.NgModuleFactory = new import0.NgModuleFactory(LazyInjector,import1.Lazy); 47 | export class Wrapper_LazyComp { 48 | /*private*/ _eventHandler:Function; 49 | context:import1.LazyComp; 50 | /*private*/ _changed:boolean; 51 | constructor() { 52 | this._changed = false; 53 | this.context = new import1.LazyComp(); 54 | } 55 | ngOnDetach(view:import6.AppView,componentView:import6.AppView,el:any):void { 56 | } 57 | ngOnDestroy():void { 58 | } 59 | ngDoCheck(view:import6.AppView,el:any,throwOnChange:boolean):boolean { 60 | var changed:any = this._changed; 61 | this._changed = false; 62 | return changed; 63 | } 64 | checkHost(view:import6.AppView,componentView:import6.AppView,el:any,throwOnChange:boolean):void { 65 | } 66 | handleEvent(eventName:string,$event:any):boolean { 67 | var result:boolean = true; 68 | return result; 69 | } 70 | subscribe(view:import6.AppView,_eventHandler:any):void { 71 | this._eventHandler = _eventHandler; 72 | } 73 | } 74 | var renderType_LazyComp_Host:import7.RenderComponentType = import8.createRenderComponentType('',0,import9.ViewEncapsulation.None,([] as any[]),{}); 75 | class View_LazyComp_Host0 extends import6.AppView { 76 | _el_0:any; 77 | compView_0:import6.AppView; 78 | _LazyComp_0_3:Wrapper_LazyComp; 79 | constructor(viewUtils:import8.ViewUtils,parentView:import6.AppView,parentIndex:number,parentElement:any) { 80 | super(View_LazyComp_Host0,renderType_LazyComp_Host,import10.ViewType.HOST,viewUtils,parentView,parentIndex,parentElement,import11.ChangeDetectorStatus.CheckAlways); 81 | } 82 | createInternal(rootSelector:string):import12.ComponentRef { 83 | this._el_0 = import8.selectOrCreateRenderHostElement(this.renderer,'lazy-comp',import8.EMPTY_INLINE_ARRAY,rootSelector,(null as any)); 84 | this.compView_0 = new View_LazyComp0(this.viewUtils,this,0,this._el_0); 85 | this._LazyComp_0_3 = new Wrapper_LazyComp(); 86 | this.compView_0.create(this._LazyComp_0_3.context); 87 | this.init(this._el_0,((this.renderer).directRenderer? (null as any): [this._el_0]),(null as any)); 88 | return new import12.ComponentRef_(0,this,this._el_0,this._LazyComp_0_3.context); 89 | } 90 | injectorGetInternal(token:any,requestNodeIndex:number,notFoundResult:any):any { 91 | if (((token === import1.LazyComp) && (0 === requestNodeIndex))) { return this._LazyComp_0_3.context; } 92 | return notFoundResult; 93 | } 94 | detectChangesInternal(throwOnChange:boolean):void { 95 | this._LazyComp_0_3.ngDoCheck(this,this._el_0,throwOnChange); 96 | this.compView_0.internalDetectChanges(throwOnChange); 97 | } 98 | destroyInternal():void { 99 | this.compView_0.destroy(); 100 | } 101 | visitRootNodesInternal(cb:any,ctx:any):void { 102 | cb(this._el_0,ctx); 103 | } 104 | } 105 | export const LazyCompNgFactory:import12.ComponentFactory = new import12.ComponentFactory('lazy-comp',View_LazyComp_Host0,import1.LazyComp); 106 | const styles_LazyComp:any[] = ([] as any[]); 107 | var renderType_LazyComp:import7.RenderComponentType = import8.createRenderComponentType('',0,import9.ViewEncapsulation.None,styles_LazyComp,{}); 108 | export class View_LazyComp0 extends import6.AppView { 109 | _text_0:any; 110 | constructor(viewUtils:import8.ViewUtils,parentView:import6.AppView,parentIndex:number,parentElement:any) { 111 | super(View_LazyComp0,renderType_LazyComp,import10.ViewType.COMPONENT,viewUtils,parentView,parentIndex,parentElement,import11.ChangeDetectorStatus.CheckAlways); 112 | } 113 | createInternal(rootSelector:string):import12.ComponentRef { 114 | const parentRenderNode:any = this.renderer.createViewRoot(this.parentElement); 115 | this._text_0 = this.renderer.createText(parentRenderNode,'hi',(null as any)); 116 | this.init((null as any),((this.renderer).directRenderer? (null as any): [this._text_0]),(null as any)); 117 | return (null as any); 118 | } 119 | } -------------------------------------------------------------------------------- /dynamic/base/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const ProgressPlugin = require('webpack/lib/ProgressPlugin'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 5 | const autoprefixer = require('autoprefixer'); 6 | const postcssUrl = require('postcss-url'); 7 | 8 | const { NoEmitOnErrorsPlugin, LoaderOptionsPlugin } = require('webpack'); 9 | const { GlobCopyWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack'); 10 | const { CommonsChunkPlugin } = require('webpack').optimize; 11 | const { AotPlugin } = require('@ngtools/webpack'); 12 | 13 | const nodeModules = path.join(process.cwd(), 'node_modules'); 14 | const entryPoints = ["inline", "polyfills", "sw-register", "styles", "vendor", "main"]; 15 | const baseHref = ""; 16 | const deployUrl = ""; 17 | 18 | 19 | 20 | 21 | module.exports = { 22 | //add externals for all external libs 23 | "externals": { 24 | '@angular/core': 'ng.core', 25 | '@angular/common': 'ng.common', 26 | '@angular/compiler': 'ng.compiler', 27 | '@angular/platform-browser': 'ng.platformBrowser', 28 | '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic', 29 | '@angular/http': 'ng.http', 30 | '@angular/forms': 'ng.forms', 31 | 32 | 'rxjs/Observable': 'Rx', 33 | 'rxjs/Subject': 'Rx', 34 | 'rxjs/Observer': 'Rx', 35 | 'rxjs/Subscription': 'Rx', 36 | 'rxjs/BehaviorSubject': 'Rx', 37 | 'rxjs/util/EmptyError': 'Rx', 38 | 39 | 'rxjs/observable/PromiseObservable': 'Rx', 40 | 'rxjs/observable/merge': 'Rx.Observable', 41 | 'rxjs/observable/fromPromise': 'Rx.Observable', 42 | 'rxjs/observable/forkJoin': 'Rx.Observable', 43 | 'rxjs/observable/from': 'Rx.Observable', 44 | 'rxjs/observable/fromPromise': 'Rx.Observable', 45 | 'rxjs/observable/forkJoin': 'Rx.Observable', 46 | 'rxjs/observable/of': 'Rx.Observable', 47 | 48 | 'rxjs/add/operator/map': 'Rx.Observable.prototype', 49 | 'rxjs/operator/share': 'Rx.Observable.prototype', 50 | 'rxjs/operator/toPromise': 'Rx.Observable.prototype', 51 | 'rxjs/operator/map': 'Rx.Observable.prototype', 52 | 'rxjs/operator/mergeAll': 'Rx.Observable.prototype', 53 | 'rxjs/operator/concatAll': 'Rx.Observable.prototype', 54 | 'rxjs/operator/mergeMap': 'Rx.Observable.prototype', 55 | 'rxjs/operator/reduce': 'Rx.Observable.prototype', 56 | 'rxjs/operator/every': 'Rx.Observable.prototype', 57 | 'rxjs/operator/first': 'Rx.Observable.prototype', 58 | 'rxjs/operator/catch': 'Rx.Observable.prototype', 59 | 'rxjs/operator/last': 'Rx.Observable.prototype', 60 | 'rxjs/operator/filter': 'Rx.Observable.prototype', 61 | 'rxjs/operator/concatMap': 'Rx.Observable.prototype', 62 | 'rxjs/operator/toPromise': 'Rx.Observable.prototype', 63 | }, 64 | "devtool": "source-map", 65 | "resolve": { 66 | "extensions": [ 67 | ".ts", 68 | ".js" 69 | ], 70 | "modules": [ 71 | "./node_modules" 72 | ] 73 | }, 74 | "resolveLoader": { 75 | "modules": [ 76 | "./node_modules" 77 | ] 78 | }, 79 | "entry": { 80 | "main": [ 81 | "./src/main.ts" 82 | ], 83 | "styles": [ 84 | "./src/styles.css" 85 | ] 86 | }, 87 | "output": { 88 | "path": path.join(process.cwd(), "dist"), 89 | "filename": "[name].bundle.js", 90 | "chunkFilename": "[id].chunk.js" 91 | }, 92 | "module": { 93 | "rules": [ 94 | { 95 | "enforce": "pre", 96 | "test": /\.js$/, 97 | "loader": "source-map-loader", 98 | "exclude": [ 99 | /\/node_modules\// 100 | ] 101 | }, 102 | { 103 | "test": /\.json$/, 104 | "loader": "json-loader" 105 | }, 106 | { 107 | "test": /\.html$/, 108 | "loader": "raw-loader" 109 | }, 110 | { 111 | "test": /\.(eot|svg)$/, 112 | "loader": "file-loader?name=[name].[hash:20].[ext]" 113 | }, 114 | { 115 | "test": /\.(jpg|png|gif|otf|ttf|woff|woff2|cur|ani)$/, 116 | "loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000" 117 | }, 118 | { 119 | "exclude": [ 120 | path.join(process.cwd(), "src/styles.css") 121 | ], 122 | "test": /\.css$/, 123 | "loaders": [ 124 | "exports-loader?module.exports.toString()", 125 | "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", 126 | "postcss-loader" 127 | ] 128 | }, 129 | { 130 | "exclude": [ 131 | path.join(process.cwd(), "src/styles.css") 132 | ], 133 | "test": /\.scss$|\.sass$/, 134 | "loaders": [ 135 | "exports-loader?module.exports.toString()", 136 | "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", 137 | "postcss-loader", 138 | "sass-loader" 139 | ] 140 | }, 141 | { 142 | "exclude": [ 143 | path.join(process.cwd(), "src/styles.css") 144 | ], 145 | "test": /\.less$/, 146 | "loaders": [ 147 | "exports-loader?module.exports.toString()", 148 | "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", 149 | "postcss-loader", 150 | "less-loader" 151 | ] 152 | }, 153 | { 154 | "exclude": [ 155 | path.join(process.cwd(), "src/styles.css") 156 | ], 157 | "test": /\.styl$/, 158 | "loaders": [ 159 | "exports-loader?module.exports.toString()", 160 | "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", 161 | "postcss-loader", 162 | "stylus-loader?{\"sourceMap\":false,\"paths\":[]}" 163 | ] 164 | }, 165 | { 166 | "include": [ 167 | path.join(process.cwd(), "src/styles.css") 168 | ], 169 | "test": /\.css$/, 170 | "loaders": ExtractTextPlugin.extract({ 171 | "use": [ 172 | "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", 173 | "postcss-loader" 174 | ], 175 | "fallback": "style-loader", 176 | "publicPath": "" 177 | }) 178 | }, 179 | { 180 | "include": [ 181 | path.join(process.cwd(), "src/styles.css") 182 | ], 183 | "test": /\.scss$|\.sass$/, 184 | "loaders": ExtractTextPlugin.extract({ 185 | "use": [ 186 | "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", 187 | "postcss-loader", 188 | "sass-loader" 189 | ], 190 | "fallback": "style-loader", 191 | "publicPath": "" 192 | }) 193 | }, 194 | { 195 | "include": [ 196 | path.join(process.cwd(), "src/styles.css") 197 | ], 198 | "test": /\.less$/, 199 | "loaders": ExtractTextPlugin.extract({ 200 | "use": [ 201 | "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", 202 | "postcss-loader", 203 | "less-loader" 204 | ], 205 | "fallback": "style-loader", 206 | "publicPath": "" 207 | }) 208 | }, 209 | { 210 | "include": [ 211 | path.join(process.cwd(), "src/styles.css") 212 | ], 213 | "test": /\.styl$/, 214 | "loaders": ExtractTextPlugin.extract({ 215 | "use": [ 216 | "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", 217 | "postcss-loader", 218 | "stylus-loader?{\"sourceMap\":false,\"paths\":[]}" 219 | ], 220 | "fallback": "style-loader", 221 | "publicPath": "" 222 | }) 223 | }, 224 | { 225 | "test": /\.ts$/, 226 | "loader": "@ngtools/webpack" 227 | } 228 | ] 229 | }, 230 | "plugins": [ 231 | new NoEmitOnErrorsPlugin(), 232 | new GlobCopyWebpackPlugin({ 233 | "patterns": [ 234 | "assets", 235 | "favicon.ico" 236 | ], 237 | "globOptions": { 238 | //https://github.com/angular/angular-cli/issues/5811 239 | "cwd": process.cwd() + "/src", 240 | "dot": true, 241 | "ignore": "**/.gitkeep" 242 | } 243 | }), 244 | new ProgressPlugin(), 245 | new HtmlWebpackPlugin({ 246 | "template": "./src/index.html", 247 | "filename": "./index.html", 248 | "hash": false, 249 | "inject": true, 250 | "compile": true, 251 | "favicon": false, 252 | "minify": false, 253 | "cache": true, 254 | "showErrors": true, 255 | "chunks": "all", 256 | "excludeChunks": [], 257 | "title": "Webpack App", 258 | "xhtml": true, 259 | "chunksSortMode": function sort(left, right) { 260 | let leftIndex = entryPoints.indexOf(left.names[0]); 261 | let rightindex = entryPoints.indexOf(right.names[0]); 262 | if (leftIndex > rightindex) { 263 | return 1; 264 | } 265 | else if (leftIndex < rightindex) { 266 | return -1; 267 | } 268 | else { 269 | return 0; 270 | } 271 | } 272 | }), 273 | new BaseHrefWebpackPlugin({}), 274 | new CommonsChunkPlugin({ 275 | "name": "inline", 276 | "minChunks": null 277 | }), 278 | new CommonsChunkPlugin({ 279 | "name": "vendor", 280 | "minChunks": (module) => module.resource && module.resource.startsWith(nodeModules), 281 | "chunks": [ 282 | "main" 283 | ] 284 | }), 285 | new ExtractTextPlugin({ 286 | "filename": "[name].bundle.css", 287 | "disable": true 288 | }), 289 | new LoaderOptionsPlugin({ 290 | "sourceMap": false, 291 | "options": { 292 | "postcss": [ 293 | autoprefixer(), 294 | postcssUrl({ 295 | "url": (URL) => { 296 | // Only convert root relative URLs, which CSS-Loader won't process into require(). 297 | if (!URL.startsWith('/') || URL.startsWith('//')) { 298 | return URL; 299 | } 300 | if (deployUrl.match(/:\/\//)) { 301 | // If deployUrl contains a scheme, ignore baseHref use deployUrl as is. 302 | return `${deployUrl.replace(/\/$/, '')}${URL}`; 303 | } 304 | else if (baseHref.match(/:\/\//)) { 305 | // If baseHref contains a scheme, include it as is. 306 | return baseHref.replace(/\/$/, '') + 307 | `/${deployUrl}/${URL}`.replace(/\/\/+/g, '/'); 308 | } 309 | else { 310 | // Join together base-href, deploy-url and the original URL. 311 | // Also dedupe multiple slashes into single ones. 312 | return `/${baseHref}/${deployUrl}/${URL}`.replace(/\/\/+/g, '/'); 313 | } 314 | } 315 | }) 316 | ], 317 | "sassLoader": { 318 | "sourceMap": false, 319 | "includePaths": [] 320 | }, 321 | "lessLoader": { 322 | "sourceMap": false 323 | }, 324 | "context": "" 325 | } 326 | }), 327 | new AotPlugin({ 328 | "mainPath": "main.ts", 329 | "hostReplacementPaths": { 330 | "environments/environment.ts": "environments/environment.ts" 331 | }, 332 | "exclude": [], 333 | "tsConfigPath": "src/tsconfig.app.json", 334 | "skipCodeGeneration": true 335 | }) 336 | ], 337 | "node": { 338 | "fs": "empty", 339 | "global": true, 340 | "crypto": "empty", 341 | "tls": "empty", 342 | "net": "empty", 343 | "process": true, 344 | "module": false, 345 | "clearImmediate": false, 346 | "setImmediate": false 347 | } 348 | }; 349 | --------------------------------------------------------------------------------