├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── e2e ├── protractor.conf.js ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.e2e.json ├── package.json ├── projects ├── modulea │ ├── karma.conf.js │ ├── ng-package.json │ ├── ng-package.prod.json │ ├── package.json │ ├── src │ │ ├── lib │ │ │ ├── modulea.component.spec.ts │ │ │ ├── modulea.component.ts │ │ │ ├── modulea.module.ts │ │ │ ├── modulea.service.spec.ts │ │ │ └── modulea.service.ts │ │ ├── public_api.ts │ │ └── test.ts │ ├── tsconfig.lib.json │ ├── tsconfig.spec.json │ └── tslint.json ├── moduleb │ ├── karma.conf.js │ ├── ng-package.json │ ├── ng-package.prod.json │ ├── package.json │ ├── src │ │ ├── lib │ │ │ ├── moduleb.component.spec.ts │ │ │ ├── moduleb.component.ts │ │ │ ├── moduleb.module.ts │ │ │ ├── moduleb.service.spec.ts │ │ │ └── moduleb.service.ts │ │ ├── public_api.ts │ │ └── test.ts │ ├── tsconfig.lib.json │ ├── tsconfig.spec.json │ └── tslint.json ├── modulec │ ├── karma.conf.js │ ├── ng-package.json │ ├── ng-package.prod.json │ ├── package.json │ ├── src │ │ ├── lib │ │ │ ├── modulec.component.spec.ts │ │ │ ├── modulec.component.ts │ │ │ ├── modulec.module.ts │ │ │ ├── modulec.service.spec.ts │ │ │ └── modulec.service.ts │ │ ├── public_api.ts │ │ └── test.ts │ ├── tsconfig.lib.json │ ├── tsconfig.spec.json │ └── tslint.json └── moduled │ ├── karma.conf.js │ ├── ng-package.json │ ├── ng-package.prod.json │ ├── package.json │ ├── src │ ├── lib │ │ ├── componenta │ │ │ ├── componenta.component.css │ │ │ ├── componenta.component.html │ │ │ ├── componenta.component.spec.ts │ │ │ └── componenta.component.ts │ │ ├── componentb │ │ │ ├── componentb.component.css │ │ │ ├── componentb.component.html │ │ │ ├── componentb.component.spec.ts │ │ │ └── componentb.component.ts │ │ ├── componentc │ │ │ ├── componentc.component.css │ │ │ ├── componentc.component.html │ │ │ ├── componentc.component.spec.ts │ │ │ └── componentc.component.ts │ │ ├── lazy │ │ │ ├── lazy.module.spec.ts │ │ │ ├── lazy.module.ts │ │ │ └── lazy │ │ │ │ ├── lazy.component.css │ │ │ │ ├── lazy.component.html │ │ │ │ ├── lazy.component.spec.ts │ │ │ │ └── lazy.component.ts │ │ ├── moduled.component.spec.ts │ │ ├── moduled.component.ts │ │ ├── moduled.module.ts │ │ ├── moduled.service.spec.ts │ │ └── moduled.service.ts │ ├── public_api.ts │ └── test.ts │ ├── tsconfig.lib.json │ ├── tsconfig.spec.json │ └── tslint.json ├── src ├── app │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── dashboard │ │ ├── dashboard.component.css │ │ ├── dashboard.component.html │ │ ├── dashboard.component.spec.ts │ │ └── dashboard.component.ts │ ├── models │ │ └── module.model.ts │ ├── portal │ │ ├── portal.component.html │ │ ├── portal.component.ts │ │ └── portal.module.ts │ └── services │ │ ├── module.service.ts │ │ └── router.service.ts ├── assets │ ├── .gitkeep │ ├── modulea.umd.js │ ├── moduleb.umd.js │ ├── modulec.umd.js │ ├── moduled.umd.js │ └── modules.json ├── browserslist ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── karma.conf.js ├── main.ts ├── polyfills.ts ├── styles.css ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── tslint.json ├── tsconfig.json └── tslint.json /.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 | -------------------------------------------------------------------------------- /.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 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular Dynamic UMD Module Loading 2 | With the use of Angular 6 and the library support of the Angular CLI I've created this repository to provide a (one of many) solution to the dynamic module loading during run-time. 3 | 4 | One of the sources guiding me can be found here; [https://github.com/kirjs/angular-dynamic-module-loading](https://github.com/kirjs/angular-dynamic-module-loading). 5 | 6 | ## How to start 7 | Clone or download this repository; 8 | > git clone https://github.com/lmeijdam/angular-umd-dynamic-example 9 | 10 | Navigate to the folder and install all dependencies; 11 | 12 | > npm install 13 | 14 | By default I've added the UMD bundles from ModuleA, ModuleB, ModuleC and ModuleD. Also modules A and C are registered by default. This means they will get loaded when the app gets initialized. 15 | 16 | ## Updating a module/library 17 | When you want to make updates to one of the existing modules you can just update the source files in 'projects/(moduletoedit)/src/lib' and rebuilding that specific module with the Angular CLI; 18 | > ng build (module/libraryName) 19 | 20 | After build you're able to replace the contents of that module in the 'assets' folder in either the dist folder or on the hosted environment. If you've added new dependencies like third party libraries and want to use them in the library. Make sure to update the 'modules' array in the module.service.ts and recompile. 21 | 22 | ## Adding a new module/library 23 | When you want to add a new library/module please make use of the Angular CLI command; 24 | > ng generate library (libraryName) 25 | 26 | Edit the modules.json file with the correct module information and also make sure to have the RouterModule.forChild([]) configuration done in the module of the library. 27 | 28 | In the original [source](https://github.com/kirjs/angular-dynamic-module-loading) you'll find an example to load up component dynamically and instantiate them in a ViewChild instead of extending the Router. 29 | 30 | Now build the module with 31 | >ng build LibraryName 32 | 33 | and copy the umd bundle to the 'assets' folder. 34 | 35 | ## AOT and SystemJS 36 | The app now supports AOT compilation by typing; 37 | > ng build --aot 38 | 39 | Next to that I've changed the use of eval to the use of SystemJS to load the modules. 40 | 41 | ## Running the application 42 | For the application I've used [https://www.npmjs.com/package/http-server](https://www.npmjs.com/package/http-server) which let your application run on port 8080 by default. After install you're able to run this application locally 43 | > npm install -g http-server 44 | > 45 | > http-server ./dist/angular-dynamic-demo 46 | 47 | 48 | ## Notes 49 | - Angular 6 uses RxJs 6. Install rxjs-compat before you can make use of the rxjs operators; [https://github.com/shlomiassaf/ngx-modialog/issues/426](https://github.com/shlomiassaf/ngx-modialog/issues/426) 50 | - This demo makes use of eval(). Something that is not really recommended to use due to security risks. Still a safe way is provided to make use of eval();[https://www.owasp.org/index.php?title=JavaScript_Closure_Within_Eval&setlang=en](https://www.owasp.org/index.php?title=JavaScript_Closure_Within_Eval&setlang=en) 51 | - Lazy Loading is not yet possible within the libraries as no chunk files are generated for the lazy loaded modules. 52 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "angular-dynamic-demo": { 7 | "root": "", 8 | "sourceRoot": "src", 9 | "projectType": "application", 10 | "prefix": "app", 11 | "schematics": {}, 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/angular-dynamic-demo", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "src/tsconfig.app.json", 21 | "assets": [ 22 | "src/favicon.ico", 23 | "src/assets" 24 | ], 25 | "styles": [ 26 | "node_modules/@clr/ui/clr-ui.min.css", 27 | "node_modules/@clr/icons/clr-icons.min.css", 28 | "src/styles.css" 29 | ], 30 | "scripts": [ 31 | "node_modules/@webcomponents/custom-elements/custom-elements.min.js", 32 | "node_modules/@clr/icons/clr-icons.min.js", 33 | "node_modules/systemjs/dist/system.src.js" 34 | ] 35 | }, 36 | "configurations": { 37 | "production": { 38 | "fileReplacements": [ 39 | { 40 | "replace": "src/environments/environment.ts", 41 | "with": "src/environments/environment.prod.ts" 42 | } 43 | ], 44 | "optimization": true, 45 | "outputHashing": "all", 46 | "sourceMap": false, 47 | "extractCss": true, 48 | "namedChunks": false, 49 | "aot": true, 50 | "extractLicenses": true, 51 | "vendorChunk": false, 52 | "buildOptimizer": true 53 | } 54 | } 55 | }, 56 | "serve": { 57 | "builder": "@angular-devkit/build-angular:dev-server", 58 | "options": { 59 | "browserTarget": "angular-dynamic-demo:build" 60 | }, 61 | "configurations": { 62 | "production": { 63 | "browserTarget": "angular-dynamic-demo:build:production" 64 | } 65 | } 66 | }, 67 | "extract-i18n": { 68 | "builder": "@angular-devkit/build-angular:extract-i18n", 69 | "options": { 70 | "browserTarget": "angular-dynamic-demo:build" 71 | } 72 | }, 73 | "test": { 74 | "builder": "@angular-devkit/build-angular:karma", 75 | "options": { 76 | "main": "src/test.ts", 77 | "polyfills": "src/polyfills.ts", 78 | "tsConfig": "src/tsconfig.spec.json", 79 | "karmaConfig": "src/karma.conf.js", 80 | "styles": [ 81 | "styles.css" 82 | ], 83 | "scripts": [], 84 | "assets": [ 85 | "src/favicon.ico", 86 | "src/assets" 87 | ] 88 | } 89 | }, 90 | "lint": { 91 | "builder": "@angular-devkit/build-angular:tslint", 92 | "options": { 93 | "tsConfig": [ 94 | "src/tsconfig.app.json", 95 | "src/tsconfig.spec.json" 96 | ], 97 | "exclude": [ 98 | "**/node_modules/**" 99 | ] 100 | } 101 | } 102 | } 103 | }, 104 | "angular-dynamic-demo-e2e": { 105 | "root": "e2e/", 106 | "projectType": "application", 107 | "architect": { 108 | "e2e": { 109 | "builder": "@angular-devkit/build-angular:protractor", 110 | "options": { 111 | "protractorConfig": "e2e/protractor.conf.js", 112 | "devServerTarget": "angular-dynamic-demo:serve" 113 | } 114 | }, 115 | "lint": { 116 | "builder": "@angular-devkit/build-angular:tslint", 117 | "options": { 118 | "tsConfig": "e2e/tsconfig.e2e.json", 119 | "exclude": [ 120 | "**/node_modules/**" 121 | ] 122 | } 123 | } 124 | } 125 | }, 126 | "modulea": { 127 | "root": "projects/modulea", 128 | "sourceRoot": "projects/modulea/src", 129 | "projectType": "library", 130 | "prefix": "lib", 131 | "architect": { 132 | "build": { 133 | "builder": "@angular-devkit/build-ng-packagr:build", 134 | "options": { 135 | "tsConfig": "projects/modulea/tsconfig.lib.json", 136 | "project": "projects/modulea/ng-package.json" 137 | }, 138 | "configurations": { 139 | "production": { 140 | "project": "projects/modulea/ng-package.prod.json" 141 | } 142 | } 143 | }, 144 | "test": { 145 | "builder": "@angular-devkit/build-angular:karma", 146 | "options": { 147 | "main": "projects/modulea/src/test.ts", 148 | "tsConfig": "projects/modulea/tsconfig.spec.json", 149 | "karmaConfig": "projects/modulea/karma.conf.js" 150 | } 151 | }, 152 | "lint": { 153 | "builder": "@angular-devkit/build-angular:tslint", 154 | "options": { 155 | "tsConfig": [ 156 | "projects/modulea/tsconfig.lib.json", 157 | "projects/modulea/tsconfig.spec.json" 158 | ], 159 | "exclude": [ 160 | "**/node_modules/**" 161 | ] 162 | } 163 | } 164 | } 165 | }, 166 | "moduleb": { 167 | "root": "projects/moduleb", 168 | "sourceRoot": "projects/moduleb/src", 169 | "projectType": "library", 170 | "prefix": "lib", 171 | "architect": { 172 | "build": { 173 | "builder": "@angular-devkit/build-ng-packagr:build", 174 | "options": { 175 | "tsConfig": "projects/moduleb/tsconfig.lib.json", 176 | "project": "projects/moduleb/ng-package.json" 177 | }, 178 | "configurations": { 179 | "production": { 180 | "project": "projects/moduleb/ng-package.prod.json" 181 | } 182 | } 183 | }, 184 | "test": { 185 | "builder": "@angular-devkit/build-angular:karma", 186 | "options": { 187 | "main": "projects/moduleb/src/test.ts", 188 | "tsConfig": "projects/moduleb/tsconfig.spec.json", 189 | "karmaConfig": "projects/moduleb/karma.conf.js" 190 | } 191 | }, 192 | "lint": { 193 | "builder": "@angular-devkit/build-angular:tslint", 194 | "options": { 195 | "tsConfig": [ 196 | "projects/moduleb/tsconfig.lib.json", 197 | "projects/moduleb/tsconfig.spec.json" 198 | ], 199 | "exclude": [ 200 | "**/node_modules/**" 201 | ] 202 | } 203 | } 204 | } 205 | }, 206 | "modulec": { 207 | "root": "projects/modulec", 208 | "sourceRoot": "projects/modulec/src", 209 | "projectType": "library", 210 | "prefix": "lib", 211 | "architect": { 212 | "build": { 213 | "builder": "@angular-devkit/build-ng-packagr:build", 214 | "options": { 215 | "tsConfig": "projects/modulec/tsconfig.lib.json", 216 | "project": "projects/modulec/ng-package.json" 217 | }, 218 | "configurations": { 219 | "production": { 220 | "project": "projects/modulec/ng-package.prod.json" 221 | } 222 | } 223 | }, 224 | "test": { 225 | "builder": "@angular-devkit/build-angular:karma", 226 | "options": { 227 | "main": "projects/modulec/src/test.ts", 228 | "tsConfig": "projects/modulec/tsconfig.spec.json", 229 | "karmaConfig": "projects/modulec/karma.conf.js" 230 | } 231 | }, 232 | "lint": { 233 | "builder": "@angular-devkit/build-angular:tslint", 234 | "options": { 235 | "tsConfig": [ 236 | "projects/modulec/tsconfig.lib.json", 237 | "projects/modulec/tsconfig.spec.json" 238 | ], 239 | "exclude": [ 240 | "**/node_modules/**" 241 | ] 242 | } 243 | } 244 | } 245 | }, 246 | "moduled": { 247 | "root": "projects/moduled", 248 | "sourceRoot": "projects/moduled/src", 249 | "projectType": "library", 250 | "prefix": "lib", 251 | "architect": { 252 | "build": { 253 | "builder": "@angular-devkit/build-ng-packagr:build", 254 | "options": { 255 | "tsConfig": "projects/moduled/tsconfig.lib.json", 256 | "project": "projects/moduled/ng-package.json" 257 | }, 258 | "configurations": { 259 | "production": { 260 | "project": "projects/moduled/ng-package.prod.json" 261 | } 262 | } 263 | }, 264 | "test": { 265 | "builder": "@angular-devkit/build-angular:karma", 266 | "options": { 267 | "main": "projects/moduled/src/test.ts", 268 | "tsConfig": "projects/moduled/tsconfig.spec.json", 269 | "karmaConfig": "projects/moduled/karma.conf.js" 270 | } 271 | }, 272 | "lint": { 273 | "builder": "@angular-devkit/build-angular:tslint", 274 | "options": { 275 | "tsConfig": [ 276 | "projects/moduled/tsconfig.lib.json", 277 | "projects/moduled/tsconfig.spec.json" 278 | ], 279 | "exclude": [ 280 | "**/node_modules/**" 281 | ] 282 | } 283 | } 284 | } 285 | } 286 | }, 287 | "defaultProject": "angular-dynamic-demo" 288 | } -------------------------------------------------------------------------------- /e2e/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 | './src/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: require('path').join(__dirname, './tsconfig.e2e.json') 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to app!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-dynamic-demo", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/common": "^6.0.0", 15 | "@angular/core": "^6.0.0", 16 | "@angular/compiler": "^6.0.0", 17 | "@angular/animations": "^6.0.0", 18 | "@angular/forms": "^6.0.0", 19 | "@angular/http": "^6.0.0", 20 | "@angular/platform-browser": "^6.0.0", 21 | "@angular/platform-browser-dynamic": "^6.0.0", 22 | "@angular/router": "^6.0.0", 23 | "@clr/angular": "^0.11.16", 24 | "@clr/icons": "^0.11.16", 25 | "@clr/ui": "^0.11.16", 26 | "@webcomponents/custom-elements": "^1.0.0", 27 | "core-js": "^2.5.4", 28 | "rxjs": "^6.0.0", 29 | "rxjs-compat": "^6.1.0", 30 | "systemjs": "^0.21.3", 31 | "zone.js": "^0.8.26" 32 | }, 33 | "devDependencies": { 34 | "@angular/compiler-cli": "^6.0.0", 35 | "@angular-devkit/build-ng-packagr": "~0.6.0", 36 | "@angular-devkit/build-angular": "~0.6.0", 37 | "ng-packagr": "^3.0.0-rc.2", 38 | "tsickle": ">=0.25.5", 39 | "tslib": "^1.7.1", 40 | "typescript": "~2.7.2", 41 | "@angular/cli": "~6.0.0", 42 | "@angular/language-service": "^6.0.0", 43 | "@types/jasmine": "~2.8.6", 44 | "@types/jasminewd2": "~2.0.3", 45 | "@types/node": "~8.9.4", 46 | "codelyzer": "~4.2.1", 47 | "jasmine-core": "~2.99.1", 48 | "jasmine-spec-reporter": "~4.2.1", 49 | "karma": "~1.7.1", 50 | "karma-chrome-launcher": "~2.2.0", 51 | "karma-coverage-istanbul-reporter": "~1.4.2", 52 | "karma-jasmine": "~1.1.1", 53 | "karma-jasmine-html-reporter": "^0.2.2", 54 | "protractor": "~5.3.0", 55 | "ts-node": "~5.0.1", 56 | "tslint": "~5.9.1" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /projects/modulea/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 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-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; 32 | -------------------------------------------------------------------------------- /projects/modulea/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/modulea", 4 | "deleteDestPath": false, 5 | "lib": { 6 | "entryFile": "src/public_api.ts" 7 | } 8 | } -------------------------------------------------------------------------------- /projects/modulea/ng-package.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/lib", 4 | "lib": { 5 | "entryFile": "src/public_api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/modulea/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "modulea", 3 | "version": "0.0.1", 4 | "peerDependencies": { 5 | "@angular/common": "^6.0.0-rc.0 || ^6.0.0", 6 | "@angular/core": "^6.0.0-rc.0 || ^6.0.0" 7 | } 8 | } -------------------------------------------------------------------------------- /projects/modulea/src/lib/modulea.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ModuleaComponent } from './modulea.component'; 4 | 5 | describe('ModuleaComponent', () => { 6 | let component: ModuleaComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ModuleaComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ModuleaComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/modulea/src/lib/modulea.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'lib-modulea', 5 | template: ` 6 |
7 |
8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 | 21 |
22 |
23 | 24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 | 37 |
38 |
39 | 40 | 41 |
42 |
43 | 44 | 45 |
46 |
47 |
48 | 49 | `, 50 | styles: [] 51 | }) 52 | export class ModuleaComponent implements OnInit { 53 | 54 | constructor() { } 55 | 56 | ngOnInit() { 57 | } 58 | 59 | } 60 | -------------------------------------------------------------------------------- /projects/modulea/src/lib/modulea.module.ts: -------------------------------------------------------------------------------- 1 | import { RouterModule } from '@angular/router'; 2 | import { NgModule } from '@angular/core'; 3 | import { ModuleaComponent } from './modulea.component'; 4 | 5 | @NgModule({ 6 | imports: [ 7 | RouterModule.forChild([ 8 | { 9 | path: '', pathMatch: 'full', component: ModuleaComponent 10 | } 11 | ]) 12 | ], 13 | declarations: [ModuleaComponent], 14 | exports: [ModuleaComponent] 15 | }) 16 | export class ModuleaModule { } 17 | -------------------------------------------------------------------------------- /projects/modulea/src/lib/modulea.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { ModuleaService } from './modulea.service'; 4 | 5 | describe('ModuleaService', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [ModuleaService] 9 | }); 10 | }); 11 | 12 | it('should be created', inject([ModuleaService], (service: ModuleaService) => { 13 | expect(service).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /projects/modulea/src/lib/modulea.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class ModuleaService { 7 | 8 | constructor() { } 9 | } 10 | -------------------------------------------------------------------------------- /projects/modulea/src/public_api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of modulea 3 | */ 4 | 5 | export * from './lib/modulea.service'; 6 | export * from './lib/modulea.component'; 7 | export * from './lib/modulea.module'; 8 | -------------------------------------------------------------------------------- /projects/modulea/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'core-js/es7/reflect'; 4 | import 'zone.js/dist/zone'; 5 | import 'zone.js/dist/zone-testing'; 6 | import { getTestBed } from '@angular/core/testing'; 7 | import { 8 | BrowserDynamicTestingModule, 9 | platformBrowserDynamicTesting 10 | } from '@angular/platform-browser-dynamic/testing'; 11 | 12 | declare const require: any; 13 | 14 | // First, initialize the Angular testing environment. 15 | getTestBed().initTestEnvironment( 16 | BrowserDynamicTestingModule, 17 | platformBrowserDynamicTesting() 18 | ); 19 | // Then we find all the tests. 20 | const context = require.context('./', true, /\.spec\.ts$/); 21 | // And load the modules. 22 | context.keys().map(context); 23 | -------------------------------------------------------------------------------- /projects/modulea/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/lib", 5 | "target": "es2015", 6 | "module": "es2015", 7 | "moduleResolution": "node", 8 | "declaration": true, 9 | "sourceMap": true, 10 | "inlineSources": true, 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "importHelpers": true, 14 | "types": [], 15 | "lib": [ 16 | "dom", 17 | "es2015" 18 | ] 19 | }, 20 | "angularCompilerOptions": { 21 | "annotateForClosureCompiler": true, 22 | "skipTemplateCodegen": true, 23 | "strictMetadataEmit": true, 24 | "fullTemplateTypeCheck": true, 25 | "strictInjectionParameters": true, 26 | "flatModuleId": "AUTOGENERATED", 27 | "flatModuleOutFile": "AUTOGENERATED" 28 | }, 29 | "exclude": [ 30 | "src/test.ts", 31 | "**/*.spec.ts" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /projects/modulea/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /projects/modulea/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "lib", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "lib", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/moduleb/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 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-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; 32 | -------------------------------------------------------------------------------- /projects/moduleb/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/moduleb", 4 | "deleteDestPath": false, 5 | "lib": { 6 | "entryFile": "src/public_api.ts" 7 | } 8 | } -------------------------------------------------------------------------------- /projects/moduleb/ng-package.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/lib", 4 | "lib": { 5 | "entryFile": "src/public_api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/moduleb/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "moduleb", 3 | "version": "0.0.1", 4 | "peerDependencies": { 5 | "@angular/common": "^6.0.0-rc.0 || ^6.0.0", 6 | "@angular/core": "^6.0.0-rc.0 || ^6.0.0" 7 | } 8 | } -------------------------------------------------------------------------------- /projects/moduleb/src/lib/moduleb.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ModulebComponent } from './moduleb.component'; 4 | 5 | describe('ModulebComponent', () => { 6 | let component: ModulebComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ModulebComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ModulebComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/moduleb/src/lib/moduleb.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'lib-moduleb', 5 | template: ` 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 | Header 15 |
16 |
17 |
18 | Block 19 |
20 |
21 | ... 22 |
23 |
24 |
25 | 26 | 27 |
28 |
29 |
30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |
WizardAllegianceTriwizard Champion?Can Cast Fireball
HarryGryffindorYesNo
GandalfHobbitsMaybe?I don't think so...
Obi-Wan KenobiRepublic/RebellionNoNo
MerlinKing ArthurProbably invented the tournamentSolid maybe
72 | 73 | 74 | 75 | `, 76 | styles: [] 77 | }) 78 | export class ModulebComponent implements OnInit { 79 | 80 | constructor() { } 81 | 82 | ngOnInit() { 83 | } 84 | 85 | } 86 | -------------------------------------------------------------------------------- /projects/moduleb/src/lib/moduleb.module.ts: -------------------------------------------------------------------------------- 1 | import { RouterModule } from '@angular/router'; 2 | 3 | import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 4 | import { ModulebComponent } from './moduleb.component'; 5 | 6 | import { ClarityModule } from '@clr/angular'; 7 | 8 | @NgModule({ 9 | imports: [ 10 | ClarityModule, 11 | RouterModule.forChild([ 12 | { 13 | path: '', pathMatch: 'full', component: ModulebComponent 14 | } 15 | ]) 16 | ], 17 | declarations: [ModulebComponent], 18 | exports: [ModulebComponent], 19 | schemas: [ 20 | CUSTOM_ELEMENTS_SCHEMA 21 | ] 22 | }) 23 | export class ModulebModule { } 24 | -------------------------------------------------------------------------------- /projects/moduleb/src/lib/moduleb.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { ModulebService } from './moduleb.service'; 4 | 5 | describe('ModulebService', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [ModulebService] 9 | }); 10 | }); 11 | 12 | it('should be created', inject([ModulebService], (service: ModulebService) => { 13 | expect(service).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /projects/moduleb/src/lib/moduleb.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class ModulebService { 7 | 8 | constructor() { } 9 | } 10 | -------------------------------------------------------------------------------- /projects/moduleb/src/public_api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of moduleb 3 | */ 4 | 5 | export * from './lib/moduleb.service'; 6 | export * from './lib/moduleb.component'; 7 | export * from './lib/moduleb.module'; 8 | -------------------------------------------------------------------------------- /projects/moduleb/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'core-js/es7/reflect'; 4 | import 'zone.js/dist/zone'; 5 | import 'zone.js/dist/zone-testing'; 6 | import { getTestBed } from '@angular/core/testing'; 7 | import { 8 | BrowserDynamicTestingModule, 9 | platformBrowserDynamicTesting 10 | } from '@angular/platform-browser-dynamic/testing'; 11 | 12 | declare const require: any; 13 | 14 | // First, initialize the Angular testing environment. 15 | getTestBed().initTestEnvironment( 16 | BrowserDynamicTestingModule, 17 | platformBrowserDynamicTesting() 18 | ); 19 | // Then we find all the tests. 20 | const context = require.context('./', true, /\.spec\.ts$/); 21 | // And load the modules. 22 | context.keys().map(context); 23 | -------------------------------------------------------------------------------- /projects/moduleb/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/lib", 5 | "target": "es2015", 6 | "module": "es2015", 7 | "moduleResolution": "node", 8 | "declaration": true, 9 | "sourceMap": true, 10 | "inlineSources": true, 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "importHelpers": true, 14 | "types": [], 15 | "lib": [ 16 | "dom", 17 | "es2015" 18 | ] 19 | }, 20 | "angularCompilerOptions": { 21 | "annotateForClosureCompiler": true, 22 | "skipTemplateCodegen": true, 23 | "strictMetadataEmit": true, 24 | "fullTemplateTypeCheck": true, 25 | "strictInjectionParameters": true, 26 | "flatModuleId": "AUTOGENERATED", 27 | "flatModuleOutFile": "AUTOGENERATED" 28 | }, 29 | "exclude": [ 30 | "src/test.ts", 31 | "**/*.spec.ts" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /projects/moduleb/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /projects/moduleb/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "lib", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "lib", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/modulec/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 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-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; 32 | -------------------------------------------------------------------------------- /projects/modulec/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/modulec", 4 | "deleteDestPath": false, 5 | "lib": { 6 | "entryFile": "src/public_api.ts" 7 | } 8 | } -------------------------------------------------------------------------------- /projects/modulec/ng-package.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/lib", 4 | "lib": { 5 | "entryFile": "src/public_api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/modulec/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "modulec", 3 | "version": "0.0.1", 4 | "peerDependencies": { 5 | "@angular/common": "^6.0.0-rc.0 || ^6.0.0", 6 | "@angular/core": "^6.0.0-rc.0 || ^6.0.0" 7 | } 8 | } -------------------------------------------------------------------------------- /projects/modulec/src/lib/modulec.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ModulecComponent } from './modulec.component'; 4 | 5 | describe('ModulecComponent', () => { 6 | let component: ModulecComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ModulecComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ModulecComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/modulec/src/lib/modulec.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'lib-modulec', 5 | template: ` 6 | 7 | 8 | 9 |

I have a nice title

10 |
11 |

But not much to say...

12 |
13 |
14 | 15 | 16 |
17 | 18 | `, 19 | styles: [] 20 | }) 21 | export class ModulecComponent implements OnInit { 22 | basic: boolean = false; 23 | constructor() { } 24 | 25 | ngOnInit() { 26 | this.basic = true; 27 | } 28 | 29 | } 30 | -------------------------------------------------------------------------------- /projects/modulec/src/lib/modulec.module.ts: -------------------------------------------------------------------------------- 1 | import { RouterModule } from '@angular/router'; 2 | import { ClarityModule } from '@clr/angular'; 3 | import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 4 | import { ModulecComponent } from './modulec.component'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | ClarityModule, 9 | RouterModule.forChild([ 10 | { 11 | path: '', pathMatch: 'full', component: ModulecComponent 12 | } 13 | ]) 14 | ], 15 | declarations: [ModulecComponent], 16 | exports: [ModulecComponent], 17 | schemas: [ 18 | CUSTOM_ELEMENTS_SCHEMA 19 | ] 20 | }) 21 | export class ModulecModule { } 22 | -------------------------------------------------------------------------------- /projects/modulec/src/lib/modulec.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { ModulecService } from './modulec.service'; 4 | 5 | describe('ModulecService', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [ModulecService] 9 | }); 10 | }); 11 | 12 | it('should be created', inject([ModulecService], (service: ModulecService) => { 13 | expect(service).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /projects/modulec/src/lib/modulec.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class ModulecService { 7 | 8 | constructor() { } 9 | } 10 | -------------------------------------------------------------------------------- /projects/modulec/src/public_api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of modulec 3 | */ 4 | 5 | export * from './lib/modulec.service'; 6 | export * from './lib/modulec.component'; 7 | export * from './lib/modulec.module'; 8 | -------------------------------------------------------------------------------- /projects/modulec/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'core-js/es7/reflect'; 4 | import 'zone.js/dist/zone'; 5 | import 'zone.js/dist/zone-testing'; 6 | import { getTestBed } from '@angular/core/testing'; 7 | import { 8 | BrowserDynamicTestingModule, 9 | platformBrowserDynamicTesting 10 | } from '@angular/platform-browser-dynamic/testing'; 11 | 12 | declare const require: any; 13 | 14 | // First, initialize the Angular testing environment. 15 | getTestBed().initTestEnvironment( 16 | BrowserDynamicTestingModule, 17 | platformBrowserDynamicTesting() 18 | ); 19 | // Then we find all the tests. 20 | const context = require.context('./', true, /\.spec\.ts$/); 21 | // And load the modules. 22 | context.keys().map(context); 23 | -------------------------------------------------------------------------------- /projects/modulec/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/lib", 5 | "target": "es2015", 6 | "module": "es2015", 7 | "moduleResolution": "node", 8 | "declaration": true, 9 | "sourceMap": true, 10 | "inlineSources": true, 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "importHelpers": true, 14 | "types": [], 15 | "lib": [ 16 | "dom", 17 | "es2015" 18 | ] 19 | }, 20 | "angularCompilerOptions": { 21 | "annotateForClosureCompiler": true, 22 | "skipTemplateCodegen": true, 23 | "strictMetadataEmit": true, 24 | "fullTemplateTypeCheck": true, 25 | "strictInjectionParameters": true, 26 | "flatModuleId": "AUTOGENERATED", 27 | "flatModuleOutFile": "AUTOGENERATED" 28 | }, 29 | "exclude": [ 30 | "src/test.ts", 31 | "**/*.spec.ts" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /projects/modulec/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /projects/modulec/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "lib", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "lib", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/moduled/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 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-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; 32 | -------------------------------------------------------------------------------- /projects/moduled/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/moduled", 4 | "deleteDestPath": false, 5 | "lib": { 6 | "entryFile": "src/public_api.ts" 7 | } 8 | } -------------------------------------------------------------------------------- /projects/moduled/ng-package.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/lib", 4 | "lib": { 5 | "entryFile": "src/public_api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/moduled/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "moduled", 3 | "version": "0.0.1", 4 | "peerDependencies": { 5 | "@angular/common": "^6.0.0-rc.0 || ^6.0.0", 6 | "@angular/core": "^6.0.0-rc.0 || ^6.0.0" 7 | } 8 | } -------------------------------------------------------------------------------- /projects/moduled/src/lib/componenta/componenta.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmeijdam/angular-umd-dynamic-example/46c5bb5ac3eb57c635ede2fad22c7152de769256/projects/moduled/src/lib/componenta/componenta.component.css -------------------------------------------------------------------------------- /projects/moduled/src/lib/componenta/componenta.component.html: -------------------------------------------------------------------------------- 1 | Info 2 | Success 3 | Warning 4 | Error -------------------------------------------------------------------------------- /projects/moduled/src/lib/componenta/componenta.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ComponentaComponent } from './componenta.component'; 4 | 5 | describe('ComponentaComponent', () => { 6 | let component: ComponentaComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ComponentaComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ComponentaComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/moduled/src/lib/componenta/componenta.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'lib-componenta', 5 | templateUrl: './componenta.component.html', 6 | styleUrls: ['./componenta.component.css'] 7 | }) 8 | export class ComponentaComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/moduled/src/lib/componentb/componentb.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmeijdam/angular-umd-dynamic-example/46c5bb5ac3eb57c635ede2fad22c7152de769256/projects/moduled/src/lib/componentb/componentb.component.css -------------------------------------------------------------------------------- /projects/moduled/src/lib/componentb/componentb.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/moduled/src/lib/componentb/componentb.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ComponentbComponent } from './componentb.component'; 4 | 5 | describe('ComponentbComponent', () => { 6 | let component: ComponentbComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ComponentbComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ComponentbComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/moduled/src/lib/componentb/componentb.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'lib-componentb', 5 | templateUrl: './componentb.component.html', 6 | styleUrls: ['./componentb.component.css'] 7 | }) 8 | export class ComponentbComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/moduled/src/lib/componentc/componentc.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmeijdam/angular-umd-dynamic-example/46c5bb5ac3eb57c635ede2fad22c7152de769256/projects/moduled/src/lib/componentc/componentc.component.css -------------------------------------------------------------------------------- /projects/moduled/src/lib/componentc/componentc.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/moduled/src/lib/componentc/componentc.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ComponentcComponent } from './componentc.component'; 4 | 5 | describe('ComponentcComponent', () => { 6 | let component: ComponentcComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ComponentcComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ComponentcComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/moduled/src/lib/componentc/componentc.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'lib-componentc', 5 | templateUrl: './componentc.component.html', 6 | styleUrls: ['./componentc.component.css'] 7 | }) 8 | export class ComponentcComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/moduled/src/lib/lazy/lazy.module.spec.ts: -------------------------------------------------------------------------------- 1 | import { LazyModule } from './lazy.module'; 2 | 3 | describe('LazyModule', () => { 4 | let lazyModule: LazyModule; 5 | 6 | beforeEach(() => { 7 | lazyModule = new LazyModule(); 8 | }); 9 | 10 | it('should create an instance', () => { 11 | expect(lazyModule).toBeTruthy(); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /projects/moduled/src/lib/lazy/lazy.module.ts: -------------------------------------------------------------------------------- 1 | import { RouterModule } from '@angular/router'; 2 | import { NgModule } from '@angular/core'; 3 | import { CommonModule } from '@angular/common'; 4 | import { LazyComponent } from './lazy/lazy.component'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | CommonModule, 9 | RouterModule.forChild([ 10 | { 11 | path: '', pathMatch: 'full', component: LazyComponent 12 | } 13 | ]) 14 | ], 15 | declarations: [LazyComponent] 16 | }) 17 | export class LazyModule { } 18 | -------------------------------------------------------------------------------- /projects/moduled/src/lib/lazy/lazy/lazy.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmeijdam/angular-umd-dynamic-example/46c5bb5ac3eb57c635ede2fad22c7152de769256/projects/moduled/src/lib/lazy/lazy/lazy.component.css -------------------------------------------------------------------------------- /projects/moduled/src/lib/lazy/lazy/lazy.component.html: -------------------------------------------------------------------------------- 1 |

2 | lazy works! 3 |

4 | -------------------------------------------------------------------------------- /projects/moduled/src/lib/lazy/lazy/lazy.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { LazyComponent } from './lazy.component'; 4 | 5 | describe('LazyComponent', () => { 6 | let component: LazyComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ LazyComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(LazyComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/moduled/src/lib/lazy/lazy/lazy.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'lib-lazy', 5 | templateUrl: './lazy.component.html', 6 | styleUrls: ['./lazy.component.css'] 7 | }) 8 | export class LazyComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/moduled/src/lib/moduled.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ModuledComponent } from './moduled.component'; 4 | 5 | describe('ModuledComponent', () => { 6 | let component: ModuledComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ModuledComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ModuledComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/moduled/src/lib/moduled.component.ts: -------------------------------------------------------------------------------- 1 | import { Router } from '@angular/router'; 2 | import { Component, OnInit, Injector } from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'lib-moduled', 6 | template: ` 7 |
8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 | `, 16 | styles: [] 17 | }) 18 | export class ModuledComponent implements OnInit { 19 | 20 | constructor(private router: Router, private injector: Injector) { } 21 | 22 | ngOnInit() { 23 | console.log(this.injector); 24 | } 25 | 26 | navigate(path: string) { 27 | this.router.navigate([`moduled/${path}`]); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /projects/moduled/src/lib/moduled.module.ts: -------------------------------------------------------------------------------- 1 | import { RouterModule } from '@angular/router'; 2 | import { NgModule } from '@angular/core'; 3 | import { ModuledComponent } from './moduled.component'; 4 | import { ComponentaComponent } from './componenta/componenta.component'; 5 | import { ComponentbComponent } from './componentb/componentb.component'; 6 | import { ComponentcComponent } from './componentc/componentc.component'; 7 | 8 | @NgModule({ 9 | imports: [ 10 | 11 | RouterModule.forChild([ 12 | { 13 | path: '', component: ModuledComponent, children: [ 14 | { 15 | path: '', redirectTo: 'a' 16 | }, 17 | { 18 | path: 'a', component: ComponentaComponent 19 | }, 20 | { 21 | path: 'b', component: ComponentbComponent 22 | }, 23 | { 24 | path: 'c', component: ComponentcComponent 25 | } 26 | ] 27 | } 28 | ]) 29 | ], 30 | declarations: [ModuledComponent, ComponentaComponent, ComponentbComponent, ComponentcComponent], 31 | exports: [ModuledComponent] 32 | }) 33 | export class ModuledModule { } 34 | -------------------------------------------------------------------------------- /projects/moduled/src/lib/moduled.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { ModuledService } from './moduled.service'; 4 | 5 | describe('ModuledService', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [ModuledService] 9 | }); 10 | }); 11 | 12 | it('should be created', inject([ModuledService], (service: ModuledService) => { 13 | expect(service).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /projects/moduled/src/lib/moduled.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class ModuledService { 7 | 8 | constructor() { } 9 | } 10 | -------------------------------------------------------------------------------- /projects/moduled/src/public_api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of moduled 3 | */ 4 | 5 | export * from './lib/moduled.service'; 6 | export * from './lib/moduled.component'; 7 | export * from './lib/moduled.module'; 8 | -------------------------------------------------------------------------------- /projects/moduled/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'core-js/es7/reflect'; 4 | import 'zone.js/dist/zone'; 5 | import 'zone.js/dist/zone-testing'; 6 | import { getTestBed } from '@angular/core/testing'; 7 | import { 8 | BrowserDynamicTestingModule, 9 | platformBrowserDynamicTesting 10 | } from '@angular/platform-browser-dynamic/testing'; 11 | 12 | declare const require: any; 13 | 14 | // First, initialize the Angular testing environment. 15 | getTestBed().initTestEnvironment( 16 | BrowserDynamicTestingModule, 17 | platformBrowserDynamicTesting() 18 | ); 19 | // Then we find all the tests. 20 | const context = require.context('./', true, /\.spec\.ts$/); 21 | // And load the modules. 22 | context.keys().map(context); 23 | -------------------------------------------------------------------------------- /projects/moduled/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/lib", 5 | "target": "es2015", 6 | "module": "es2015", 7 | "moduleResolution": "node", 8 | "declaration": true, 9 | "sourceMap": true, 10 | "inlineSources": true, 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "importHelpers": true, 14 | "types": [], 15 | "lib": [ 16 | "dom", 17 | "es2015" 18 | ] 19 | }, 20 | "angularCompilerOptions": { 21 | "annotateForClosureCompiler": true, 22 | "skipTemplateCodegen": true, 23 | "strictMetadataEmit": true, 24 | "fullTemplateTypeCheck": true, 25 | "strictInjectionParameters": true, 26 | "flatModuleId": "AUTOGENERATED", 27 | "flatModuleOutFile": "AUTOGENERATED" 28 | }, 29 | "exclude": [ 30 | "src/test.ts", 31 | "**/*.spec.ts" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /projects/moduled/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /projects/moduled/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "lib", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "lib", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmeijdam/angular-umd-dynamic-example/46c5bb5ac3eb57c635ede2fad22c7152de769256/src/app/app.component.css -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 | Angular Dynamic UMD Module/Plugin Demo 7 | 8 |
9 |
10 | 17 |
18 |
19 | 20 |
21 |
22 |
-------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | describe('AppComponent', () => { 4 | beforeEach(async(() => { 5 | TestBed.configureTestingModule({ 6 | declarations: [ 7 | AppComponent 8 | ], 9 | }).compileComponents(); 10 | })); 11 | it('should create the app', async(() => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.debugElement.componentInstance; 14 | expect(app).toBeTruthy(); 15 | })); 16 | it(`should have as title 'app'`, async(() => { 17 | const fixture = TestBed.createComponent(AppComponent); 18 | const app = fixture.debugElement.componentInstance; 19 | expect(app.title).toEqual('app'); 20 | })); 21 | it('should render title in a h1 tag', async(() => { 22 | const fixture = TestBed.createComponent(AppComponent); 23 | fixture.detectChanges(); 24 | const compiled = fixture.debugElement.nativeElement; 25 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); 26 | })); 27 | }); 28 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Route } from '@angular/router'; 2 | import { Component } from '@angular/core'; 3 | import { Observable } from 'rxjs'; 4 | import { RouterService } from './services/router.service'; 5 | 6 | declare var SystemJS: any; 7 | 8 | @Component({ 9 | selector: 'app-root', 10 | templateUrl: './app.component.html', 11 | styleUrls: ['./app.component.css'] 12 | }) 13 | export class AppComponent { 14 | existingRoutes$: Observable; 15 | 16 | title = 'app'; 17 | constructor(private routerService: RouterService) { 18 | this.existingRoutes$ = this.routerService.existingRoutes; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { ModuleService } from './services/module.service'; 2 | import { RouterService } from './services/router.service'; 3 | import { BrowserModule } from '@angular/platform-browser'; 4 | import { NgModule, COMPILER_OPTIONS, CompilerFactory, Compiler } from '@angular/core'; 5 | import { RouterModule } from '@angular/router'; 6 | import { HttpModule } from '@angular/http'; 7 | 8 | import { AppComponent } from './app.component'; 9 | import { ClarityModule } from '@clr/angular'; 10 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 11 | import { DashboardComponent } from './dashboard/dashboard.component'; 12 | import { JitCompilerFactory } from '@angular/platform-browser-dynamic'; 13 | 14 | export function createCompiler(compilerFactory: CompilerFactory) { 15 | return compilerFactory.createCompiler(); 16 | } 17 | 18 | @NgModule({ 19 | declarations: [ 20 | AppComponent, 21 | DashboardComponent 22 | ], 23 | imports: [ 24 | BrowserModule, 25 | BrowserAnimationsModule, 26 | ClarityModule, 27 | RouterModule.forRoot([ 28 | { 29 | path: '', redirectTo: 'dashboard', pathMatch: 'full' 30 | }, 31 | { 32 | path: 'dashboard', component: DashboardComponent 33 | }, 34 | // Disabled because Compiler is not passed through correctly so PortalModule is not created successfull. 35 | // { 36 | // path: 'portal', loadChildren: './portal/portal.module#PortalModule' 37 | // } 38 | ], {useHash: true}), 39 | HttpModule 40 | ], 41 | providers: [RouterService, ModuleService, 42 | {provide: COMPILER_OPTIONS, useValue: {}, multi: true}, 43 | {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]}, 44 | {provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory]} 45 | ], 46 | bootstrap: [AppComponent] 47 | }) 48 | export class AppModule { } 49 | -------------------------------------------------------------------------------- /src/app/dashboard/dashboard.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmeijdam/angular-umd-dynamic-example/46c5bb5ac3eb57c635ede2fad22c7152de769256/src/app/dashboard/dashboard.component.css -------------------------------------------------------------------------------- /src/app/dashboard/dashboard.component.html: -------------------------------------------------------------------------------- 1 |

Portal works

2 | 3 |
4 |
5 |
6 |
7 | 8 |
9 | 10 | {{ errorMessage }} 11 | 12 |
13 |
14 | 17 |
18 |
19 |
20 |
21 |
22 | {{ module.moduleName }} 23 |
24 |
25 | {{ module.description }} 26 |
27 |
28 | 29 |
30 |
31 |
32 |
-------------------------------------------------------------------------------- /src/app/dashboard/dashboard.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DashboardComponent } from './dashboard.component'; 4 | 5 | describe('DashboardComponent', () => { 6 | let component: DashboardComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ DashboardComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(DashboardComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/dashboard/dashboard.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { RouterService } from '../services/router.service'; 3 | import { ModuleService } from '../services/module.service'; 4 | import { ModuleData } from '../models/module.model'; 5 | 6 | // RxJS 7 | import 'rxjs/add/operator/do'; 8 | import { Observable } from 'rxjs/Observable'; 9 | 10 | @Component({ 11 | selector: 'app-dashboard', 12 | templateUrl: './dashboard.component.html', 13 | styleUrls: ['./dashboard.component.css'] 14 | }) 15 | export class DashboardComponent implements OnInit { 16 | installedModules$: any; 17 | errorMessage: string; 18 | errorVisible = false; 19 | 20 | constructor(private routerService: RouterService, private moduleService: ModuleService) { 21 | } 22 | 23 | ngOnInit() { 24 | // please note: modules.json will alwasy return registered as false. 25 | this.installedModules$ = this.moduleService.loadModules().do(res => 26 | res.forEach(x => { 27 | if(x.registered) 28 | this.registerRoute(x); 29 | }) 30 | ); 31 | } 32 | 33 | enableModule(moduleToEnable: ModuleData) { 34 | // enable or disable module 35 | if(this.isRegistered(moduleToEnable)) { 36 | this.routerService.unRegisterRoute(moduleToEnable.path); 37 | } else { 38 | this.registerRoute(moduleToEnable); 39 | } 40 | } 41 | 42 | isRegistered(moduleData: ModuleData): boolean { 43 | return this.routerService.routeIsRegistered(moduleData.path); 44 | } 45 | 46 | private registerRoute(moduleToEnable: ModuleData){ 47 | // load up the umd file and register the route whenever succeeded. 48 | this.moduleService.loadModuleSystemJS(moduleToEnable).then((exports) => { 49 | this.routerService.createAndRegisterRoute(moduleToEnable, exports); 50 | }, (err) => this.showError(`${moduleToEnable.moduleName} could not be found, did you copy the umd file to ${moduleToEnable.location}?`, err)); 51 | } 52 | 53 | private showError(message: string, err) { 54 | this.errorMessage = message; 55 | this.errorVisible = true; 56 | console.log(err); // Log error in console 57 | } 58 | 59 | closeError() { 60 | this.errorVisible = false; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/app/models/module.model.ts: -------------------------------------------------------------------------------- 1 | export interface ModuleData { 2 | path: string; 3 | location: string; 4 | moduleName: string; 5 | rootComponent?: string; 6 | description: string; 7 | registered?: boolean; 8 | } -------------------------------------------------------------------------------- /src/app/portal/portal.component.html: -------------------------------------------------------------------------------- 1 |

Portal works

2 | 3 |
4 |
5 |
6 |
7 | 8 |
9 | 10 | {{ errorMessage }} 11 | 12 |
13 |
14 | 17 |
18 |
19 |
20 |
21 |
22 | {{ module.moduleName }} 23 |
24 |
25 | {{ module.description }} 26 |
27 |
28 | 29 |
30 |
31 |
32 |
-------------------------------------------------------------------------------- /src/app/portal/portal.component.ts: -------------------------------------------------------------------------------- 1 | import { Route } from '@angular/router'; 2 | import { ModuleService } from './../services/module.service'; 3 | import { ModuleData } from './../models/module.model'; 4 | import { Component, OnInit, Compiler } from '@angular/core'; 5 | import { RouterService } from '../services/router.service'; 6 | import { Http } from '@angular/http'; 7 | import 'rxjs/add/operator/map'; 8 | import { Observable } from 'rxjs/Observable'; 9 | import 'rxjs/add/operator/do'; 10 | 11 | 12 | @Component({ 13 | selector: 'portal', 14 | templateUrl: 'portal.component.html' 15 | }) 16 | 17 | export class PortalComponent implements OnInit { 18 | installedModules$: any; 19 | errorMessage: string; 20 | errorVisible = false; 21 | 22 | constructor(private routerService: RouterService, private moduleService: ModuleService) { 23 | } 24 | 25 | ngOnInit() { 26 | // please note: modules.json will alwasy return registered as false. 27 | this.installedModules$ = this.moduleService.loadModules().do(res => 28 | res.forEach(x => { 29 | if(x.registered) 30 | this.registerRoute(x); 31 | }) 32 | ); 33 | } 34 | 35 | enableModule(moduleToEnable: ModuleData) { 36 | // enable or disable module 37 | if(this.isRegistered(moduleToEnable)) { 38 | this.routerService.unRegisterRoute(moduleToEnable.path); 39 | } else { 40 | this.registerRoute(moduleToEnable); 41 | } 42 | } 43 | 44 | isRegistered(moduleData: ModuleData): boolean { 45 | return this.routerService.routeIsRegistered(moduleData.path); 46 | } 47 | 48 | private registerRoute(moduleToEnable: ModuleData){ 49 | // load up the umd file and register the route whenever succeeded. 50 | this.moduleService.loadModule(moduleToEnable).subscribe((exports) => { 51 | this.routerService.createAndRegisterRoute(moduleToEnable, exports); 52 | }, () => this.showError(`${moduleToEnable.moduleName} could not be found, did you copy the umd file to ${moduleToEnable.location}?`)); 53 | } 54 | 55 | private showError(message: string) { 56 | this.errorMessage = message; 57 | this.errorVisible = true; 58 | } 59 | 60 | closeError() { 61 | this.errorVisible = false; 62 | } 63 | } -------------------------------------------------------------------------------- /src/app/portal/portal.module.ts: -------------------------------------------------------------------------------- 1 | import { RouterModule, Router } from '@angular/router'; 2 | import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 3 | 4 | import { PortalComponent } from './portal.component'; 5 | import { CommonModule } from '@angular/common'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | RouterModule.forChild([ 10 | { 11 | path: '', component: PortalComponent 12 | } 13 | ]), 14 | CommonModule 15 | ], 16 | exports: [], 17 | declarations: [PortalComponent], 18 | providers: [], 19 | schemas: [CUSTOM_ELEMENTS_SCHEMA] 20 | }) 21 | export class PortalModule { } 22 | -------------------------------------------------------------------------------- /src/app/services/module.service.ts: -------------------------------------------------------------------------------- 1 | import { Observable } from 'rxjs/Observable'; 2 | import { ModuleData } from './../models/module.model'; 3 | import { Http } from '@angular/http'; 4 | import { Injectable, Compiler, Inject, ReflectiveInjector, Injector, COMPILER_OPTIONS } from '@angular/core'; 5 | 6 | import 'rxjs/add/operator/map'; 7 | 8 | // Needed for the new modules 9 | import * as AngularCore from '@angular/core'; 10 | import * as AngularCommon from '@angular/common'; 11 | import * as AngularRouter from '@angular/router'; 12 | import * as AngularClarity from '@clr/angular'; 13 | import * as BrowserAnimations from '@angular/platform-browser/animations'; 14 | 15 | declare var SystemJS: any; 16 | 17 | @Injectable() 18 | export class ModuleService { 19 | source = `http://${window.location.host}/`; 20 | 21 | constructor(private compiler: Compiler, private http: Http) { 22 | console.log(compiler); 23 | } 24 | 25 | loadModules(): Observable { 26 | return this.http.get("./assets/modules.json") 27 | .map(res => res.json()); 28 | } 29 | 30 | loadModule(moduleInfo: ModuleData): Observable { 31 | let url = this.source + moduleInfo.location; 32 | return this.http.get(url) 33 | .map(res => res.text()) 34 | .map(source => { 35 | const exports = {}; // this will hold module exports 36 | const modules = { // this is the list of modules accessible by plugins 37 | '@angular/core': AngularCore, 38 | '@angular/common': AngularCommon, 39 | '@angular/router': AngularRouter, 40 | '@angular/platform-browser/animations': BrowserAnimations, 41 | '@clr/angular': AngularClarity 42 | }; 43 | 44 | // shim 'require' and eval 45 | const require: any = (module) => modules[module]; 46 | eval(source); 47 | 48 | // Need to check if there is another solution for eval as this is described as 'Evil' 49 | 50 | this.compiler.compileModuleAndAllComponentsSync(exports[`${moduleInfo.moduleName}`]) 51 | //console.log(exports); // disabled as this object is cleared anyway 52 | return exports; 53 | }); 54 | } 55 | 56 | loadModuleSystemJS(moduleInfo: ModuleData): Promise { 57 | let url = this.source + moduleInfo.location; 58 | SystemJS.set('@angular/core', SystemJS.newModule(AngularCore)); 59 | SystemJS.set('@angular/common', SystemJS.newModule(AngularCommon)); 60 | SystemJS.set('@angular/router', SystemJS.newModule(AngularRouter)); 61 | SystemJS.set('@angular/platform-browser/animations', SystemJS.newModule(BrowserAnimations)); 62 | SystemJS.set('@clr/angular', SystemJS.newModule(AngularClarity)); 63 | 64 | // now, import the new module 65 | return SystemJS.import(`${url}`).then((module) => { 66 | console.log(module); 67 | return this.compiler.compileModuleAndAllComponentsAsync(module[`${moduleInfo.moduleName}`]).then(compiled => { 68 | console.log(compiled); 69 | return module; 70 | }); 71 | }); 72 | } 73 | } -------------------------------------------------------------------------------- /src/app/services/router.service.ts: -------------------------------------------------------------------------------- 1 | import { Http } from '@angular/http'; 2 | import { ModuleData } from './../models/module.model'; 3 | import { Router, Route } from '@angular/router'; 4 | import { Injectable, Compiler } from '@angular/core'; 5 | import { BehaviorSubject } from 'rxjs'; 6 | 7 | @Injectable() 8 | export class RouterService { 9 | existingRoutes: BehaviorSubject; 10 | 11 | constructor(private router: Router, private compiler: Compiler, private http: Http) { 12 | this.existingRoutes = new BehaviorSubject(this.routes); 13 | } 14 | 15 | private get routes(): Route[]{ 16 | var routesToReturn = this.router.config; 17 | return routesToReturn.filter(x => x.path !== ""); 18 | } 19 | 20 | createAndRegisterRoute(moduleToRegister: ModuleData, exports: any) { 21 | let route: Route = { 22 | path: moduleToRegister.path, 23 | loadChildren: () => exports[`${moduleToRegister.moduleName}`] 24 | }; 25 | 26 | this.registerRoute(route); 27 | } 28 | 29 | routeIsRegistered(path: string) { 30 | return this.router.config.filter(r => r.path === path).length > 0; 31 | } 32 | 33 | registerRoute(route: Route){ 34 | if(this.routeIsRegistered(route.path)) return; 35 | 36 | this.router.config.push(route); 37 | this.updateRouteConfig(this.router.config); 38 | } 39 | 40 | unRegisterRoute(path: string){ 41 | console.log("Unregister", path); 42 | this.updateRouteConfig(this.router.config.filter(route => route.path !== path)); 43 | } 44 | 45 | private updateRouteConfig(config) { 46 | this.router.resetConfig(config); 47 | this.existingRoutes.next(this.routes); 48 | } 49 | 50 | 51 | } -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmeijdam/angular-umd-dynamic-example/46c5bb5ac3eb57c635ede2fad22c7152de769256/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/modulea.umd.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/router')) : 3 | typeof define === 'function' && define.amd ? define('modulea', ['exports', '@angular/core', '@angular/router'], factory) : 4 | (factory((global.modulea = {}),global.ng.core,global.ng.router)); 5 | }(this, (function (exports,core,router) { 'use strict'; 6 | 7 | /** 8 | * @fileoverview added by tsickle 9 | * @suppress {checkTypes} checked by tsc 10 | */ 11 | var ModuleaService = (function () { 12 | function ModuleaService() { 13 | } 14 | return ModuleaService; 15 | }()); 16 | ModuleaService.decorators = [ 17 | { type: core.Injectable, args: [{ 18 | providedIn: 'root' 19 | },] }, 20 | ]; 21 | /** @nocollapse */ 22 | ModuleaService.ctorParameters = function () { return []; }; 23 | /** @nocollapse */ ModuleaService.ngInjectableDef = core.defineInjectable({ factory: function ModuleaService_Factory() { return new ModuleaService(); }, token: ModuleaService, providedIn: "root" }); 24 | /** 25 | * @fileoverview added by tsickle 26 | * @suppress {checkTypes} checked by tsc 27 | */ 28 | var ModuleaComponent = (function () { 29 | function ModuleaComponent() { 30 | } 31 | /** 32 | * @return {?} 33 | */ 34 | ModuleaComponent.prototype.ngOnInit = function () { 35 | }; 36 | return ModuleaComponent; 37 | }()); 38 | ModuleaComponent.decorators = [ 39 | { type: core.Component, args: [{ 40 | selector: 'lib-modulea', 41 | template: "\n
\n
\n \n
\n \n \n \n \n \n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n ", 42 | styles: [] 43 | },] }, 44 | ]; 45 | /** @nocollapse */ 46 | ModuleaComponent.ctorParameters = function () { return []; }; 47 | /** 48 | * @fileoverview added by tsickle 49 | * @suppress {checkTypes} checked by tsc 50 | */ 51 | var ModuleaModule = (function () { 52 | function ModuleaModule() { 53 | } 54 | return ModuleaModule; 55 | }()); 56 | ModuleaModule.decorators = [ 57 | { type: core.NgModule, args: [{ 58 | imports: [ 59 | router.RouterModule.forChild([ 60 | { 61 | path: '', pathMatch: 'full', component: ModuleaComponent 62 | } 63 | ]) 64 | ], 65 | declarations: [ModuleaComponent], 66 | exports: [ModuleaComponent] 67 | },] }, 68 | ]; 69 | 70 | exports.ModuleaService = ModuleaService; 71 | exports.ModuleaComponent = ModuleaComponent; 72 | exports.ModuleaModule = ModuleaModule; 73 | 74 | Object.defineProperty(exports, '__esModule', { value: true }); 75 | 76 | }))); 77 | //# sourceMappingURL=modulea.umd.js.map 78 | -------------------------------------------------------------------------------- /src/assets/moduleb.umd.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/router'), require('@clr/angular')) : 3 | typeof define === 'function' && define.amd ? define('moduleb', ['exports', '@angular/core', '@angular/router', '@clr/angular'], factory) : 4 | (factory((global.moduleb = {}),global.ng.core,global.ng.router,null)); 5 | }(this, (function (exports,core,router,angular) { 'use strict'; 6 | 7 | /** 8 | * @fileoverview added by tsickle 9 | * @suppress {checkTypes} checked by tsc 10 | */ 11 | var ModulebService = (function () { 12 | function ModulebService() { 13 | } 14 | return ModulebService; 15 | }()); 16 | ModulebService.decorators = [ 17 | { type: core.Injectable, args: [{ 18 | providedIn: 'root' 19 | },] }, 20 | ]; 21 | /** @nocollapse */ 22 | ModulebService.ctorParameters = function () { return []; }; 23 | /** @nocollapse */ ModulebService.ngInjectableDef = core.defineInjectable({ factory: function ModulebService_Factory() { return new ModulebService(); }, token: ModulebService, providedIn: "root" }); 24 | /** 25 | * @fileoverview added by tsickle 26 | * @suppress {checkTypes} checked by tsc 27 | */ 28 | var ModulebComponent = (function () { 29 | function ModulebComponent() { 30 | } 31 | /** 32 | * @return {?} 33 | */ 34 | ModulebComponent.prototype.ngOnInit = function () { 35 | }; 36 | return ModulebComponent; 37 | }()); 38 | ModulebComponent.decorators = [ 39 | { type: core.Component, args: [{ 40 | selector: 'lib-moduleb', 41 | template: "\n \n \n \n \n
\n
\n
\n
\n Header\n
\n
\n
\n Block\n
\n
\n ...\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
WizardAllegianceTriwizard Champion?Can Cast Fireball
HarryGryffindorYesNo
GandalfHobbitsMaybe?I don't think so...
Obi-Wan KenobiRepublic/RebellionNoNo
MerlinKing ArthurProbably invented the tournamentSolid maybe
\n \n \n\n ", 42 | styles: [] 43 | },] }, 44 | ]; 45 | /** @nocollapse */ 46 | ModulebComponent.ctorParameters = function () { return []; }; 47 | /** 48 | * @fileoverview added by tsickle 49 | * @suppress {checkTypes} checked by tsc 50 | */ 51 | var ModulebModule = (function () { 52 | function ModulebModule() { 53 | } 54 | return ModulebModule; 55 | }()); 56 | ModulebModule.decorators = [ 57 | { type: core.NgModule, args: [{ 58 | imports: [ 59 | angular.ClarityModule, 60 | router.RouterModule.forChild([ 61 | { 62 | path: '', pathMatch: 'full', component: ModulebComponent 63 | } 64 | ]) 65 | ], 66 | declarations: [ModulebComponent], 67 | exports: [ModulebComponent], 68 | schemas: [ 69 | core.CUSTOM_ELEMENTS_SCHEMA 70 | ] 71 | },] }, 72 | ]; 73 | 74 | exports.ModulebService = ModulebService; 75 | exports.ModulebComponent = ModulebComponent; 76 | exports.ModulebModule = ModulebModule; 77 | 78 | Object.defineProperty(exports, '__esModule', { value: true }); 79 | 80 | }))); 81 | //# sourceMappingURL=moduleb.umd.js.map 82 | -------------------------------------------------------------------------------- /src/assets/modulec.umd.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/router'), require('@clr/angular')) : 3 | typeof define === 'function' && define.amd ? define('modulec', ['exports', '@angular/core', '@angular/router', '@clr/angular'], factory) : 4 | (factory((global.modulec = {}),global.ng.core,global.ng.router,null)); 5 | }(this, (function (exports,core,router,angular) { 'use strict'; 6 | 7 | /** 8 | * @fileoverview added by tsickle 9 | * @suppress {checkTypes} checked by tsc 10 | */ 11 | var ModulecService = (function () { 12 | function ModulecService() { 13 | } 14 | return ModulecService; 15 | }()); 16 | ModulecService.decorators = [ 17 | { type: core.Injectable, args: [{ 18 | providedIn: 'root' 19 | },] }, 20 | ]; 21 | /** @nocollapse */ 22 | ModulecService.ctorParameters = function () { return []; }; 23 | /** @nocollapse */ ModulecService.ngInjectableDef = core.defineInjectable({ factory: function ModulecService_Factory() { return new ModulecService(); }, token: ModulecService, providedIn: "root" }); 24 | /** 25 | * @fileoverview added by tsickle 26 | * @suppress {checkTypes} checked by tsc 27 | */ 28 | var ModulecComponent = (function () { 29 | function ModulecComponent() { 30 | this.basic = false; 31 | } 32 | /** 33 | * @return {?} 34 | */ 35 | ModulecComponent.prototype.ngOnInit = function () { 36 | this.basic = true; 37 | }; 38 | return ModulecComponent; 39 | }()); 40 | ModulecComponent.decorators = [ 41 | { type: core.Component, args: [{ 42 | selector: 'lib-modulec', 43 | template: "\n \n\n \n

I have a nice title

\n
\n

But not much to say...

\n
\n
\n \n \n
\n \n ", 44 | styles: [] 45 | },] }, 46 | ]; 47 | /** @nocollapse */ 48 | ModulecComponent.ctorParameters = function () { return []; }; 49 | /** 50 | * @fileoverview added by tsickle 51 | * @suppress {checkTypes} checked by tsc 52 | */ 53 | var ModulecModule = (function () { 54 | function ModulecModule() { 55 | } 56 | return ModulecModule; 57 | }()); 58 | ModulecModule.decorators = [ 59 | { type: core.NgModule, args: [{ 60 | imports: [ 61 | angular.ClarityModule, 62 | router.RouterModule.forChild([ 63 | { 64 | path: '', pathMatch: 'full', component: ModulecComponent 65 | } 66 | ]) 67 | ], 68 | declarations: [ModulecComponent], 69 | exports: [ModulecComponent], 70 | schemas: [ 71 | core.CUSTOM_ELEMENTS_SCHEMA 72 | ] 73 | },] }, 74 | ]; 75 | 76 | exports.ModulecService = ModulecService; 77 | exports.ModulecComponent = ModulecComponent; 78 | exports.ModulecModule = ModulecModule; 79 | 80 | Object.defineProperty(exports, '__esModule', { value: true }); 81 | 82 | }))); 83 | //# sourceMappingURL=modulec.umd.js.map 84 | -------------------------------------------------------------------------------- /src/assets/moduled.umd.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/router')) : 3 | typeof define === 'function' && define.amd ? define('moduled', ['exports', '@angular/core', '@angular/router'], factory) : 4 | (factory((global.moduled = {}),global.ng.core,global.ng.router)); 5 | }(this, (function (exports,core,router) { 'use strict'; 6 | 7 | /** 8 | * @fileoverview added by tsickle 9 | * @suppress {checkTypes} checked by tsc 10 | */ 11 | var ModuledService = (function () { 12 | function ModuledService() { 13 | } 14 | return ModuledService; 15 | }()); 16 | ModuledService.decorators = [ 17 | { type: core.Injectable, args: [{ 18 | providedIn: 'root' 19 | },] }, 20 | ]; 21 | /** @nocollapse */ 22 | ModuledService.ctorParameters = function () { return []; }; 23 | /** @nocollapse */ ModuledService.ngInjectableDef = core.defineInjectable({ factory: function ModuledService_Factory() { return new ModuledService(); }, token: ModuledService, providedIn: "root" }); 24 | /** 25 | * @fileoverview added by tsickle 26 | * @suppress {checkTypes} checked by tsc 27 | */ 28 | var ModuledComponent = (function () { 29 | /** 30 | * @param {?} router 31 | * @param {?} injector 32 | */ 33 | function ModuledComponent(router$$1, injector) { 34 | this.router = router$$1; 35 | this.injector = injector; 36 | } 37 | /** 38 | * @return {?} 39 | */ 40 | ModuledComponent.prototype.ngOnInit = function () { 41 | console.log(this.injector); 42 | }; 43 | /** 44 | * @param {?} path 45 | * @return {?} 46 | */ 47 | ModuledComponent.prototype.navigate = function (path) { 48 | this.router.navigate(["moduled/" + path]); 49 | }; 50 | return ModuledComponent; 51 | }()); 52 | ModuledComponent.decorators = [ 53 | { type: core.Component, args: [{ 54 | selector: 'lib-moduled', 55 | template: "\n
\n \n \n \n
\n
\n \n
\n ", 56 | styles: [] 57 | },] }, 58 | ]; 59 | /** @nocollapse */ 60 | ModuledComponent.ctorParameters = function () { 61 | return [ 62 | { type: router.Router, }, 63 | { type: core.Injector, }, 64 | ]; 65 | }; 66 | /** 67 | * @fileoverview added by tsickle 68 | * @suppress {checkTypes} checked by tsc 69 | */ 70 | var ComponentaComponent = (function () { 71 | function ComponentaComponent() { 72 | } 73 | /** 74 | * @return {?} 75 | */ 76 | ComponentaComponent.prototype.ngOnInit = function () { 77 | }; 78 | return ComponentaComponent; 79 | }()); 80 | ComponentaComponent.decorators = [ 81 | { type: core.Component, args: [{ 82 | selector: 'lib-componenta', 83 | template: "Info\nSuccess\nWarning\nError", 84 | styles: [""] 85 | },] }, 86 | ]; 87 | /** @nocollapse */ 88 | ComponentaComponent.ctorParameters = function () { return []; }; 89 | /** 90 | * @fileoverview added by tsickle 91 | * @suppress {checkTypes} checked by tsc 92 | */ 93 | var ComponentbComponent = (function () { 94 | function ComponentbComponent() { 95 | } 96 | /** 97 | * @return {?} 98 | */ 99 | ComponentbComponent.prototype.ngOnInit = function () { 100 | }; 101 | return ComponentbComponent; 102 | }()); 103 | ComponentbComponent.decorators = [ 104 | { type: core.Component, args: [{ 105 | selector: 'lib-componentb', 106 | template: "\n Loading...\n", 107 | styles: [""] 108 | },] }, 109 | ]; 110 | /** @nocollapse */ 111 | ComponentbComponent.ctorParameters = function () { return []; }; 112 | /** 113 | * @fileoverview added by tsickle 114 | * @suppress {checkTypes} checked by tsc 115 | */ 116 | var ComponentcComponent = (function () { 117 | function ComponentcComponent() { 118 | } 119 | /** 120 | * @return {?} 121 | */ 122 | ComponentcComponent.prototype.ngOnInit = function () { 123 | }; 124 | return ComponentcComponent; 125 | }()); 126 | ComponentcComponent.decorators = [ 127 | { type: core.Component, args: [{ 128 | selector: 'lib-componentc', 129 | template: "", 130 | styles: [""] 131 | },] }, 132 | ]; 133 | /** @nocollapse */ 134 | ComponentcComponent.ctorParameters = function () { return []; }; 135 | /** 136 | * @fileoverview added by tsickle 137 | * @suppress {checkTypes} checked by tsc 138 | */ 139 | var ModuledModule = (function () { 140 | function ModuledModule() { 141 | } 142 | return ModuledModule; 143 | }()); 144 | ModuledModule.decorators = [ 145 | { type: core.NgModule, args: [{ 146 | imports: [ 147 | router.RouterModule.forChild([ 148 | { 149 | path: '', component: ModuledComponent, children: [ 150 | { 151 | path: '', redirectTo: 'a' 152 | }, 153 | { 154 | path: 'a', component: ComponentaComponent 155 | }, 156 | { 157 | path: 'b', component: ComponentbComponent 158 | }, 159 | { 160 | path: 'c', component: ComponentcComponent 161 | } 162 | ] 163 | } 164 | ]) 165 | ], 166 | declarations: [ModuledComponent, ComponentaComponent, ComponentbComponent, ComponentcComponent], 167 | exports: [ModuledComponent] 168 | },] }, 169 | ]; 170 | 171 | exports.ModuledService = ModuledService; 172 | exports.ModuledComponent = ModuledComponent; 173 | exports.ModuledModule = ModuledModule; 174 | exports.ɵa = ComponentaComponent; 175 | exports.ɵb = ComponentbComponent; 176 | exports.ɵc = ComponentcComponent; 177 | 178 | Object.defineProperty(exports, '__esModule', { value: true }); 179 | 180 | }))); 181 | //# sourceMappingURL=moduled.umd.js.map 182 | -------------------------------------------------------------------------------- /src/assets/modules.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "path": "moduleA", 4 | "location": "./assets/modulea.umd.js", 5 | "moduleName": "ModuleaModule", 6 | "description": "clarity form", 7 | "registered": true 8 | }, 9 | { 10 | "path": "moduleB", 11 | "location": "./assets/moduleb.umd.js", 12 | "moduleName": "ModulebModule", 13 | "description": "clarity tab control with table and card - custom elements" 14 | }, 15 | { 16 | "path": "moduleC", 17 | "location": "./assets/modulec.umd.js", 18 | "moduleName": "ModulecModule", 19 | "description": "clarity modal - custom elements", 20 | "registered": true 21 | }, 22 | { 23 | "path": "moduled", 24 | "location": "./assets/moduled.umd.js", 25 | "moduleName": "ModuledModule", 26 | "description": "default subnavigation with 3 components and some clarity stuff" 27 | } 28 | ] -------------------------------------------------------------------------------- /src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed 5 | > 0.5% 6 | last 2 versions 7 | Firefox ESR 8 | not dead 9 | # IE 9-11 -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * In development mode, to ignore zone related error stack frames such as 11 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can 12 | * import the following file, but please comment it out in production mode 13 | * because it will have performance impact when throw error 14 | */ 15 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 16 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmeijdam/angular-umd-dynamic-example/46c5bb5ac3eb57c635ede2fad22c7152de769256/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularDynamicDemo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 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-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Web Animations `@angular/platform-browser/animations` 51 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 52 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 53 | **/ 54 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 55 | 56 | /** 57 | * By default, zone.js will patch all possible macroTask and DomEvents 58 | * user can disable parts of macroTask/DomEvents patch by setting following flags 59 | */ 60 | 61 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 62 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 63 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 64 | 65 | /* 66 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 67 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 68 | */ 69 | // (window as any).__Zone_enable_cross_context_check = true; 70 | 71 | /*************************************************************************************************** 72 | * Zone JS is required by default for Angular itself. 73 | */ 74 | import 'zone.js/dist/zone'; // Included with Angular CLI. 75 | 76 | 77 | 78 | /*************************************************************************************************** 79 | * APPLICATION IMPORTS 80 | */ 81 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /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/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "es2015", 6 | "types": [] 7 | }, 8 | "exclude": [ 9 | "src/test.ts", 10 | "**/*.spec.ts" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "module": "commonjs", 6 | "types": [ 7 | "jasmine", 8 | "node" 9 | ] 10 | }, 11 | "files": [ 12 | "test.ts", 13 | "polyfills.ts" 14 | ], 15 | "include": [ 16 | "**/*.spec.ts", 17 | "**/*.d.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 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 | "es2017", 17 | "dom" 18 | ], 19 | "paths": { 20 | "modulea": [ 21 | "dist/modulea" 22 | ], 23 | "moduleb": [ 24 | "dist/moduleb" 25 | ], 26 | "modulec": [ 27 | "dist/modulec" 28 | ], 29 | "moduled": [ 30 | "dist/moduled" 31 | ] 32 | } 33 | } 34 | } -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "comment-format": [ 10 | true, 11 | "check-space" 12 | ], 13 | "curly": true, 14 | "deprecation": { 15 | "severity": "warn" 16 | }, 17 | "eofline": true, 18 | "forin": true, 19 | "import-blacklist": [ 20 | true, 21 | "rxjs/Rx" 22 | ], 23 | "import-spacing": true, 24 | "indent": [ 25 | true, 26 | "spaces" 27 | ], 28 | "interface-over-type-literal": true, 29 | "label-position": true, 30 | "max-line-length": [ 31 | true, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-arg": true, 47 | "no-bitwise": true, 48 | "no-console": [ 49 | true, 50 | "debug", 51 | "info", 52 | "time", 53 | "timeEnd", 54 | "trace" 55 | ], 56 | "no-construct": true, 57 | "no-debugger": true, 58 | "no-duplicate-super": true, 59 | "no-empty": false, 60 | "no-empty-interface": true, 61 | "no-eval": true, 62 | "no-inferrable-types": [ 63 | true, 64 | "ignore-params" 65 | ], 66 | "no-misused-new": true, 67 | "no-non-null-assertion": true, 68 | "no-shadowed-variable": true, 69 | "no-string-literal": false, 70 | "no-string-throw": true, 71 | "no-switch-case-fall-through": true, 72 | "no-trailing-whitespace": true, 73 | "no-unnecessary-initializer": true, 74 | "no-unused-expression": true, 75 | "no-use-before-declare": true, 76 | "no-var-keyword": true, 77 | "object-literal-sort-keys": false, 78 | "one-line": [ 79 | true, 80 | "check-open-brace", 81 | "check-catch", 82 | "check-else", 83 | "check-whitespace" 84 | ], 85 | "prefer-const": true, 86 | "quotemark": [ 87 | true, 88 | "single" 89 | ], 90 | "radix": true, 91 | "semicolon": [ 92 | true, 93 | "always" 94 | ], 95 | "triple-equals": [ 96 | true, 97 | "allow-null-check" 98 | ], 99 | "typedef-whitespace": [ 100 | true, 101 | { 102 | "call-signature": "nospace", 103 | "index-signature": "nospace", 104 | "parameter": "nospace", 105 | "property-declaration": "nospace", 106 | "variable-declaration": "nospace" 107 | } 108 | ], 109 | "unified-signatures": true, 110 | "variable-name": false, 111 | "whitespace": [ 112 | true, 113 | "check-branch", 114 | "check-decl", 115 | "check-operator", 116 | "check-separator", 117 | "check-type" 118 | ], 119 | "no-output-on-prefix": true, 120 | "use-input-property-decorator": true, 121 | "use-output-property-decorator": true, 122 | "use-host-property-decorator": true, 123 | "no-input-rename": true, 124 | "no-output-rename": true, 125 | "use-life-cycle-interface": true, 126 | "use-pipe-transform-interface": true, 127 | "component-class-suffix": true, 128 | "directive-class-suffix": true 129 | } 130 | } 131 | --------------------------------------------------------------------------------