├── .gitignore ├── README.md ├── angular-element-a ├── .editorconfig ├── README.md ├── angular.json ├── dist │ └── angular-element-a │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.js │ │ └── scripts.js ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.e2e.json ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── assets │ │ └── .gitkeep │ ├── 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 └── webpack.extra.js ├── angular-element-b ├── .editorconfig ├── README.md ├── angular.json ├── dist │ └── angular-element-b │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.js │ │ └── scripts.js ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.e2e.json ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── assets │ │ └── .gitkeep │ ├── 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 └── webpack.extra.js └── test-angular-elements ├── angular-element-a └── main.js ├── angular-element-b └── main.js ├── extern ├── common.umd.js ├── compiler.umd.js ├── core.umd.js ├── custom-elements.min.js ├── elements.umd.js ├── native-shim.js ├── platform-browser-dynamic.umd.js ├── platform-browser.umd.js ├── rxjs.umd.js └── zone.js ├── index.html ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | 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 | # Mutiple angular elements on same page 2 | Working example of multiple angular elements on same page. Using ngx-build-plus, to avoid "Zone already loaded error" 3 | 4 | # Build 5 | Build "angular-element-a" and "angular-element-b" using "npm run build".
6 | It generates main.js in /dist folder respectively. 7 | 8 | # Run 9 | Consume "main.js" of each element in "test-angular-elements".
10 | Provide angular umd modules, zone and other dependencies globally. (For eg: /extern in test-angular-elements)
11 | "npm start" in "test-angular-elements", you should see both elements loaded on same page. 12 | -------------------------------------------------------------------------------- /angular-element-a/.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 | -------------------------------------------------------------------------------- /angular-element-a/README.md: -------------------------------------------------------------------------------- 1 | # AngularElementA 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.2.2. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 28 | -------------------------------------------------------------------------------- /angular-element-a/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "angular-element-a": { 7 | "root": "", 8 | "sourceRoot": "src", 9 | "projectType": "application", 10 | "prefix": "custom", 11 | "schematics": {}, 12 | "architect": { 13 | "build": { 14 | "builder": "ngx-build-plus:build", 15 | "options": { 16 | "outputPath": "dist/angular-element-a", 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 | "src/styles.css" 27 | ], 28 | "scripts": [ 29 | { 30 | "input": "node_modules/document-register-element/build/document-register-element.js" 31 | } 32 | ] 33 | }, 34 | "configurations": { 35 | "production": { 36 | "fileReplacements": [ 37 | { 38 | "replace": "src/environments/environment.ts", 39 | "with": "src/environments/environment.prod.ts" 40 | } 41 | ], 42 | "optimization": true, 43 | "outputHashing": "all", 44 | "sourceMap": false, 45 | "extractCss": true, 46 | "namedChunks": false, 47 | "aot": true, 48 | "extractLicenses": true, 49 | "vendorChunk": false, 50 | "buildOptimizer": true 51 | } 52 | } 53 | }, 54 | "serve": { 55 | "builder": "@angular-devkit/build-angular:dev-server", 56 | "options": { 57 | "browserTarget": "angular-element-a:build" 58 | }, 59 | "configurations": { 60 | "production": { 61 | "browserTarget": "angular-element-a:build:production" 62 | } 63 | } 64 | }, 65 | "extract-i18n": { 66 | "builder": "@angular-devkit/build-angular:extract-i18n", 67 | "options": { 68 | "browserTarget": "angular-element-a:build" 69 | } 70 | }, 71 | "test": { 72 | "builder": "@angular-devkit/build-angular:karma", 73 | "options": { 74 | "main": "src/test.ts", 75 | "polyfills": "src/polyfills.ts", 76 | "tsConfig": "src/tsconfig.spec.json", 77 | "karmaConfig": "src/karma.conf.js", 78 | "styles": [ 79 | "src/styles.css" 80 | ], 81 | "scripts": [], 82 | "assets": [ 83 | "src/favicon.ico", 84 | "src/assets" 85 | ] 86 | } 87 | }, 88 | "lint": { 89 | "builder": "@angular-devkit/build-angular:tslint", 90 | "options": { 91 | "tsConfig": [ 92 | "src/tsconfig.app.json", 93 | "src/tsconfig.spec.json" 94 | ], 95 | "exclude": [ 96 | "**/node_modules/**" 97 | ] 98 | } 99 | } 100 | } 101 | }, 102 | "angular-element-a-e2e": { 103 | "root": "e2e/", 104 | "projectType": "application", 105 | "architect": { 106 | "e2e": { 107 | "builder": "@angular-devkit/build-angular:protractor", 108 | "options": { 109 | "protractorConfig": "e2e/protractor.conf.js", 110 | "devServerTarget": "angular-element-a:serve" 111 | }, 112 | "configurations": { 113 | "production": { 114 | "devServerTarget": "angular-element-a:serve:production" 115 | } 116 | } 117 | }, 118 | "lint": { 119 | "builder": "@angular-devkit/build-angular:tslint", 120 | "options": { 121 | "tsConfig": "e2e/tsconfig.e2e.json", 122 | "exclude": [ 123 | "**/node_modules/**" 124 | ] 125 | } 126 | } 127 | } 128 | } 129 | }, 130 | "defaultProject": "angular-element-a" 131 | } -------------------------------------------------------------------------------- /angular-element-a/dist/angular-element-a/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/contactjaisai/multiple-angular-elements-sample/301c6e8f08105adf15483fc0ab2e007c875a4315/angular-element-a/dist/angular-element-a/favicon.ico -------------------------------------------------------------------------------- /angular-element-a/dist/angular-element-a/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularElementA 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /angular-element-a/dist/angular-element-a/main.js: -------------------------------------------------------------------------------- 1 | !function(e){var o={};function n(t){if(o[t])return o[t].exports;var r=o[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=o,n.d=function(e,o,t){n.o(e,o)||Object.defineProperty(e,o,{configurable:!1,enumerable:!0,get:t})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var o=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(o,"a",o),o},n.o=function(e,o){return Object.prototype.hasOwnProperty.call(e,o)},n.p="",n(n.s=5)}([function(e,o){e.exports=ng.core},function(e,o){e.exports=ng.platformBrowser},function(e,o){e.exports=ng.common},function(e,o){e.exports=ng.elements},function(e,o,n){"use strict";n.r(o);var t=n(0),r=n(3),l=function(){return function(){}}(),a=function(){function e(e){this.injector=e}return e.prototype.ngDoBootstrap=function(){var e=Object(r.createCustomElement)(l,{injector:this.injector});customElements.define("angular-element-a",e)},e}(),u=[[""]],c=t["ɵcrt"]({encapsulation:0,styles:u,data:{}});function i(e){return t["ɵvid"](0,[(e()(),t["ɵeld"](0,0,null,null,1,"h1",[],null,null,null,null,null)),(e()(),t["ɵted"](1,null,[""," for element A"]))],null,function(e,o){e(o,1,0,o.component.title)})}var p=t["ɵccf"]("custom-root",l,function(e){return t["ɵvid"](0,[(e()(),t["ɵeld"](0,0,null,null,1,"custom-root",[],null,null,null,i,c)),t["ɵdid"](1,49152,null,0,l,[],null,null)],null,null)},{title:"title"},{},[]),m=n(2),s=n(1),d=t["ɵcmf"](a,[],function(e){return t["ɵmod"]([t["ɵmpd"](512,t.ComponentFactoryResolver,t["ɵCodegenComponentFactoryResolver"],[[8,[p]],[3,t.ComponentFactoryResolver],t.NgModuleRef]),t["ɵmpd"](5120,t.LOCALE_ID,t["ɵangular_packages_core_core_k"],[[3,t.LOCALE_ID]]),t["ɵmpd"](4608,m.NgLocalization,m.NgLocaleLocalization,[t.LOCALE_ID,[2,m["ɵangular_packages_common_common_a"]]]),t["ɵmpd"](4608,t.Compiler,t.Compiler,[]),t["ɵmpd"](5120,t.APP_ID,t["ɵangular_packages_core_core_f"],[]),t["ɵmpd"](5120,t.IterableDiffers,t["ɵangular_packages_core_core_i"],[]),t["ɵmpd"](5120,t.KeyValueDiffers,t["ɵangular_packages_core_core_j"],[]),t["ɵmpd"](4608,s.DomSanitizer,s["ɵDomSanitizerImpl"],[m.DOCUMENT]),t["ɵmpd"](6144,t.Sanitizer,null,[s.DomSanitizer]),t["ɵmpd"](4608,s.HAMMER_GESTURE_CONFIG,s.HammerGestureConfig,[]),t["ɵmpd"](5120,s.EVENT_MANAGER_PLUGINS,function(e,o,n,t,r,l,a,u){return[new s["ɵDomEventsPlugin"](e,o,n),new s["ɵKeyEventsPlugin"](t),new s["ɵHammerGesturesPlugin"](r,l,a,u)]},[m.DOCUMENT,t.NgZone,t.PLATFORM_ID,m.DOCUMENT,m.DOCUMENT,s.HAMMER_GESTURE_CONFIG,t["ɵConsole"],[2,s.HAMMER_LOADER]]),t["ɵmpd"](4608,s.EventManager,s.EventManager,[s.EVENT_MANAGER_PLUGINS,t.NgZone]),t["ɵmpd"](135680,s["ɵDomSharedStylesHost"],s["ɵDomSharedStylesHost"],[m.DOCUMENT]),t["ɵmpd"](4608,s["ɵDomRendererFactory2"],s["ɵDomRendererFactory2"],[s.EventManager,s["ɵDomSharedStylesHost"]]),t["ɵmpd"](6144,t.RendererFactory2,null,[s["ɵDomRendererFactory2"]]),t["ɵmpd"](6144,s["ɵSharedStylesHost"],null,[s["ɵDomSharedStylesHost"]]),t["ɵmpd"](4608,t.Testability,t.Testability,[t.NgZone]),t["ɵmpd"](1073742336,m.CommonModule,m.CommonModule,[]),t["ɵmpd"](1024,t.ErrorHandler,s["ɵangular_packages_platform_browser_platform_browser_a"],[]),t["ɵmpd"](1024,t.APP_INITIALIZER,function(e){return[s["ɵangular_packages_platform_browser_platform_browser_j"](e)]},[[2,t.NgProbeToken]]),t["ɵmpd"](512,t.ApplicationInitStatus,t.ApplicationInitStatus,[[2,t.APP_INITIALIZER]]),t["ɵmpd"](131584,t.ApplicationRef,t.ApplicationRef,[t.NgZone,t["ɵConsole"],t.Injector,t.ErrorHandler,t.ComponentFactoryResolver,t.ApplicationInitStatus]),t["ɵmpd"](1073742336,t.ApplicationModule,t.ApplicationModule,[t.ApplicationRef]),t["ɵmpd"](1073742336,s.BrowserModule,s.BrowserModule,[[3,s.BrowserModule]]),t["ɵmpd"](1073742336,a,a,[t.Injector]),t["ɵmpd"](256,t["ɵAPP_ROOT"],!0,[])])});s.platformBrowser().bootstrapModuleFactory(d).catch(function(e){return console.error(e)})},function(e,o,n){e.exports=n(4)}]); -------------------------------------------------------------------------------- /angular-element-a/dist/angular-element-a/scripts.js: -------------------------------------------------------------------------------- 1 | /*! (C) Andrea Giammarchi - @WebReflection - ISC Style License */ 2 | !function(e,t){"use strict";function n(){var e=C.splice(0,C.length);for($e=0;e.length;)e.shift().call(null,e.shift())}function r(e,t){for(var n=0,r=e.length;n1)&&E(this)}}}),Ve(l,x,{value:function(e){-1>0),R="addEventListener",U="attached",k="Callback",_="detached",q="extends",x="attributeChanged"+k,B=U+k,Z="connected"+k,j="disconnected"+k,G="created"+k,z=_+k,K="ADDITION",X="REMOVAL",$="DOMAttrModified",Q="DOMContentLoaded",W="DOMSubtreeModified",Y="<",J="=",ee=/^[A-Z][A-Z0-9]*(?:-[A-Z0-9]+)+$/,te=["ANNOTATION-XML","COLOR-PROFILE","FONT-FACE","FONT-FACE-SRC","FONT-FACE-URI","FONT-FACE-FORMAT","FONT-FACE-NAME","MISSING-GLYPH"],ne=[],re=[],oe="",le=g.documentElement,ae=ne.indexOf||function(e){for(var t=this.length;t--&&this[t]!==e;);return t},ie=b.prototype,ue=ie.hasOwnProperty,ce=ie.isPrototypeOf,se=b.defineProperty,me=[],fe=b.getOwnPropertyDescriptor,pe=b.getOwnPropertyNames,de=b.getPrototypeOf,he=b.setPrototypeOf,Te=!!b.__proto__,Le="__dreCEv1",Me=e.customElements,Ee=!/^force/.test(t.type)&&!!(Me&&Me.define&&Me.get&&Me.whenDefined),ve=b.create||b,He=e.Map||function(){var e,t=[],n=[];return{get:function(e){return n[ae.call(t,e)]},set:function(r,o){(e=ae.call(t,r))<0?n[t.push(r)-1]=o:n[e]=o}}},ge=e.Promise||function(e){function t(e){for(r=!0;n.length;)n.shift()(e)}var n=[],r=!1,o={catch:function(){return o},then:function(e){return n.push(e),r&&setTimeout(t,1),o}};return e(t),o},be=!1,ye=ve(null),Ce=ve(null),we=new He,Ae=function(e){return e.toLowerCase()},Oe=b.create||function e(t){return t?(e.prototype=t,new e):this},Ne=he||(Te?function(e,t){return e.__proto__=t,e}:pe&&fe?function(){function e(e,t){for(var n,r=pe(t),o=0,l=r.length;o
",new De(function(e,t){if(e[0]&&"childList"==e[0].type&&!e[0].removedNodes[0].childNodes.length){var n=(S=fe(Fe,"innerHTML"))&&S.set;n&&se(Fe,"innerHTML",{set:function(e){for(;this.lastChild;)this.removeChild(this.lastChild);n.call(this,e)}})}t.disconnect(),S=null}).observe(S,{childList:!0,subtree:!0}),S.innerHTML=""),Qe||(he||Te?(I=function(e,t){ce.call(t,e)||f(e,t)},F=f):F=I=function(e,t){e[P]||(e[P]=b(!0),f(e,t))},Se?(Je=!1,function(){var e=fe(Fe,R),t=e.value,n=function(e){var t=new CustomEvent($,{bubbles:!0});t.attrName=e,t.prevValue=qe.call(this,e),t.newValue=null,t[X]=t.attrChange=2,Be.call(this,e),_e.call(this,t)},r=function(e,t){var n=xe.call(this,e),r=n&&qe.call(this,e),o=new CustomEvent($,{bubbles:!0});Ze.call(this,e,t),o.attrName=e,o.prevValue=n?r:null,o.newValue=t,n?o.MODIFICATION=o.attrChange=1:o[K]=o.attrChange=0,_e.call(this,o)},o=function(e){var t,n=e.currentTarget,r=n[P],o=e.propertyName;r.hasOwnProperty(o)&&(r=r[o],(t=new CustomEvent($,{bubbles:!0})).attrName=r.name,t.prevValue=r.value||null,t.newValue=r.value=n[o]||null,null==t.prevValue?t[K]=t.attrChange=0:t.MODIFICATION=t.attrChange=1,_e.call(n,t))};e.value=function(e,l,a){e===$&&this[x]&&this.setAttribute!==r&&(this[P]={className:{name:"class",value:this.className}},this.setAttribute=r,this.removeAttribute=n,t.call(this,"propertychange",o)),t.call(this,e,l,a)},se(Fe,R,e)}()):De||(le[R]($,Xe),le.setAttribute(P,1),le.removeAttribute(P),Je&&(w=function(e){var t,n,r,o=this;if(o===e.target){for(r in t=o[P],o[P]=n=O(o),n){if(!(r in t))return A(0,o,r,t[r],n[r],K);if(n[r]!==t[r])return A(1,o,r,t[r],n[r],"MODIFICATION")}for(r in t)if(!(r in n))return A(2,o,r,t[r],n[r],X)}},A=function(e,t,n,r,o,l){var a={attrChange:e,currentTarget:t,attrName:n,prevValue:r,newValue:o};a[l]=e,i(a)},O=function(e){for(var t,n,r={},o=e.attributes,l=0,a=o.length;l$");if(n[q]="a",(t.prototype=Oe(Ie.prototype)).constructor=t,e.customElements.define(r,t,n),!o.test(g.createElement("a",{is:r}).outerHTML)||!o.test((new t).outerHTML))throw n}(function e(){return Reflect.construct(Ie,[],e)},{},"document-register-element-a")}catch(e){H()}if(!t.noBuiltIn)try{je.call(g,"a","a")}catch(e){Ae=function(e){return{is:e.toLowerCase()}}}}(window); -------------------------------------------------------------------------------- /angular-element-a/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 | }; -------------------------------------------------------------------------------- /angular-element-a/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 angular-element-a!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /angular-element-a/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('custom-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /angular-element-a/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 | } -------------------------------------------------------------------------------- /angular-element-a/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-element-a", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build --prod --extraWebpackConfig webpack.extra.js --output-hashing none", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "6.1.0", 15 | "@angular/common": "6.1.0", 16 | "@angular/compiler": "6.1.0", 17 | "@angular/core": "6.1.0", 18 | "@angular/elements": "^6.1.8", 19 | "@angular/forms": "6.1.0", 20 | "@angular/http": "6.1.0", 21 | "@angular/platform-browser": "6.1.0", 22 | "@angular/platform-browser-dynamic": "6.1.0", 23 | "@angular/router": "6.1.0", 24 | "@webcomponents/custom-elements": "^1.2.0", 25 | "core-js": "^2.5.4", 26 | "document-register-element": "^1.7.2", 27 | "rxjs": "~6.2.0", 28 | "zone.js": "~0.8.26" 29 | }, 30 | "devDependencies": { 31 | "@angular/cli": "~6.2.2", 32 | "@angular/compiler-cli": "6.1.0", 33 | "@angular/language-service": "6.1.0", 34 | "@types/jasmine": "~2.8.8", 35 | "@types/jasminewd2": "~2.0.3", 36 | "@types/node": "~8.9.4", 37 | "codelyzer": "~4.3.0", 38 | "cpr": "^3.0.1", 39 | "jasmine-core": "~2.99.1", 40 | "jasmine-spec-reporter": "~4.2.1", 41 | "karma": "~3.0.0", 42 | "karma-chrome-launcher": "~2.2.0", 43 | "karma-coverage-istanbul-reporter": "~2.0.1", 44 | "karma-jasmine": "~1.1.2", 45 | "karma-jasmine-html-reporter": "^0.2.2", 46 | "ngx-build-plus": "^6.1.0", 47 | "protractor": "~5.4.0", 48 | "ts-node": "~7.0.0", 49 | "tslint": "~5.11.0", 50 | "typescript": "~2.9.2", 51 | "webpack": "^4.19.1", 52 | "webpack-cli": "^3.0.3" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /angular-element-a/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/contactjaisai/multiple-angular-elements-sample/301c6e8f08105adf15483fc0ab2e007c875a4315/angular-element-a/src/app/app.component.css -------------------------------------------------------------------------------- /angular-element-a/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |

{{title}} for element A

2 | 3 | -------------------------------------------------------------------------------- /angular-element-a/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 'angular-element-a'`, async(() => { 17 | const fixture = TestBed.createComponent(AppComponent); 18 | const app = fixture.debugElement.componentInstance; 19 | expect(app.title).toEqual('angular-element-a'); 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 angular-element-a!'); 26 | })); 27 | }); 28 | -------------------------------------------------------------------------------- /angular-element-a/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'custom-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | @Input() 10 | title: string; 11 | } 12 | -------------------------------------------------------------------------------- /angular-element-a/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule, Injector } from '@angular/core'; 3 | import { createCustomElement } from '@angular/elements'; 4 | 5 | import { AppComponent } from './app.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | imports: [ 12 | BrowserModule 13 | ], 14 | providers: [], 15 | entryComponents: [AppComponent] 16 | }) 17 | export class AppModule { 18 | constructor(private injector: Injector) { 19 | } 20 | 21 | ngDoBootstrap() { 22 | const elm = createCustomElement(AppComponent, { injector: this.injector }); 23 | customElements.define('angular-element-a', elm); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /angular-element-a/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/contactjaisai/multiple-angular-elements-sample/301c6e8f08105adf15483fc0ab2e007c875a4315/angular-element-a/src/assets/.gitkeep -------------------------------------------------------------------------------- /angular-element-a/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 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /angular-element-a/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /angular-element-a/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 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /angular-element-a/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/contactjaisai/multiple-angular-elements-sample/301c6e8f08105adf15483fc0ab2e007c875a4315/angular-element-a/src/favicon.ico -------------------------------------------------------------------------------- /angular-element-a/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularElementA 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /angular-element-a/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 | }; -------------------------------------------------------------------------------- /angular-element-a/src/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app/app.module'; 4 | 5 | platformBrowserDynamic().bootstrapModule(AppModule) 6 | .catch(err => console.error(err)); 7 | 8 | -------------------------------------------------------------------------------- /angular-element-a/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 | -------------------------------------------------------------------------------- /angular-element-a/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /angular-element-a/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 | -------------------------------------------------------------------------------- /angular-element-a/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "exclude": [ 8 | "test.ts", 9 | "**/*.spec.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /angular-element-a/src/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 | "test.ts", 12 | "polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /angular-element-a/src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "custom", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "custom", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /angular-element-a/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2015", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "es5", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "es2017", 18 | "dom" 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /angular-element-a/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-redundant-jsdoc": true, 69 | "no-shadowed-variable": true, 70 | "no-string-literal": false, 71 | "no-string-throw": true, 72 | "no-switch-case-fall-through": true, 73 | "no-trailing-whitespace": true, 74 | "no-unnecessary-initializer": true, 75 | "no-unused-expression": true, 76 | "no-use-before-declare": true, 77 | "no-var-keyword": true, 78 | "object-literal-sort-keys": false, 79 | "one-line": [ 80 | true, 81 | "check-open-brace", 82 | "check-catch", 83 | "check-else", 84 | "check-whitespace" 85 | ], 86 | "prefer-const": true, 87 | "quotemark": [ 88 | true, 89 | "single" 90 | ], 91 | "radix": true, 92 | "semicolon": [ 93 | true, 94 | "always" 95 | ], 96 | "triple-equals": [ 97 | true, 98 | "allow-null-check" 99 | ], 100 | "typedef-whitespace": [ 101 | true, 102 | { 103 | "call-signature": "nospace", 104 | "index-signature": "nospace", 105 | "parameter": "nospace", 106 | "property-declaration": "nospace", 107 | "variable-declaration": "nospace" 108 | } 109 | ], 110 | "unified-signatures": true, 111 | "variable-name": false, 112 | "whitespace": [ 113 | true, 114 | "check-branch", 115 | "check-decl", 116 | "check-operator", 117 | "check-separator", 118 | "check-type" 119 | ], 120 | "no-output-on-prefix": true, 121 | "use-input-property-decorator": true, 122 | "use-output-property-decorator": true, 123 | "use-host-property-decorator": true, 124 | "no-input-rename": true, 125 | "no-output-rename": true, 126 | "use-life-cycle-interface": true, 127 | "use-pipe-transform-interface": true, 128 | "component-class-suffix": true, 129 | "directive-class-suffix": true 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /angular-element-a/webpack.extra.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "externals": { 3 | "rxjs": "rxjs", 4 | "@angular/core": "ng.core", 5 | "@angular/common": "ng.common", 6 | "@angular/platform-browser": "ng.platformBrowser", 7 | "@angular/platform-browser-dynamic": "ng.platformBrowserDynamic", 8 | "@angular/elements": "ng.elements", 9 | "@angular/compiler": "ng.compiler" 10 | } 11 | } -------------------------------------------------------------------------------- /angular-element-b/.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 | -------------------------------------------------------------------------------- /angular-element-b/README.md: -------------------------------------------------------------------------------- 1 | # AngularElementB 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.2.2. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 28 | -------------------------------------------------------------------------------- /angular-element-b/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "angular-element-b": { 7 | "root": "", 8 | "sourceRoot": "src", 9 | "projectType": "application", 10 | "prefix": "custom", 11 | "schematics": {}, 12 | "architect": { 13 | "build": { 14 | "builder": "ngx-build-plus:build", 15 | "options": { 16 | "outputPath": "dist/angular-element-b", 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 | "src/styles.css" 27 | ], 28 | "scripts": [ 29 | { 30 | "input": "node_modules/document-register-element/build/document-register-element.js" 31 | } 32 | ] 33 | }, 34 | "configurations": { 35 | "production": { 36 | "fileReplacements": [ 37 | { 38 | "replace": "src/environments/environment.ts", 39 | "with": "src/environments/environment.prod.ts" 40 | } 41 | ], 42 | "optimization": true, 43 | "outputHashing": "all", 44 | "sourceMap": false, 45 | "extractCss": true, 46 | "namedChunks": false, 47 | "aot": true, 48 | "extractLicenses": true, 49 | "vendorChunk": false, 50 | "buildOptimizer": true 51 | } 52 | } 53 | }, 54 | "serve": { 55 | "builder": "@angular-devkit/build-angular:dev-server", 56 | "options": { 57 | "browserTarget": "angular-element-b:build" 58 | }, 59 | "configurations": { 60 | "production": { 61 | "browserTarget": "angular-element-b:build:production" 62 | } 63 | } 64 | }, 65 | "extract-i18n": { 66 | "builder": "@angular-devkit/build-angular:extract-i18n", 67 | "options": { 68 | "browserTarget": "angular-element-b:build" 69 | } 70 | }, 71 | "test": { 72 | "builder": "@angular-devkit/build-angular:karma", 73 | "options": { 74 | "main": "src/test.ts", 75 | "polyfills": "src/polyfills.ts", 76 | "tsConfig": "src/tsconfig.spec.json", 77 | "karmaConfig": "src/karma.conf.js", 78 | "styles": [ 79 | "src/styles.css" 80 | ], 81 | "scripts": [], 82 | "assets": [ 83 | "src/favicon.ico", 84 | "src/assets" 85 | ] 86 | } 87 | }, 88 | "lint": { 89 | "builder": "@angular-devkit/build-angular:tslint", 90 | "options": { 91 | "tsConfig": [ 92 | "src/tsconfig.app.json", 93 | "src/tsconfig.spec.json" 94 | ], 95 | "exclude": [ 96 | "**/node_modules/**" 97 | ] 98 | } 99 | } 100 | } 101 | }, 102 | "angular-element-b-e2e": { 103 | "root": "e2e/", 104 | "projectType": "application", 105 | "architect": { 106 | "e2e": { 107 | "builder": "@angular-devkit/build-angular:protractor", 108 | "options": { 109 | "protractorConfig": "e2e/protractor.conf.js", 110 | "devServerTarget": "angular-element-b:serve" 111 | }, 112 | "configurations": { 113 | "production": { 114 | "devServerTarget": "angular-element-b:serve:production" 115 | } 116 | } 117 | }, 118 | "lint": { 119 | "builder": "@angular-devkit/build-angular:tslint", 120 | "options": { 121 | "tsConfig": "e2e/tsconfig.e2e.json", 122 | "exclude": [ 123 | "**/node_modules/**" 124 | ] 125 | } 126 | } 127 | } 128 | } 129 | }, 130 | "defaultProject": "angular-element-b" 131 | } -------------------------------------------------------------------------------- /angular-element-b/dist/angular-element-b/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/contactjaisai/multiple-angular-elements-sample/301c6e8f08105adf15483fc0ab2e007c875a4315/angular-element-b/dist/angular-element-b/favicon.ico -------------------------------------------------------------------------------- /angular-element-b/dist/angular-element-b/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularElementB 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /angular-element-b/dist/angular-element-b/main.js: -------------------------------------------------------------------------------- 1 | !function(e){var n={};function o(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,o),r.l=!0,r.exports}o.m=e,o.c=n,o.d=function(e,n,t){o.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:t})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,n){if(1&n&&(e=o(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(o.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var r in e)o.d(t,r,function(n){return e[n]}.bind(null,r));return t},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="",o(o.s=4)}([function(e,n){e.exports=ng.core},function(e,n){e.exports=ng.platformBrowser},function(e,n){e.exports=ng.common},function(e,n){e.exports=ng.elements},function(e,n,o){e.exports=o(5)},function(e,n,o){"use strict";o.r(n);var t=o(0),r=o(3),l=function(){return function(){}}(),a=function(){function e(e){this.injector=e}return e.prototype.ngDoBootstrap=function(){var e=Object(r.createCustomElement)(l,{injector:this.injector});customElements.define("angular-element-b",e)},e}(),u=[[""]],i=t["ɵcrt"]({encapsulation:0,styles:u,data:{}});function c(e){return t["ɵvid"](0,[(e()(),t["ɵeld"](0,0,null,null,1,"h1",[],null,null,null,null,null)),(e()(),t["ɵted"](1,null,[""," for element B"]))],null,function(e,n){e(n,1,0,n.component.title)})}var p=t["ɵccf"]("custom-root",l,function(e){return t["ɵvid"](0,[(e()(),t["ɵeld"](0,0,null,null,1,"custom-root",[],null,null,null,c,i)),t["ɵdid"](1,49152,null,0,l,[],null,null)],null,null)},{title:"title"},{},[]),m=o(2),s=o(1),d=t["ɵcmf"](a,[],function(e){return t["ɵmod"]([t["ɵmpd"](512,t.ComponentFactoryResolver,t["ɵCodegenComponentFactoryResolver"],[[8,[p]],[3,t.ComponentFactoryResolver],t.NgModuleRef]),t["ɵmpd"](5120,t.LOCALE_ID,t["ɵangular_packages_core_core_k"],[[3,t.LOCALE_ID]]),t["ɵmpd"](4608,m.NgLocalization,m.NgLocaleLocalization,[t.LOCALE_ID,[2,m["ɵangular_packages_common_common_a"]]]),t["ɵmpd"](4608,t.Compiler,t.Compiler,[]),t["ɵmpd"](5120,t.APP_ID,t["ɵangular_packages_core_core_f"],[]),t["ɵmpd"](5120,t.IterableDiffers,t["ɵangular_packages_core_core_i"],[]),t["ɵmpd"](5120,t.KeyValueDiffers,t["ɵangular_packages_core_core_j"],[]),t["ɵmpd"](4608,s.DomSanitizer,s["ɵDomSanitizerImpl"],[m.DOCUMENT]),t["ɵmpd"](6144,t.Sanitizer,null,[s.DomSanitizer]),t["ɵmpd"](4608,s.HAMMER_GESTURE_CONFIG,s.HammerGestureConfig,[]),t["ɵmpd"](5120,s.EVENT_MANAGER_PLUGINS,function(e,n,o,t,r,l,a,u){return[new s["ɵDomEventsPlugin"](e,n,o),new s["ɵKeyEventsPlugin"](t),new s["ɵHammerGesturesPlugin"](r,l,a,u)]},[m.DOCUMENT,t.NgZone,t.PLATFORM_ID,m.DOCUMENT,m.DOCUMENT,s.HAMMER_GESTURE_CONFIG,t["ɵConsole"],[2,s.HAMMER_LOADER]]),t["ɵmpd"](4608,s.EventManager,s.EventManager,[s.EVENT_MANAGER_PLUGINS,t.NgZone]),t["ɵmpd"](135680,s["ɵDomSharedStylesHost"],s["ɵDomSharedStylesHost"],[m.DOCUMENT]),t["ɵmpd"](4608,s["ɵDomRendererFactory2"],s["ɵDomRendererFactory2"],[s.EventManager,s["ɵDomSharedStylesHost"]]),t["ɵmpd"](6144,t.RendererFactory2,null,[s["ɵDomRendererFactory2"]]),t["ɵmpd"](6144,s["ɵSharedStylesHost"],null,[s["ɵDomSharedStylesHost"]]),t["ɵmpd"](4608,t.Testability,t.Testability,[t.NgZone]),t["ɵmpd"](1073742336,m.CommonModule,m.CommonModule,[]),t["ɵmpd"](1024,t.ErrorHandler,s["ɵangular_packages_platform_browser_platform_browser_a"],[]),t["ɵmpd"](1024,t.APP_INITIALIZER,function(e){return[s["ɵangular_packages_platform_browser_platform_browser_j"](e)]},[[2,t.NgProbeToken]]),t["ɵmpd"](512,t.ApplicationInitStatus,t.ApplicationInitStatus,[[2,t.APP_INITIALIZER]]),t["ɵmpd"](131584,t.ApplicationRef,t.ApplicationRef,[t.NgZone,t["ɵConsole"],t.Injector,t.ErrorHandler,t.ComponentFactoryResolver,t.ApplicationInitStatus]),t["ɵmpd"](1073742336,t.ApplicationModule,t.ApplicationModule,[t.ApplicationRef]),t["ɵmpd"](1073742336,s.BrowserModule,s.BrowserModule,[[3,s.BrowserModule]]),t["ɵmpd"](1073742336,a,a,[t.Injector]),t["ɵmpd"](256,t["ɵAPP_ROOT"],!0,[])])});s.platformBrowser().bootstrapModuleFactory(d).catch(function(e){return console.error(e)})}]); -------------------------------------------------------------------------------- /angular-element-b/dist/angular-element-b/scripts.js: -------------------------------------------------------------------------------- 1 | /*! (C) Andrea Giammarchi - @WebReflection - ISC Style License */ 2 | !function(e,t){"use strict";function n(){var e=C.splice(0,C.length);for($e=0;e.length;)e.shift().call(null,e.shift())}function r(e,t){for(var n=0,r=e.length;n1)&&E(this)}}}),Ve(l,x,{value:function(e){-1>0),R="addEventListener",U="attached",k="Callback",_="detached",q="extends",x="attributeChanged"+k,B=U+k,Z="connected"+k,j="disconnected"+k,G="created"+k,z=_+k,K="ADDITION",X="REMOVAL",$="DOMAttrModified",Q="DOMContentLoaded",W="DOMSubtreeModified",Y="<",J="=",ee=/^[A-Z][A-Z0-9]*(?:-[A-Z0-9]+)+$/,te=["ANNOTATION-XML","COLOR-PROFILE","FONT-FACE","FONT-FACE-SRC","FONT-FACE-URI","FONT-FACE-FORMAT","FONT-FACE-NAME","MISSING-GLYPH"],ne=[],re=[],oe="",le=g.documentElement,ae=ne.indexOf||function(e){for(var t=this.length;t--&&this[t]!==e;);return t},ie=b.prototype,ue=ie.hasOwnProperty,ce=ie.isPrototypeOf,se=b.defineProperty,me=[],fe=b.getOwnPropertyDescriptor,pe=b.getOwnPropertyNames,de=b.getPrototypeOf,he=b.setPrototypeOf,Te=!!b.__proto__,Le="__dreCEv1",Me=e.customElements,Ee=!/^force/.test(t.type)&&!!(Me&&Me.define&&Me.get&&Me.whenDefined),ve=b.create||b,He=e.Map||function(){var e,t=[],n=[];return{get:function(e){return n[ae.call(t,e)]},set:function(r,o){(e=ae.call(t,r))<0?n[t.push(r)-1]=o:n[e]=o}}},ge=e.Promise||function(e){function t(e){for(r=!0;n.length;)n.shift()(e)}var n=[],r=!1,o={catch:function(){return o},then:function(e){return n.push(e),r&&setTimeout(t,1),o}};return e(t),o},be=!1,ye=ve(null),Ce=ve(null),we=new He,Ae=function(e){return e.toLowerCase()},Oe=b.create||function e(t){return t?(e.prototype=t,new e):this},Ne=he||(Te?function(e,t){return e.__proto__=t,e}:pe&&fe?function(){function e(e,t){for(var n,r=pe(t),o=0,l=r.length;o
",new De(function(e,t){if(e[0]&&"childList"==e[0].type&&!e[0].removedNodes[0].childNodes.length){var n=(S=fe(Fe,"innerHTML"))&&S.set;n&&se(Fe,"innerHTML",{set:function(e){for(;this.lastChild;)this.removeChild(this.lastChild);n.call(this,e)}})}t.disconnect(),S=null}).observe(S,{childList:!0,subtree:!0}),S.innerHTML=""),Qe||(he||Te?(I=function(e,t){ce.call(t,e)||f(e,t)},F=f):F=I=function(e,t){e[P]||(e[P]=b(!0),f(e,t))},Se?(Je=!1,function(){var e=fe(Fe,R),t=e.value,n=function(e){var t=new CustomEvent($,{bubbles:!0});t.attrName=e,t.prevValue=qe.call(this,e),t.newValue=null,t[X]=t.attrChange=2,Be.call(this,e),_e.call(this,t)},r=function(e,t){var n=xe.call(this,e),r=n&&qe.call(this,e),o=new CustomEvent($,{bubbles:!0});Ze.call(this,e,t),o.attrName=e,o.prevValue=n?r:null,o.newValue=t,n?o.MODIFICATION=o.attrChange=1:o[K]=o.attrChange=0,_e.call(this,o)},o=function(e){var t,n=e.currentTarget,r=n[P],o=e.propertyName;r.hasOwnProperty(o)&&(r=r[o],(t=new CustomEvent($,{bubbles:!0})).attrName=r.name,t.prevValue=r.value||null,t.newValue=r.value=n[o]||null,null==t.prevValue?t[K]=t.attrChange=0:t.MODIFICATION=t.attrChange=1,_e.call(n,t))};e.value=function(e,l,a){e===$&&this[x]&&this.setAttribute!==r&&(this[P]={className:{name:"class",value:this.className}},this.setAttribute=r,this.removeAttribute=n,t.call(this,"propertychange",o)),t.call(this,e,l,a)},se(Fe,R,e)}()):De||(le[R]($,Xe),le.setAttribute(P,1),le.removeAttribute(P),Je&&(w=function(e){var t,n,r,o=this;if(o===e.target){for(r in t=o[P],o[P]=n=O(o),n){if(!(r in t))return A(0,o,r,t[r],n[r],K);if(n[r]!==t[r])return A(1,o,r,t[r],n[r],"MODIFICATION")}for(r in t)if(!(r in n))return A(2,o,r,t[r],n[r],X)}},A=function(e,t,n,r,o,l){var a={attrChange:e,currentTarget:t,attrName:n,prevValue:r,newValue:o};a[l]=e,i(a)},O=function(e){for(var t,n,r={},o=e.attributes,l=0,a=o.length;l$");if(n[q]="a",(t.prototype=Oe(Ie.prototype)).constructor=t,e.customElements.define(r,t,n),!o.test(g.createElement("a",{is:r}).outerHTML)||!o.test((new t).outerHTML))throw n}(function e(){return Reflect.construct(Ie,[],e)},{},"document-register-element-a")}catch(e){H()}if(!t.noBuiltIn)try{je.call(g,"a","a")}catch(e){Ae=function(e){return{is:e.toLowerCase()}}}}(window); -------------------------------------------------------------------------------- /angular-element-b/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 | }; -------------------------------------------------------------------------------- /angular-element-b/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 angular-element-b!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /angular-element-b/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('custom-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /angular-element-b/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 | } -------------------------------------------------------------------------------- /angular-element-b/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-element-b", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build --prod --extraWebpackConfig webpack.extra.js --output-hashing none", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "6.1.0", 15 | "@angular/common": "6.1.0", 16 | "@angular/compiler": "6.1.0", 17 | "@angular/core": "6.1.0", 18 | "@angular/elements": "^6.1.8", 19 | "@angular/forms": "6.1.0", 20 | "@angular/http": "6.1.0", 21 | "@angular/platform-browser": "6.1.0", 22 | "@angular/platform-browser-dynamic": "6.1.0", 23 | "@angular/router": "6.1.0", 24 | "@webcomponents/custom-elements": "^1.2.0", 25 | "core-js": "^2.5.4", 26 | "document-register-element": "^1.7.2", 27 | "rxjs": "~6.2.0", 28 | "zone.js": "~0.8.26" 29 | }, 30 | "devDependencies": { 31 | "@angular/cli": "~6.2.2", 32 | "@angular/compiler-cli": "6.1.0", 33 | "@angular/language-service": "6.1.0", 34 | "@types/jasmine": "~2.8.8", 35 | "@types/jasminewd2": "~2.0.3", 36 | "@types/node": "~8.9.4", 37 | "codelyzer": "~4.3.0", 38 | "cpr": "^3.0.1", 39 | "jasmine-core": "~2.99.1", 40 | "jasmine-spec-reporter": "~4.2.1", 41 | "karma": "~3.0.0", 42 | "karma-chrome-launcher": "~2.2.0", 43 | "karma-coverage-istanbul-reporter": "~2.0.1", 44 | "karma-jasmine": "~1.1.2", 45 | "karma-jasmine-html-reporter": "^0.2.2", 46 | "ngx-build-plus": "^6.1.0", 47 | "protractor": "~5.4.0", 48 | "ts-node": "~7.0.0", 49 | "tslint": "~5.11.0", 50 | "typescript": "~2.9.2", 51 | "webpack": "^4.19.1", 52 | "webpack-cli": "^3.0.3" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /angular-element-b/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/contactjaisai/multiple-angular-elements-sample/301c6e8f08105adf15483fc0ab2e007c875a4315/angular-element-b/src/app/app.component.css -------------------------------------------------------------------------------- /angular-element-b/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |

{{title}} for element B

-------------------------------------------------------------------------------- /angular-element-b/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 'angular-element-b'`, async(() => { 17 | const fixture = TestBed.createComponent(AppComponent); 18 | const app = fixture.debugElement.componentInstance; 19 | expect(app.title).toEqual('angular-element-b'); 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 angular-element-b!'); 26 | })); 27 | }); 28 | -------------------------------------------------------------------------------- /angular-element-b/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'custom-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | @Input() 10 | title: string; 11 | } 12 | -------------------------------------------------------------------------------- /angular-element-b/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule, Injector } from '@angular/core'; 3 | import { createCustomElement } from '@angular/elements'; 4 | 5 | import { AppComponent } from './app.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | imports: [ 12 | BrowserModule 13 | ], 14 | providers: [], 15 | entryComponents: [AppComponent] 16 | }) 17 | export class AppModule { 18 | constructor(private injector: Injector) { 19 | } 20 | 21 | ngDoBootstrap() { 22 | const elm = createCustomElement(AppComponent, { injector: this.injector }); 23 | customElements.define('angular-element-b', elm); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /angular-element-b/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/contactjaisai/multiple-angular-elements-sample/301c6e8f08105adf15483fc0ab2e007c875a4315/angular-element-b/src/assets/.gitkeep -------------------------------------------------------------------------------- /angular-element-b/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 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /angular-element-b/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /angular-element-b/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 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /angular-element-b/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/contactjaisai/multiple-angular-elements-sample/301c6e8f08105adf15483fc0ab2e007c875a4315/angular-element-b/src/favicon.ico -------------------------------------------------------------------------------- /angular-element-b/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularElementB 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /angular-element-b/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 | }; -------------------------------------------------------------------------------- /angular-element-b/src/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app/app.module'; 4 | 5 | platformBrowserDynamic().bootstrapModule(AppModule) 6 | .catch(err => console.error(err)); 7 | 8 | -------------------------------------------------------------------------------- /angular-element-b/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 | -------------------------------------------------------------------------------- /angular-element-b/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /angular-element-b/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 | -------------------------------------------------------------------------------- /angular-element-b/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "exclude": [ 8 | "test.ts", 9 | "**/*.spec.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /angular-element-b/src/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 | "test.ts", 12 | "polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /angular-element-b/src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "custom", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "custom", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /angular-element-b/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2015", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "es5", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "es2017", 18 | "dom" 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /angular-element-b/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-redundant-jsdoc": true, 69 | "no-shadowed-variable": true, 70 | "no-string-literal": false, 71 | "no-string-throw": true, 72 | "no-switch-case-fall-through": true, 73 | "no-trailing-whitespace": true, 74 | "no-unnecessary-initializer": true, 75 | "no-unused-expression": true, 76 | "no-use-before-declare": true, 77 | "no-var-keyword": true, 78 | "object-literal-sort-keys": false, 79 | "one-line": [ 80 | true, 81 | "check-open-brace", 82 | "check-catch", 83 | "check-else", 84 | "check-whitespace" 85 | ], 86 | "prefer-const": true, 87 | "quotemark": [ 88 | true, 89 | "single" 90 | ], 91 | "radix": true, 92 | "semicolon": [ 93 | true, 94 | "always" 95 | ], 96 | "triple-equals": [ 97 | true, 98 | "allow-null-check" 99 | ], 100 | "typedef-whitespace": [ 101 | true, 102 | { 103 | "call-signature": "nospace", 104 | "index-signature": "nospace", 105 | "parameter": "nospace", 106 | "property-declaration": "nospace", 107 | "variable-declaration": "nospace" 108 | } 109 | ], 110 | "unified-signatures": true, 111 | "variable-name": false, 112 | "whitespace": [ 113 | true, 114 | "check-branch", 115 | "check-decl", 116 | "check-operator", 117 | "check-separator", 118 | "check-type" 119 | ], 120 | "no-output-on-prefix": true, 121 | "use-input-property-decorator": true, 122 | "use-output-property-decorator": true, 123 | "use-host-property-decorator": true, 124 | "no-input-rename": true, 125 | "no-output-rename": true, 126 | "use-life-cycle-interface": true, 127 | "use-pipe-transform-interface": true, 128 | "component-class-suffix": true, 129 | "directive-class-suffix": true 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /angular-element-b/webpack.extra.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "externals": { 3 | "rxjs": "rxjs", 4 | "@angular/core": "ng.core", 5 | "@angular/common": "ng.common", 6 | "@angular/platform-browser": "ng.platformBrowser", 7 | "@angular/platform-browser-dynamic": "ng.platformBrowserDynamic", 8 | "@angular/elements": "ng.elements", 9 | "@angular/compiler": "ng.compiler" 10 | } 11 | } -------------------------------------------------------------------------------- /test-angular-elements/angular-element-a/main.js: -------------------------------------------------------------------------------- 1 | !function(e){var o={};function n(t){if(o[t])return o[t].exports;var r=o[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=o,n.d=function(e,o,t){n.o(e,o)||Object.defineProperty(e,o,{configurable:!1,enumerable:!0,get:t})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var o=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(o,"a",o),o},n.o=function(e,o){return Object.prototype.hasOwnProperty.call(e,o)},n.p="",n(n.s=5)}([function(e,o){e.exports=ng.core},function(e,o){e.exports=ng.platformBrowser},function(e,o){e.exports=ng.common},function(e,o){e.exports=ng.elements},function(e,o,n){"use strict";n.r(o);var t=n(0),r=n(3),l=function(){return function(){}}(),a=function(){function e(e){this.injector=e}return e.prototype.ngDoBootstrap=function(){var e=Object(r.createCustomElement)(l,{injector:this.injector});customElements.define("angular-element-a",e)},e}(),u=[[""]],c=t["ɵcrt"]({encapsulation:0,styles:u,data:{}});function i(e){return t["ɵvid"](0,[(e()(),t["ɵeld"](0,0,null,null,1,"h1",[],null,null,null,null,null)),(e()(),t["ɵted"](1,null,[""," for element A"]))],null,function(e,o){e(o,1,0,o.component.title)})}var p=t["ɵccf"]("custom-root",l,function(e){return t["ɵvid"](0,[(e()(),t["ɵeld"](0,0,null,null,1,"custom-root",[],null,null,null,i,c)),t["ɵdid"](1,49152,null,0,l,[],null,null)],null,null)},{title:"title"},{},[]),m=n(2),s=n(1),d=t["ɵcmf"](a,[],function(e){return t["ɵmod"]([t["ɵmpd"](512,t.ComponentFactoryResolver,t["ɵCodegenComponentFactoryResolver"],[[8,[p]],[3,t.ComponentFactoryResolver],t.NgModuleRef]),t["ɵmpd"](5120,t.LOCALE_ID,t["ɵangular_packages_core_core_k"],[[3,t.LOCALE_ID]]),t["ɵmpd"](4608,m.NgLocalization,m.NgLocaleLocalization,[t.LOCALE_ID,[2,m["ɵangular_packages_common_common_a"]]]),t["ɵmpd"](4608,t.Compiler,t.Compiler,[]),t["ɵmpd"](5120,t.APP_ID,t["ɵangular_packages_core_core_f"],[]),t["ɵmpd"](5120,t.IterableDiffers,t["ɵangular_packages_core_core_i"],[]),t["ɵmpd"](5120,t.KeyValueDiffers,t["ɵangular_packages_core_core_j"],[]),t["ɵmpd"](4608,s.DomSanitizer,s["ɵDomSanitizerImpl"],[m.DOCUMENT]),t["ɵmpd"](6144,t.Sanitizer,null,[s.DomSanitizer]),t["ɵmpd"](4608,s.HAMMER_GESTURE_CONFIG,s.HammerGestureConfig,[]),t["ɵmpd"](5120,s.EVENT_MANAGER_PLUGINS,function(e,o,n,t,r,l,a,u){return[new s["ɵDomEventsPlugin"](e,o,n),new s["ɵKeyEventsPlugin"](t),new s["ɵHammerGesturesPlugin"](r,l,a,u)]},[m.DOCUMENT,t.NgZone,t.PLATFORM_ID,m.DOCUMENT,m.DOCUMENT,s.HAMMER_GESTURE_CONFIG,t["ɵConsole"],[2,s.HAMMER_LOADER]]),t["ɵmpd"](4608,s.EventManager,s.EventManager,[s.EVENT_MANAGER_PLUGINS,t.NgZone]),t["ɵmpd"](135680,s["ɵDomSharedStylesHost"],s["ɵDomSharedStylesHost"],[m.DOCUMENT]),t["ɵmpd"](4608,s["ɵDomRendererFactory2"],s["ɵDomRendererFactory2"],[s.EventManager,s["ɵDomSharedStylesHost"]]),t["ɵmpd"](6144,t.RendererFactory2,null,[s["ɵDomRendererFactory2"]]),t["ɵmpd"](6144,s["ɵSharedStylesHost"],null,[s["ɵDomSharedStylesHost"]]),t["ɵmpd"](4608,t.Testability,t.Testability,[t.NgZone]),t["ɵmpd"](1073742336,m.CommonModule,m.CommonModule,[]),t["ɵmpd"](1024,t.ErrorHandler,s["ɵangular_packages_platform_browser_platform_browser_a"],[]),t["ɵmpd"](1024,t.APP_INITIALIZER,function(e){return[s["ɵangular_packages_platform_browser_platform_browser_j"](e)]},[[2,t.NgProbeToken]]),t["ɵmpd"](512,t.ApplicationInitStatus,t.ApplicationInitStatus,[[2,t.APP_INITIALIZER]]),t["ɵmpd"](131584,t.ApplicationRef,t.ApplicationRef,[t.NgZone,t["ɵConsole"],t.Injector,t.ErrorHandler,t.ComponentFactoryResolver,t.ApplicationInitStatus]),t["ɵmpd"](1073742336,t.ApplicationModule,t.ApplicationModule,[t.ApplicationRef]),t["ɵmpd"](1073742336,s.BrowserModule,s.BrowserModule,[[3,s.BrowserModule]]),t["ɵmpd"](1073742336,a,a,[t.Injector]),t["ɵmpd"](256,t["ɵAPP_ROOT"],!0,[])])});s.platformBrowser().bootstrapModuleFactory(d).catch(function(e){return console.error(e)})},function(e,o,n){e.exports=n(4)}]); -------------------------------------------------------------------------------- /test-angular-elements/angular-element-b/main.js: -------------------------------------------------------------------------------- 1 | !function(e){var n={};function o(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,o),r.l=!0,r.exports}o.m=e,o.c=n,o.d=function(e,n,t){o.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:t})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,n){if(1&n&&(e=o(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(o.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var r in e)o.d(t,r,function(n){return e[n]}.bind(null,r));return t},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="",o(o.s=4)}([function(e,n){e.exports=ng.core},function(e,n){e.exports=ng.platformBrowser},function(e,n){e.exports=ng.common},function(e,n){e.exports=ng.elements},function(e,n,o){e.exports=o(5)},function(e,n,o){"use strict";o.r(n);var t=o(0),r=o(3),l=function(){return function(){}}(),a=function(){function e(e){this.injector=e}return e.prototype.ngDoBootstrap=function(){var e=Object(r.createCustomElement)(l,{injector:this.injector});customElements.define("angular-element-b",e)},e}(),u=[[""]],i=t["ɵcrt"]({encapsulation:0,styles:u,data:{}});function c(e){return t["ɵvid"](0,[(e()(),t["ɵeld"](0,0,null,null,1,"h1",[],null,null,null,null,null)),(e()(),t["ɵted"](1,null,[""," for element B"]))],null,function(e,n){e(n,1,0,n.component.title)})}var p=t["ɵccf"]("custom-root",l,function(e){return t["ɵvid"](0,[(e()(),t["ɵeld"](0,0,null,null,1,"custom-root",[],null,null,null,c,i)),t["ɵdid"](1,49152,null,0,l,[],null,null)],null,null)},{title:"title"},{},[]),m=o(2),s=o(1),d=t["ɵcmf"](a,[],function(e){return t["ɵmod"]([t["ɵmpd"](512,t.ComponentFactoryResolver,t["ɵCodegenComponentFactoryResolver"],[[8,[p]],[3,t.ComponentFactoryResolver],t.NgModuleRef]),t["ɵmpd"](5120,t.LOCALE_ID,t["ɵangular_packages_core_core_k"],[[3,t.LOCALE_ID]]),t["ɵmpd"](4608,m.NgLocalization,m.NgLocaleLocalization,[t.LOCALE_ID,[2,m["ɵangular_packages_common_common_a"]]]),t["ɵmpd"](4608,t.Compiler,t.Compiler,[]),t["ɵmpd"](5120,t.APP_ID,t["ɵangular_packages_core_core_f"],[]),t["ɵmpd"](5120,t.IterableDiffers,t["ɵangular_packages_core_core_i"],[]),t["ɵmpd"](5120,t.KeyValueDiffers,t["ɵangular_packages_core_core_j"],[]),t["ɵmpd"](4608,s.DomSanitizer,s["ɵDomSanitizerImpl"],[m.DOCUMENT]),t["ɵmpd"](6144,t.Sanitizer,null,[s.DomSanitizer]),t["ɵmpd"](4608,s.HAMMER_GESTURE_CONFIG,s.HammerGestureConfig,[]),t["ɵmpd"](5120,s.EVENT_MANAGER_PLUGINS,function(e,n,o,t,r,l,a,u){return[new s["ɵDomEventsPlugin"](e,n,o),new s["ɵKeyEventsPlugin"](t),new s["ɵHammerGesturesPlugin"](r,l,a,u)]},[m.DOCUMENT,t.NgZone,t.PLATFORM_ID,m.DOCUMENT,m.DOCUMENT,s.HAMMER_GESTURE_CONFIG,t["ɵConsole"],[2,s.HAMMER_LOADER]]),t["ɵmpd"](4608,s.EventManager,s.EventManager,[s.EVENT_MANAGER_PLUGINS,t.NgZone]),t["ɵmpd"](135680,s["ɵDomSharedStylesHost"],s["ɵDomSharedStylesHost"],[m.DOCUMENT]),t["ɵmpd"](4608,s["ɵDomRendererFactory2"],s["ɵDomRendererFactory2"],[s.EventManager,s["ɵDomSharedStylesHost"]]),t["ɵmpd"](6144,t.RendererFactory2,null,[s["ɵDomRendererFactory2"]]),t["ɵmpd"](6144,s["ɵSharedStylesHost"],null,[s["ɵDomSharedStylesHost"]]),t["ɵmpd"](4608,t.Testability,t.Testability,[t.NgZone]),t["ɵmpd"](1073742336,m.CommonModule,m.CommonModule,[]),t["ɵmpd"](1024,t.ErrorHandler,s["ɵangular_packages_platform_browser_platform_browser_a"],[]),t["ɵmpd"](1024,t.APP_INITIALIZER,function(e){return[s["ɵangular_packages_platform_browser_platform_browser_j"](e)]},[[2,t.NgProbeToken]]),t["ɵmpd"](512,t.ApplicationInitStatus,t.ApplicationInitStatus,[[2,t.APP_INITIALIZER]]),t["ɵmpd"](131584,t.ApplicationRef,t.ApplicationRef,[t.NgZone,t["ɵConsole"],t.Injector,t.ErrorHandler,t.ComponentFactoryResolver,t.ApplicationInitStatus]),t["ɵmpd"](1073742336,t.ApplicationModule,t.ApplicationModule,[t.ApplicationRef]),t["ɵmpd"](1073742336,s.BrowserModule,s.BrowserModule,[[3,s.BrowserModule]]),t["ɵmpd"](1073742336,a,a,[t.Injector]),t["ɵmpd"](256,t["ɵAPP_ROOT"],!0,[])])});s.platformBrowser().bootstrapModuleFactory(d).catch(function(e){return console.error(e)})}]); -------------------------------------------------------------------------------- /test-angular-elements/extern/custom-elements.min.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | 'use strict';var h=new function(){};var aa=new Set("annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "));function m(b){var a=aa.has(b);b=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(b);return!a&&b}function n(b){var a=b.isConnected;if(void 0!==a)return a;for(;b&&!(b.__CE_isImportDocument||b instanceof Document);)b=b.parentNode||(window.ShadowRoot&&b instanceof ShadowRoot?b.host:void 0);return!(!b||!(b.__CE_isImportDocument||b instanceof Document))} 3 | function p(b,a){for(;a&&a!==b&&!a.nextSibling;)a=a.parentNode;return a&&a!==b?a.nextSibling:null} 4 | function t(b,a,c){c=c?c:new Set;for(var d=b;d;){if(d.nodeType===Node.ELEMENT_NODE){var e=d;a(e);var f=e.localName;if("link"===f&&"import"===e.getAttribute("rel")){d=e.import;if(d instanceof Node&&!c.has(d))for(c.add(d),d=d.firstChild;d;d=d.nextSibling)t(d,a,c);d=p(b,e);continue}else if("template"===f){d=p(b,e);continue}if(e=e.__CE_shadowRoot)for(e=e.firstChild;e;e=e.nextSibling)t(e,a,c)}d=d.firstChild?d.firstChild:p(b,d)}}function u(b,a,c){b[a]=c};function v(){this.a=new Map;this.s=new Map;this.f=[];this.b=!1}function ba(b,a,c){b.a.set(a,c);b.s.set(c.constructor,c)}function w(b,a){b.b=!0;b.f.push(a)}function x(b,a){b.b&&t(a,function(a){return y(b,a)})}function y(b,a){if(b.b&&!a.__CE_patched){a.__CE_patched=!0;for(var c=0;c 0) && !(r = i.next()).done) ar.push(r.value); 48 | } 49 | catch (error) { e = { error: error }; } 50 | finally { 51 | try { 52 | if (r && !r.done && (m = i["return"])) m.call(i); 53 | } 54 | finally { if (e) throw e.error; } 55 | } 56 | return ar; 57 | } 58 | 59 | function __spread() { 60 | for (var ar = [], i = 0; i < arguments.length; i++) 61 | ar = ar.concat(__read(arguments[i])); 62 | return ar; 63 | } 64 | 65 | /** 66 | * @license 67 | * Copyright Google Inc. All Rights Reserved. 68 | * 69 | * Use of this source code is governed by an MIT-style license that can be 70 | * found in the LICENSE file at https://angular.io/license 71 | */ 72 | var elProto = Element.prototype; 73 | var matches = elProto.matches || elProto.matchesSelector || elProto.mozMatchesSelector || 74 | elProto.msMatchesSelector || elProto.oMatchesSelector || elProto.webkitMatchesSelector; 75 | /** 76 | * Provide methods for scheduling the execution of a callback. 77 | */ 78 | var scheduler = { 79 | /** 80 | * Schedule a callback to be called after some delay. 81 | * 82 | * Returns a function that when executed will cancel the scheduled function. 83 | */ 84 | schedule: function (taskFn, delay) { var id = setTimeout(taskFn, delay); return function () { return clearTimeout(id); }; }, 85 | /** 86 | * Schedule a callback to be called before the next render. 87 | * (If `window.requestAnimationFrame()` is not available, use `scheduler.schedule()` instead.) 88 | * 89 | * Returns a function that when executed will cancel the scheduled function. 90 | */ 91 | scheduleBeforeRender: function (taskFn) { 92 | // TODO(gkalpak): Implement a better way of accessing `requestAnimationFrame()` 93 | // (e.g. accounting for vendor prefix, SSR-compatibility, etc). 94 | if (typeof window === 'undefined') { 95 | // For SSR just schedule immediately. 96 | return scheduler.schedule(taskFn, 0); 97 | } 98 | if (typeof window.requestAnimationFrame === 'undefined') { 99 | var frameMs = 16; 100 | return scheduler.schedule(taskFn, frameMs); 101 | } 102 | var id = window.requestAnimationFrame(taskFn); 103 | return function () { return window.cancelAnimationFrame(id); }; 104 | }, 105 | }; 106 | /** 107 | * Convert a camelCased string to kebab-cased. 108 | */ 109 | function camelToDashCase(input) { 110 | return input.replace(/[A-Z]/g, function (char) { return "-" + char.toLowerCase(); }); 111 | } 112 | /** 113 | * Create a `CustomEvent` (even on browsers where `CustomEvent` is not a constructor). 114 | */ 115 | function createCustomEvent(doc, name, detail) { 116 | var bubbles = false; 117 | var cancelable = false; 118 | // On IE9-11, `CustomEvent` is not a constructor. 119 | if (typeof CustomEvent !== 'function') { 120 | var event_1 = doc.createEvent('CustomEvent'); 121 | event_1.initCustomEvent(name, bubbles, cancelable, detail); 122 | return event_1; 123 | } 124 | return new CustomEvent(name, { bubbles: bubbles, cancelable: cancelable, detail: detail }); 125 | } 126 | /** 127 | * Check whether the input is an `Element`. 128 | */ 129 | function isElement(node) { 130 | return node.nodeType === Node.ELEMENT_NODE; 131 | } 132 | /** 133 | * Check whether the input is a function. 134 | */ 135 | function isFunction(value) { 136 | return typeof value === 'function'; 137 | } 138 | /** 139 | * Check whether an `Element` matches a CSS selector. 140 | */ 141 | function matchesSelector(element, selector) { 142 | return matches.call(element, selector); 143 | } 144 | /** 145 | * Test two values for strict equality, accounting for the fact that `NaN !== NaN`. 146 | */ 147 | function strictEquals(value1, value2) { 148 | return value1 === value2 || (value1 !== value1 && value2 !== value2); 149 | } 150 | /** Gets a map of default set of attributes to observe and the properties they affect. */ 151 | function getDefaultAttributeToPropertyInputs(inputs) { 152 | var attributeToPropertyInputs = {}; 153 | inputs.forEach(function (_a) { 154 | var propName = _a.propName, templateName = _a.templateName; 155 | attributeToPropertyInputs[camelToDashCase(templateName)] = propName; 156 | }); 157 | return attributeToPropertyInputs; 158 | } 159 | /** 160 | * Gets a component's set of inputs. Uses the injector to get the component factory where the inputs 161 | * are defined. 162 | */ 163 | function getComponentInputs(component, injector) { 164 | var componentFactoryResolver = injector.get(core.ComponentFactoryResolver); 165 | var componentFactory = componentFactoryResolver.resolveComponentFactory(component); 166 | return componentFactory.inputs; 167 | } 168 | 169 | /** 170 | * @license 171 | * Copyright Google Inc. All Rights Reserved. 172 | * 173 | * Use of this source code is governed by an MIT-style license that can be 174 | * found in the LICENSE file at https://angular.io/license 175 | */ 176 | function extractProjectableNodes(host, ngContentSelectors) { 177 | var nodes = host.childNodes; 178 | var projectableNodes = ngContentSelectors.map(function () { return []; }); 179 | var wildcardIndex = -1; 180 | ngContentSelectors.some(function (selector, i) { 181 | if (selector === '*') { 182 | wildcardIndex = i; 183 | return true; 184 | } 185 | return false; 186 | }); 187 | for (var i = 0, ii = nodes.length; i < ii; ++i) { 188 | var node = nodes[i]; 189 | var ngContentIndex = findMatchingIndex(node, ngContentSelectors, wildcardIndex); 190 | if (ngContentIndex !== -1) { 191 | projectableNodes[ngContentIndex].push(node); 192 | } 193 | } 194 | return projectableNodes; 195 | } 196 | function findMatchingIndex(node, selectors, defaultIndex) { 197 | var matchingIndex = defaultIndex; 198 | if (isElement(node)) { 199 | selectors.some(function (selector, i) { 200 | if ((selector !== '*') && matchesSelector(node, selector)) { 201 | matchingIndex = i; 202 | return true; 203 | } 204 | return false; 205 | }); 206 | } 207 | return matchingIndex; 208 | } 209 | 210 | /** 211 | * @license 212 | * Copyright Google Inc. All Rights Reserved. 213 | * 214 | * Use of this source code is governed by an MIT-style license that can be 215 | * found in the LICENSE file at https://angular.io/license 216 | */ 217 | /** Time in milliseconds to wait before destroying the component ref when disconnected. */ 218 | var DESTROY_DELAY = 10; 219 | /** 220 | * Factory that creates new ComponentNgElementStrategy instance. Gets the component factory with the 221 | * constructor's injector's factory resolver and passes that factory to each strategy. 222 | * 223 | * @experimental 224 | */ 225 | var ComponentNgElementStrategyFactory = /** @class */ (function () { 226 | function ComponentNgElementStrategyFactory(component, injector) { 227 | this.component = component; 228 | this.injector = injector; 229 | this.componentFactory = 230 | injector.get(core.ComponentFactoryResolver).resolveComponentFactory(component); 231 | } 232 | ComponentNgElementStrategyFactory.prototype.create = function (injector) { 233 | return new ComponentNgElementStrategy(this.componentFactory, injector); 234 | }; 235 | return ComponentNgElementStrategyFactory; 236 | }()); 237 | /** 238 | * Creates and destroys a component ref using a component factory and handles change detection 239 | * in response to input changes. 240 | * 241 | * @experimental 242 | */ 243 | var ComponentNgElementStrategy = /** @class */ (function () { 244 | function ComponentNgElementStrategy(componentFactory, injector) { 245 | this.componentFactory = componentFactory; 246 | this.injector = injector; 247 | /** Changes that have been made to the component ref since the last time onChanges was called. */ 248 | this.inputChanges = null; 249 | /** Whether the created component implements the onChanges function. */ 250 | this.implementsOnChanges = false; 251 | /** Whether a change detection has been scheduled to run on the component. */ 252 | this.scheduledChangeDetectionFn = null; 253 | /** Callback function that when called will cancel a scheduled destruction on the component. */ 254 | this.scheduledDestroyFn = null; 255 | /** Initial input values that were set before the component was created. */ 256 | this.initialInputValues = new Map(); 257 | /** Set of inputs that were not initially set when the component was created. */ 258 | this.uninitializedInputs = new Set(); 259 | } 260 | /** 261 | * Initializes a new component if one has not yet been created and cancels any scheduled 262 | * destruction. 263 | */ 264 | ComponentNgElementStrategy.prototype.connect = function (element) { 265 | // If the element is marked to be destroyed, cancel the task since the component was reconnected 266 | if (this.scheduledDestroyFn !== null) { 267 | this.scheduledDestroyFn(); 268 | this.scheduledDestroyFn = null; 269 | return; 270 | } 271 | if (!this.componentRef) { 272 | this.initializeComponent(element); 273 | } 274 | }; 275 | /** 276 | * Schedules the component to be destroyed after some small delay in case the element is just 277 | * being moved across the DOM. 278 | */ 279 | ComponentNgElementStrategy.prototype.disconnect = function () { 280 | var _this = this; 281 | // Return if there is no componentRef or the component is already scheduled for destruction 282 | if (!this.componentRef || this.scheduledDestroyFn !== null) { 283 | return; 284 | } 285 | // Schedule the component to be destroyed after a small timeout in case it is being 286 | // moved elsewhere in the DOM 287 | this.scheduledDestroyFn = scheduler.schedule(function () { 288 | if (_this.componentRef) { 289 | _this.componentRef.destroy(); 290 | _this.componentRef = null; 291 | } 292 | }, DESTROY_DELAY); 293 | }; 294 | /** 295 | * Returns the component property value. If the component has not yet been created, the value is 296 | * retrieved from the cached initialization values. 297 | */ 298 | ComponentNgElementStrategy.prototype.getInputValue = function (property) { 299 | if (!this.componentRef) { 300 | return this.initialInputValues.get(property); 301 | } 302 | return this.componentRef.instance[property]; 303 | }; 304 | /** 305 | * Sets the input value for the property. If the component has not yet been created, the value is 306 | * cached and set when the component is created. 307 | */ 308 | ComponentNgElementStrategy.prototype.setInputValue = function (property, value) { 309 | if (strictEquals(value, this.getInputValue(property))) { 310 | return; 311 | } 312 | if (!this.componentRef) { 313 | this.initialInputValues.set(property, value); 314 | return; 315 | } 316 | this.recordInputChange(property, value); 317 | this.componentRef.instance[property] = value; 318 | this.scheduleDetectChanges(); 319 | }; 320 | /** 321 | * Creates a new component through the component factory with the provided element host and 322 | * sets up its initial inputs, listens for outputs changes, and runs an initial change detection. 323 | */ 324 | ComponentNgElementStrategy.prototype.initializeComponent = function (element) { 325 | var childInjector = core.Injector.create({ providers: [], parent: this.injector }); 326 | var projectableNodes = extractProjectableNodes(element, this.componentFactory.ngContentSelectors); 327 | this.componentRef = this.componentFactory.create(childInjector, projectableNodes, element); 328 | this.implementsOnChanges = 329 | isFunction(this.componentRef.instance.ngOnChanges); 330 | this.initializeInputs(); 331 | this.initializeOutputs(); 332 | this.detectChanges(); 333 | var applicationRef = this.injector.get(core.ApplicationRef); 334 | applicationRef.attachView(this.componentRef.hostView); 335 | }; 336 | /** Set any stored initial inputs on the component's properties. */ 337 | ComponentNgElementStrategy.prototype.initializeInputs = function () { 338 | var _this = this; 339 | this.componentFactory.inputs.forEach(function (_a) { 340 | var propName = _a.propName; 341 | var initialValue = _this.initialInputValues.get(propName); 342 | if (initialValue) { 343 | _this.setInputValue(propName, initialValue); 344 | } 345 | else { 346 | // Keep track of inputs that were not initialized in case we need to know this for 347 | // calling ngOnChanges with SimpleChanges 348 | _this.uninitializedInputs.add(propName); 349 | } 350 | }); 351 | this.initialInputValues.clear(); 352 | }; 353 | /** Sets up listeners for the component's outputs so that the events stream emits the events. */ 354 | ComponentNgElementStrategy.prototype.initializeOutputs = function () { 355 | var _this = this; 356 | var eventEmitters = this.componentFactory.outputs.map(function (_a) { 357 | var propName = _a.propName, templateName = _a.templateName; 358 | var emitter = _this.componentRef.instance[propName]; 359 | return emitter.pipe(operators.map(function (value) { return ({ name: templateName, value: value }); })); 360 | }); 361 | this.events = rxjs.merge.apply(void 0, __spread(eventEmitters)); 362 | }; 363 | /** Calls ngOnChanges with all the inputs that have changed since the last call. */ 364 | ComponentNgElementStrategy.prototype.callNgOnChanges = function () { 365 | if (!this.implementsOnChanges || this.inputChanges === null) { 366 | return; 367 | } 368 | // Cache the changes and set inputChanges to null to capture any changes that might occur 369 | // during ngOnChanges. 370 | var inputChanges = this.inputChanges; 371 | this.inputChanges = null; 372 | this.componentRef.instance.ngOnChanges(inputChanges); 373 | }; 374 | /** 375 | * Schedules change detection to run on the component. 376 | * Ignores subsequent calls if already scheduled. 377 | */ 378 | ComponentNgElementStrategy.prototype.scheduleDetectChanges = function () { 379 | var _this = this; 380 | if (this.scheduledChangeDetectionFn) { 381 | return; 382 | } 383 | this.scheduledChangeDetectionFn = scheduler.scheduleBeforeRender(function () { 384 | _this.scheduledChangeDetectionFn = null; 385 | _this.detectChanges(); 386 | }); 387 | }; 388 | /** 389 | * Records input changes so that the component receives SimpleChanges in its onChanges function. 390 | */ 391 | ComponentNgElementStrategy.prototype.recordInputChange = function (property, currentValue) { 392 | // Do not record the change if the component does not implement `OnChanges`. 393 | if (this.componentRef && !this.implementsOnChanges) { 394 | return; 395 | } 396 | if (this.inputChanges === null) { 397 | this.inputChanges = {}; 398 | } 399 | // If there already is a change, modify the current value to match but leave the values for 400 | // previousValue and isFirstChange. 401 | var pendingChange = this.inputChanges[property]; 402 | if (pendingChange) { 403 | pendingChange.currentValue = currentValue; 404 | return; 405 | } 406 | var isFirstChange = this.uninitializedInputs.has(property); 407 | this.uninitializedInputs.delete(property); 408 | var previousValue = isFirstChange ? undefined : this.getInputValue(property); 409 | this.inputChanges[property] = new core.SimpleChange(previousValue, currentValue, isFirstChange); 410 | }; 411 | /** Runs change detection on the component. */ 412 | ComponentNgElementStrategy.prototype.detectChanges = function () { 413 | if (!this.componentRef) { 414 | return; 415 | } 416 | this.callNgOnChanges(); 417 | this.componentRef.changeDetectorRef.detectChanges(); 418 | }; 419 | return ComponentNgElementStrategy; 420 | }()); 421 | 422 | /** 423 | * @license 424 | * Copyright Google Inc. All Rights Reserved. 425 | * 426 | * Use of this source code is governed by an MIT-style license that can be 427 | * found in the LICENSE file at https://angular.io/license 428 | */ 429 | /** 430 | * Implements the functionality needed for a custom element. 431 | * 432 | * @experimental 433 | */ 434 | var NgElement = /** @class */ (function (_super) { 435 | __extends(NgElement, _super); 436 | function NgElement() { 437 | var _this = _super !== null && _super.apply(this, arguments) || this; 438 | /** 439 | * A subscription to change, connect, and disconnect events in the custom element. 440 | */ 441 | _this.ngElementEventsSubscription = null; 442 | return _this; 443 | } 444 | return NgElement; 445 | }(HTMLElement)); 446 | /** 447 | * @description Creates a custom element class based on an Angular component. 448 | * 449 | * Builds a class that encapsulates the functionality of the provided component and 450 | * uses the configuration information to provide more context to the class. 451 | * Takes the component factory's inputs and outputs to convert them to the proper 452 | * custom element API and add hooks to input changes. 453 | * 454 | * The configuration's injector is the initial injector set on the class, 455 | * and used by default for each created instance.This behavior can be overridden with the 456 | * static property to affect all newly created instances, or as a constructor argument for 457 | * one-off creations. 458 | * 459 | * @param component The component to transform. 460 | * @param config A configuration that provides initialization information to the created class. 461 | * @returns The custom-element construction class, which can be registered with 462 | * a browser's `CustomElementRegistry`. 463 | * 464 | * @experimental 465 | */ 466 | function createCustomElement(component, config) { 467 | var inputs = getComponentInputs(component, config.injector); 468 | var strategyFactory = config.strategyFactory || new ComponentNgElementStrategyFactory(component, config.injector); 469 | var attributeToPropertyInputs = getDefaultAttributeToPropertyInputs(inputs); 470 | var NgElementImpl = /** @class */ (function (_super) { 471 | __extends(NgElementImpl, _super); 472 | function NgElementImpl(injector) { 473 | var _this = _super.call(this) || this; 474 | // Note that some polyfills (e.g. document-register-element) do not call the constructor. 475 | // Do not assume this strategy has been created. 476 | // TODO(andrewseguin): Add e2e tests that cover cases where the constructor isn't called. For 477 | // now this is tested using a Google internal test suite. 478 | _this.ngElementStrategy = strategyFactory.create(injector || config.injector); 479 | return _this; 480 | } 481 | NgElementImpl.prototype.attributeChangedCallback = function (attrName, oldValue, newValue, namespace) { 482 | if (!this.ngElementStrategy) { 483 | this.ngElementStrategy = strategyFactory.create(config.injector); 484 | } 485 | var propName = attributeToPropertyInputs[attrName]; 486 | this.ngElementStrategy.setInputValue(propName, newValue); 487 | }; 488 | NgElementImpl.prototype.connectedCallback = function () { 489 | var _this = this; 490 | if (!this.ngElementStrategy) { 491 | this.ngElementStrategy = strategyFactory.create(config.injector); 492 | } 493 | this.ngElementStrategy.connect(this); 494 | // Listen for events from the strategy and dispatch them as custom events 495 | this.ngElementEventsSubscription = this.ngElementStrategy.events.subscribe(function (e) { 496 | var customEvent = createCustomEvent(_this.ownerDocument, e.name, e.value); 497 | _this.dispatchEvent(customEvent); 498 | }); 499 | }; 500 | NgElementImpl.prototype.disconnectedCallback = function () { 501 | if (this.ngElementStrategy) { 502 | this.ngElementStrategy.disconnect(); 503 | } 504 | if (this.ngElementEventsSubscription) { 505 | this.ngElementEventsSubscription.unsubscribe(); 506 | this.ngElementEventsSubscription = null; 507 | } 508 | }; 509 | // Work around a bug in closure typed optimizations(b/79557487) where it is not honoring static 510 | // field externs. So using quoted access to explicitly prevent renaming. 511 | NgElementImpl['observedAttributes'] = Object.keys(attributeToPropertyInputs); 512 | return NgElementImpl; 513 | }(NgElement)); 514 | // Add getters and setters to the prototype for each property input. If the config does not 515 | // contain property inputs, use all inputs by default. 516 | inputs.map(function (_a) { 517 | var propName = _a.propName; 518 | return propName; 519 | }).forEach(function (property) { 520 | Object.defineProperty(NgElementImpl.prototype, property, { 521 | get: function () { return this.ngElementStrategy.getInputValue(property); }, 522 | set: function (newValue) { this.ngElementStrategy.setInputValue(property, newValue); }, 523 | configurable: true, 524 | enumerable: true, 525 | }); 526 | }); 527 | return NgElementImpl; 528 | } 529 | 530 | /** 531 | * @license 532 | * Copyright Google Inc. All Rights Reserved. 533 | * 534 | * Use of this source code is governed by an MIT-style license that can be 535 | * found in the LICENSE file at https://angular.io/license 536 | */ 537 | /** 538 | * @experimental 539 | */ 540 | var VERSION = new core.Version('6.1.8'); 541 | 542 | /** 543 | * @license 544 | * Copyright Google Inc. All Rights Reserved. 545 | * 546 | * Use of this source code is governed by an MIT-style license that can be 547 | * found in the LICENSE file at https://angular.io/license 548 | */ 549 | // This file only reexports content of the `src` folder. Keep it that way. 550 | 551 | /** 552 | * @license 553 | * Copyright Google Inc. All Rights Reserved. 554 | * 555 | * Use of this source code is governed by an MIT-style license that can be 556 | * found in the LICENSE file at https://angular.io/license 557 | */ 558 | 559 | /** 560 | * Generated bundle index. Do not edit. 561 | */ 562 | 563 | exports.NgElement = NgElement; 564 | exports.createCustomElement = createCustomElement; 565 | exports.VERSION = VERSION; 566 | 567 | Object.defineProperty(exports, '__esModule', { value: true }); 568 | 569 | }))); 570 | //# sourceMappingURL=elements.umd.js.map 571 | -------------------------------------------------------------------------------- /test-angular-elements/extern/native-shim.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5 | * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6 | * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7 | * Code distributed by Google as part of the polymer project is also 8 | * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9 | */ 10 | 11 | /** 12 | * This shim allows elements written in, or compiled to, ES5 to work on native 13 | * implementations of Custom Elements v1. It sets new.target to the value of 14 | * this.constructor so that the native HTMLElement constructor can access the 15 | * current under-construction element's definition. 16 | */ 17 | (function() { 18 | if ( 19 | // No Reflect, no classes, no need for shim because native custom elements 20 | // require ES2015 classes or Reflect. 21 | window.Reflect === undefined || 22 | window.customElements === undefined || 23 | // The webcomponentsjs custom elements polyfill doesn't require 24 | // ES2015-compatible construction (`super()` or `Reflect.construct`). 25 | window.customElements.hasOwnProperty('polyfillWrapFlushCallback') 26 | ) { 27 | return; 28 | } 29 | const BuiltInHTMLElement = HTMLElement; 30 | window.HTMLElement = function HTMLElement() { 31 | return Reflect.construct(BuiltInHTMLElement, [], this.constructor); 32 | }; 33 | HTMLElement.prototype = BuiltInHTMLElement.prototype; 34 | HTMLElement.prototype.constructor = HTMLElement; 35 | Object.setPrototypeOf(HTMLElement, BuiltInHTMLElement); 36 | })(); 37 | -------------------------------------------------------------------------------- /test-angular-elements/extern/platform-browser-dynamic.umd.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license Angular v6.1.0 3 | * (c) 2010-2018 Google, Inc. https://angular.io/ 4 | * License: MIT 5 | */ 6 | 7 | (function (global, factory) { 8 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/compiler'), require('@angular/core'), require('@angular/common'), require('@angular/platform-browser')) : 9 | typeof define === 'function' && define.amd ? define('@angular/platform-browser-dynamic', ['exports', '@angular/compiler', '@angular/core', '@angular/common', '@angular/platform-browser'], factory) : 10 | (factory((global.ng = global.ng || {}, global.ng.platformBrowserDynamic = {}),global.ng.compiler,global.ng.core,global.ng.common,global.ng.platformBrowser)); 11 | }(this, (function (exports,compiler,core,common,platformBrowser) { 'use strict'; 12 | 13 | /*! ***************************************************************************** 14 | Copyright (c) Microsoft Corporation. All rights reserved. 15 | Licensed under the Apache License, Version 2.0 (the "License"); you may not use 16 | this file except in compliance with the License. You may obtain a copy of the 17 | License at http://www.apache.org/licenses/LICENSE-2.0 18 | 19 | THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 20 | KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED 21 | WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, 22 | MERCHANTABLITY OR NON-INFRINGEMENT. 23 | 24 | See the Apache Version 2.0 License for specific language governing permissions 25 | and limitations under the License. 26 | ***************************************************************************** */ 27 | /* global Reflect, Promise */ 28 | 29 | var extendStatics = Object.setPrototypeOf || 30 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || 31 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; 32 | 33 | function __extends(d, b) { 34 | extendStatics(d, b); 35 | function __() { this.constructor = d; } 36 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 37 | } 38 | 39 | function __read(o, n) { 40 | var m = typeof Symbol === "function" && o[Symbol.iterator]; 41 | if (!m) return o; 42 | var i = m.call(o), r, ar = [], e; 43 | try { 44 | while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value); 45 | } 46 | catch (error) { e = { error: error }; } 47 | finally { 48 | try { 49 | if (r && !r.done && (m = i["return"])) m.call(i); 50 | } 51 | finally { if (e) throw e.error; } 52 | } 53 | return ar; 54 | } 55 | 56 | function __spread() { 57 | for (var ar = [], i = 0; i < arguments.length; i++) 58 | ar = ar.concat(__read(arguments[i])); 59 | return ar; 60 | } 61 | 62 | /** 63 | * @license 64 | * Copyright Google Inc. All Rights Reserved. 65 | * 66 | * Use of this source code is governed by an MIT-style license that can be 67 | * found in the LICENSE file at https://angular.io/license 68 | */ 69 | var MODULE_SUFFIX = ''; 70 | var builtinExternalReferences = createBuiltinExternalReferencesMap(); 71 | var JitReflector = /** @class */ (function () { 72 | function JitReflector() { 73 | this.builtinExternalReferences = new Map(); 74 | this.reflectionCapabilities = new core.ɵReflectionCapabilities(); 75 | } 76 | JitReflector.prototype.componentModuleUrl = function (type, cmpMetadata) { 77 | var moduleId = cmpMetadata.moduleId; 78 | if (typeof moduleId === 'string') { 79 | var scheme = compiler.getUrlScheme(moduleId); 80 | return scheme ? moduleId : "package:" + moduleId + MODULE_SUFFIX; 81 | } 82 | else if (moduleId !== null && moduleId !== void 0) { 83 | throw compiler.syntaxError("moduleId should be a string in \"" + core.ɵstringify(type) + "\". See https://goo.gl/wIDDiL for more information.\n" + 84 | "If you're using Webpack you should inline the template and the styles, see https://goo.gl/X2J8zc."); 85 | } 86 | return "./" + core.ɵstringify(type); 87 | }; 88 | JitReflector.prototype.parameters = function (typeOrFunc) { 89 | return this.reflectionCapabilities.parameters(typeOrFunc); 90 | }; 91 | JitReflector.prototype.tryAnnotations = function (typeOrFunc) { return this.annotations(typeOrFunc); }; 92 | JitReflector.prototype.annotations = function (typeOrFunc) { 93 | return this.reflectionCapabilities.annotations(typeOrFunc); 94 | }; 95 | JitReflector.prototype.shallowAnnotations = function (typeOrFunc) { 96 | throw new Error('Not supported in JIT mode'); 97 | }; 98 | JitReflector.prototype.propMetadata = function (typeOrFunc) { 99 | return this.reflectionCapabilities.propMetadata(typeOrFunc); 100 | }; 101 | JitReflector.prototype.hasLifecycleHook = function (type, lcProperty) { 102 | return this.reflectionCapabilities.hasLifecycleHook(type, lcProperty); 103 | }; 104 | JitReflector.prototype.guards = function (type) { return this.reflectionCapabilities.guards(type); }; 105 | JitReflector.prototype.resolveExternalReference = function (ref) { 106 | return builtinExternalReferences.get(ref) || ref.runtime; 107 | }; 108 | return JitReflector; 109 | }()); 110 | function createBuiltinExternalReferencesMap() { 111 | var map = new Map(); 112 | map.set(compiler.Identifiers.ANALYZE_FOR_ENTRY_COMPONENTS, core.ANALYZE_FOR_ENTRY_COMPONENTS); 113 | map.set(compiler.Identifiers.ElementRef, core.ElementRef); 114 | map.set(compiler.Identifiers.NgModuleRef, core.NgModuleRef); 115 | map.set(compiler.Identifiers.ViewContainerRef, core.ViewContainerRef); 116 | map.set(compiler.Identifiers.ChangeDetectorRef, core.ChangeDetectorRef); 117 | map.set(compiler.Identifiers.QueryList, core.QueryList); 118 | map.set(compiler.Identifiers.TemplateRef, core.TemplateRef); 119 | map.set(compiler.Identifiers.CodegenComponentFactoryResolver, core.ɵCodegenComponentFactoryResolver); 120 | map.set(compiler.Identifiers.ComponentFactoryResolver, core.ComponentFactoryResolver); 121 | map.set(compiler.Identifiers.ComponentFactory, core.ComponentFactory); 122 | map.set(compiler.Identifiers.ComponentRef, core.ComponentRef); 123 | map.set(compiler.Identifiers.NgModuleFactory, core.NgModuleFactory); 124 | map.set(compiler.Identifiers.createModuleFactory, core.ɵcmf); 125 | map.set(compiler.Identifiers.moduleDef, core.ɵmod); 126 | map.set(compiler.Identifiers.moduleProviderDef, core.ɵmpd); 127 | map.set(compiler.Identifiers.RegisterModuleFactoryFn, core.ɵregisterModuleFactory); 128 | map.set(compiler.Identifiers.Injector, core.Injector); 129 | map.set(compiler.Identifiers.ViewEncapsulation, core.ViewEncapsulation); 130 | map.set(compiler.Identifiers.ChangeDetectionStrategy, core.ChangeDetectionStrategy); 131 | map.set(compiler.Identifiers.SecurityContext, core.SecurityContext); 132 | map.set(compiler.Identifiers.LOCALE_ID, core.LOCALE_ID); 133 | map.set(compiler.Identifiers.TRANSLATIONS_FORMAT, core.TRANSLATIONS_FORMAT); 134 | map.set(compiler.Identifiers.inlineInterpolate, core.ɵinlineInterpolate); 135 | map.set(compiler.Identifiers.interpolate, core.ɵinterpolate); 136 | map.set(compiler.Identifiers.EMPTY_ARRAY, core.ɵEMPTY_ARRAY); 137 | map.set(compiler.Identifiers.EMPTY_MAP, core.ɵEMPTY_MAP); 138 | map.set(compiler.Identifiers.Renderer, core.Renderer); 139 | map.set(compiler.Identifiers.viewDef, core.ɵvid); 140 | map.set(compiler.Identifiers.elementDef, core.ɵeld); 141 | map.set(compiler.Identifiers.anchorDef, core.ɵand); 142 | map.set(compiler.Identifiers.textDef, core.ɵted); 143 | map.set(compiler.Identifiers.directiveDef, core.ɵdid); 144 | map.set(compiler.Identifiers.providerDef, core.ɵprd); 145 | map.set(compiler.Identifiers.queryDef, core.ɵqud); 146 | map.set(compiler.Identifiers.pureArrayDef, core.ɵpad); 147 | map.set(compiler.Identifiers.pureObjectDef, core.ɵpod); 148 | map.set(compiler.Identifiers.purePipeDef, core.ɵppd); 149 | map.set(compiler.Identifiers.pipeDef, core.ɵpid); 150 | map.set(compiler.Identifiers.nodeValue, core.ɵnov); 151 | map.set(compiler.Identifiers.ngContentDef, core.ɵncd); 152 | map.set(compiler.Identifiers.unwrapValue, core.ɵunv); 153 | map.set(compiler.Identifiers.createRendererType2, core.ɵcrt); 154 | map.set(compiler.Identifiers.createComponentFactory, core.ɵccf); 155 | return map; 156 | } 157 | 158 | /** 159 | * @license 160 | * Copyright Google Inc. All Rights Reserved. 161 | * 162 | * Use of this source code is governed by an MIT-style license that can be 163 | * found in the LICENSE file at https://angular.io/license 164 | */ 165 | var ERROR_COLLECTOR_TOKEN = new core.InjectionToken('ErrorCollector'); 166 | /** 167 | * A default provider for {@link PACKAGE_ROOT_URL} that maps to '/'. 168 | */ 169 | var DEFAULT_PACKAGE_URL_PROVIDER = { 170 | provide: core.PACKAGE_ROOT_URL, 171 | useValue: '/' 172 | }; 173 | var _NO_RESOURCE_LOADER = { 174 | get: function (url) { 175 | throw new Error("No ResourceLoader implementation has been provided. Can't read the url \"" + url + "\""); 176 | } 177 | }; 178 | var baseHtmlParser = new core.InjectionToken('HtmlParser'); 179 | var CompilerImpl = /** @class */ (function () { 180 | function CompilerImpl(injector, _metadataResolver, templateParser, styleCompiler, viewCompiler, ngModuleCompiler, summaryResolver, compileReflector, compilerConfig, console) { 181 | this._metadataResolver = _metadataResolver; 182 | this._delegate = new compiler.JitCompiler(_metadataResolver, templateParser, styleCompiler, viewCompiler, ngModuleCompiler, summaryResolver, compileReflector, compilerConfig, console, this.getExtraNgModuleProviders.bind(this)); 183 | this.injector = injector; 184 | } 185 | CompilerImpl.prototype.getExtraNgModuleProviders = function () { 186 | return [this._metadataResolver.getProviderMetadata(new compiler.ProviderMeta(core.Compiler, { useValue: this }))]; 187 | }; 188 | CompilerImpl.prototype.compileModuleSync = function (moduleType) { 189 | return this._delegate.compileModuleSync(moduleType); 190 | }; 191 | CompilerImpl.prototype.compileModuleAsync = function (moduleType) { 192 | return this._delegate.compileModuleAsync(moduleType); 193 | }; 194 | CompilerImpl.prototype.compileModuleAndAllComponentsSync = function (moduleType) { 195 | var result = this._delegate.compileModuleAndAllComponentsSync(moduleType); 196 | return { 197 | ngModuleFactory: result.ngModuleFactory, 198 | componentFactories: result.componentFactories, 199 | }; 200 | }; 201 | CompilerImpl.prototype.compileModuleAndAllComponentsAsync = function (moduleType) { 202 | return this._delegate.compileModuleAndAllComponentsAsync(moduleType) 203 | .then(function (result) { return ({ 204 | ngModuleFactory: result.ngModuleFactory, 205 | componentFactories: result.componentFactories, 206 | }); }); 207 | }; 208 | CompilerImpl.prototype.loadAotSummaries = function (summaries) { this._delegate.loadAotSummaries(summaries); }; 209 | CompilerImpl.prototype.hasAotSummary = function (ref) { return this._delegate.hasAotSummary(ref); }; 210 | CompilerImpl.prototype.getComponentFactory = function (component) { 211 | return this._delegate.getComponentFactory(component); 212 | }; 213 | CompilerImpl.prototype.clearCache = function () { this._delegate.clearCache(); }; 214 | CompilerImpl.prototype.clearCacheFor = function (type) { this._delegate.clearCacheFor(type); }; 215 | CompilerImpl.prototype.getModuleId = function (moduleType) { 216 | var meta = this._metadataResolver.getNgModuleMetadata(moduleType); 217 | return meta && meta.id || undefined; 218 | }; 219 | return CompilerImpl; 220 | }()); 221 | /** 222 | * A set of providers that provide `JitCompiler` and its dependencies to use for 223 | * template compilation. 224 | */ 225 | var COMPILER_PROVIDERS = [ 226 | { provide: compiler.CompileReflector, useValue: new JitReflector() }, 227 | { provide: compiler.ResourceLoader, useValue: _NO_RESOURCE_LOADER }, 228 | { provide: compiler.JitSummaryResolver, deps: [] }, 229 | { provide: compiler.SummaryResolver, useExisting: compiler.JitSummaryResolver }, 230 | { provide: core.ɵConsole, deps: [] }, 231 | { provide: compiler.Lexer, deps: [] }, 232 | { provide: compiler.Parser, deps: [compiler.Lexer] }, 233 | { 234 | provide: baseHtmlParser, 235 | useClass: compiler.HtmlParser, 236 | deps: [], 237 | }, 238 | { 239 | provide: compiler.I18NHtmlParser, 240 | useFactory: function (parser, translations, format, config, console) { 241 | translations = translations || ''; 242 | var missingTranslation = translations ? config.missingTranslation : core.MissingTranslationStrategy.Ignore; 243 | return new compiler.I18NHtmlParser(parser, translations, format, missingTranslation, console); 244 | }, 245 | deps: [ 246 | baseHtmlParser, 247 | [new core.Optional(), new core.Inject(core.TRANSLATIONS)], 248 | [new core.Optional(), new core.Inject(core.TRANSLATIONS_FORMAT)], 249 | [compiler.CompilerConfig], 250 | [core.ɵConsole], 251 | ] 252 | }, 253 | { 254 | provide: compiler.HtmlParser, 255 | useExisting: compiler.I18NHtmlParser, 256 | }, 257 | { 258 | provide: compiler.TemplateParser, deps: [compiler.CompilerConfig, compiler.CompileReflector, 259 | compiler.Parser, compiler.ElementSchemaRegistry, 260 | compiler.I18NHtmlParser, core.ɵConsole] 261 | }, 262 | { provide: compiler.DirectiveNormalizer, deps: [compiler.ResourceLoader, compiler.UrlResolver, compiler.HtmlParser, compiler.CompilerConfig] }, 263 | { provide: compiler.CompileMetadataResolver, deps: [compiler.CompilerConfig, compiler.HtmlParser, compiler.NgModuleResolver, 264 | compiler.DirectiveResolver, compiler.PipeResolver, 265 | compiler.SummaryResolver, 266 | compiler.ElementSchemaRegistry, 267 | compiler.DirectiveNormalizer, core.ɵConsole, 268 | [core.Optional, compiler.StaticSymbolCache], 269 | compiler.CompileReflector, 270 | [core.Optional, ERROR_COLLECTOR_TOKEN]] }, 271 | DEFAULT_PACKAGE_URL_PROVIDER, 272 | { provide: compiler.StyleCompiler, deps: [compiler.UrlResolver] }, 273 | { provide: compiler.ViewCompiler, deps: [compiler.CompileReflector] }, 274 | { provide: compiler.NgModuleCompiler, deps: [compiler.CompileReflector] }, 275 | { provide: compiler.CompilerConfig, useValue: new compiler.CompilerConfig() }, 276 | { provide: core.Compiler, useClass: CompilerImpl, deps: [core.Injector, compiler.CompileMetadataResolver, 277 | compiler.TemplateParser, compiler.StyleCompiler, 278 | compiler.ViewCompiler, compiler.NgModuleCompiler, 279 | compiler.SummaryResolver, compiler.CompileReflector, compiler.CompilerConfig, 280 | core.ɵConsole] }, 281 | { provide: compiler.DomElementSchemaRegistry, deps: [] }, 282 | { provide: compiler.ElementSchemaRegistry, useExisting: compiler.DomElementSchemaRegistry }, 283 | { provide: compiler.UrlResolver, deps: [core.PACKAGE_ROOT_URL] }, 284 | { provide: compiler.DirectiveResolver, deps: [compiler.CompileReflector] }, 285 | { provide: compiler.PipeResolver, deps: [compiler.CompileReflector] }, 286 | { provide: compiler.NgModuleResolver, deps: [compiler.CompileReflector] }, 287 | ]; 288 | /** 289 | * @experimental 290 | */ 291 | var JitCompilerFactory = /** @class */ (function () { 292 | /* @internal */ 293 | function JitCompilerFactory(defaultOptions) { 294 | var compilerOptions = { 295 | useJit: true, 296 | defaultEncapsulation: core.ViewEncapsulation.Emulated, 297 | missingTranslation: core.MissingTranslationStrategy.Warning, 298 | }; 299 | this._defaultOptions = __spread([compilerOptions], defaultOptions); 300 | } 301 | JitCompilerFactory.prototype.createCompiler = function (options) { 302 | if (options === void 0) { options = []; } 303 | var opts = _mergeOptions(this._defaultOptions.concat(options)); 304 | var injector = core.Injector.create([ 305 | COMPILER_PROVIDERS, { 306 | provide: compiler.CompilerConfig, 307 | useFactory: function () { 308 | return new compiler.CompilerConfig({ 309 | // let explicit values from the compiler options overwrite options 310 | // from the app providers 311 | useJit: opts.useJit, 312 | jitDevMode: core.isDevMode(), 313 | // let explicit values from the compiler options overwrite options 314 | // from the app providers 315 | defaultEncapsulation: opts.defaultEncapsulation, 316 | missingTranslation: opts.missingTranslation, 317 | preserveWhitespaces: opts.preserveWhitespaces, 318 | }); 319 | }, 320 | deps: [] 321 | }, 322 | opts.providers 323 | ]); 324 | return injector.get(core.Compiler); 325 | }; 326 | return JitCompilerFactory; 327 | }()); 328 | function _mergeOptions(optionsArr) { 329 | return { 330 | useJit: _lastDefined(optionsArr.map(function (options) { return options.useJit; })), 331 | defaultEncapsulation: _lastDefined(optionsArr.map(function (options) { return options.defaultEncapsulation; })), 332 | providers: _mergeArrays(optionsArr.map(function (options) { return options.providers; })), 333 | missingTranslation: _lastDefined(optionsArr.map(function (options) { return options.missingTranslation; })), 334 | preserveWhitespaces: _lastDefined(optionsArr.map(function (options) { return options.preserveWhitespaces; })), 335 | }; 336 | } 337 | function _lastDefined(args) { 338 | for (var i = args.length - 1; i >= 0; i--) { 339 | if (args[i] !== undefined) { 340 | return args[i]; 341 | } 342 | } 343 | return undefined; 344 | } 345 | function _mergeArrays(parts) { 346 | var result = []; 347 | parts.forEach(function (part) { return part && result.push.apply(result, __spread(part)); }); 348 | return result; 349 | } 350 | 351 | /** 352 | * @license 353 | * Copyright Google Inc. All Rights Reserved. 354 | * 355 | * Use of this source code is governed by an MIT-style license that can be 356 | * found in the LICENSE file at https://angular.io/license 357 | */ 358 | /** 359 | * A platform that included corePlatform and the compiler. 360 | * 361 | * @experimental 362 | */ 363 | var platformCoreDynamic = core.createPlatformFactory(core.platformCore, 'coreDynamic', [ 364 | { provide: core.COMPILER_OPTIONS, useValue: {}, multi: true }, 365 | { provide: core.CompilerFactory, useClass: JitCompilerFactory, deps: [core.COMPILER_OPTIONS] }, 366 | ]); 367 | 368 | var ResourceLoaderImpl = /** @class */ (function (_super) { 369 | __extends(ResourceLoaderImpl, _super); 370 | function ResourceLoaderImpl() { 371 | return _super !== null && _super.apply(this, arguments) || this; 372 | } 373 | ResourceLoaderImpl.prototype.get = function (url) { 374 | var resolve; 375 | var reject; 376 | var promise = new Promise(function (res, rej) { 377 | resolve = res; 378 | reject = rej; 379 | }); 380 | var xhr = new XMLHttpRequest(); 381 | xhr.open('GET', url, true); 382 | xhr.responseType = 'text'; 383 | xhr.onload = function () { 384 | // responseText is the old-school way of retrieving response (supported by IE8 & 9) 385 | // response/responseType properties were introduced in ResourceLoader Level2 spec (supported 386 | // by IE10) 387 | var response = xhr.response || xhr.responseText; 388 | // normalize IE9 bug (http://bugs.jquery.com/ticket/1450) 389 | var status = xhr.status === 1223 ? 204 : xhr.status; 390 | // fix status code when it is 0 (0 status is undocumented). 391 | // Occurs when accessing file resources or on Android 4.1 stock browser 392 | // while retrieving files from application cache. 393 | if (status === 0) { 394 | status = response ? 200 : 0; 395 | } 396 | if (200 <= status && status <= 300) { 397 | resolve(response); 398 | } 399 | else { 400 | reject("Failed to load " + url); 401 | } 402 | }; 403 | xhr.onerror = function () { reject("Failed to load " + url); }; 404 | xhr.send(); 405 | return promise; 406 | }; 407 | ResourceLoaderImpl.decorators = [ 408 | { type: core.Injectable } 409 | ]; 410 | return ResourceLoaderImpl; 411 | }(compiler.ResourceLoader)); 412 | 413 | /** 414 | * @license 415 | * Copyright Google Inc. All Rights Reserved. 416 | * 417 | * Use of this source code is governed by an MIT-style license that can be 418 | * found in the LICENSE file at https://angular.io/license 419 | */ 420 | var INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS = [ 421 | platformBrowser.ɵINTERNAL_BROWSER_PLATFORM_PROVIDERS, 422 | { 423 | provide: core.COMPILER_OPTIONS, 424 | useValue: { providers: [{ provide: compiler.ResourceLoader, useClass: ResourceLoaderImpl, deps: [] }] }, 425 | multi: true 426 | }, 427 | { provide: core.PLATFORM_ID, useValue: common.ɵPLATFORM_BROWSER_ID }, 428 | ]; 429 | 430 | /** 431 | * @license 432 | * Copyright Google Inc. All Rights Reserved. 433 | * 434 | * Use of this source code is governed by an MIT-style license that can be 435 | * found in the LICENSE file at https://angular.io/license 436 | */ 437 | /** 438 | * An implementation of ResourceLoader that uses a template cache to avoid doing an actual 439 | * ResourceLoader. 440 | * 441 | * The template cache needs to be built and loaded into window.$templateCache 442 | * via a separate mechanism. 443 | */ 444 | var CachedResourceLoader = /** @class */ (function (_super) { 445 | __extends(CachedResourceLoader, _super); 446 | function CachedResourceLoader() { 447 | var _this = _super.call(this) || this; 448 | _this._cache = core.ɵglobal.$templateCache; 449 | if (_this._cache == null) { 450 | throw new Error('CachedResourceLoader: Template cache was not found in $templateCache.'); 451 | } 452 | return _this; 453 | } 454 | CachedResourceLoader.prototype.get = function (url) { 455 | if (this._cache.hasOwnProperty(url)) { 456 | return Promise.resolve(this._cache[url]); 457 | } 458 | else { 459 | return Promise.reject('CachedResourceLoader: Did not find cached template for ' + url); 460 | } 461 | }; 462 | return CachedResourceLoader; 463 | }(compiler.ResourceLoader)); 464 | 465 | /** 466 | * @license 467 | * Copyright Google Inc. All Rights Reserved. 468 | * 469 | * Use of this source code is governed by an MIT-style license that can be 470 | * found in the LICENSE file at https://angular.io/license 471 | */ 472 | 473 | /** 474 | * @license 475 | * Copyright Google Inc. All Rights Reserved. 476 | * 477 | * Use of this source code is governed by an MIT-style license that can be 478 | * found in the LICENSE file at https://angular.io/license 479 | */ 480 | var VERSION = new core.Version('6.1.0'); 481 | 482 | /** 483 | * @license 484 | * Copyright Google Inc. All Rights Reserved. 485 | * 486 | * Use of this source code is governed by an MIT-style license that can be 487 | * found in the LICENSE file at https://angular.io/license 488 | */ 489 | /** 490 | * @experimental 491 | */ 492 | var RESOURCE_CACHE_PROVIDER = [{ provide: compiler.ResourceLoader, useClass: CachedResourceLoader, deps: [] }]; 493 | var platformBrowserDynamic = core.createPlatformFactory(platformCoreDynamic, 'browserDynamic', INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS); 494 | 495 | /** 496 | * @license 497 | * Copyright Google Inc. All Rights Reserved. 498 | * 499 | * Use of this source code is governed by an MIT-style license that can be 500 | * found in the LICENSE file at https://angular.io/license 501 | */ 502 | // This file only reexports content of the `src` folder. Keep it that way. 503 | 504 | /** 505 | * @license 506 | * Copyright Google Inc. All Rights Reserved. 507 | * 508 | * Use of this source code is governed by an MIT-style license that can be 509 | * found in the LICENSE file at https://angular.io/license 510 | */ 511 | 512 | /** 513 | * Generated bundle index. Do not edit. 514 | */ 515 | 516 | exports.ɵangular_packages_platform_browser_dynamic_platform_browser_dynamic_a = CachedResourceLoader; 517 | exports.RESOURCE_CACHE_PROVIDER = RESOURCE_CACHE_PROVIDER; 518 | exports.platformBrowserDynamic = platformBrowserDynamic; 519 | exports.VERSION = VERSION; 520 | exports.JitCompilerFactory = JitCompilerFactory; 521 | exports.ɵCompilerImpl = CompilerImpl; 522 | exports.ɵplatformCoreDynamic = platformCoreDynamic; 523 | exports.ɵINTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS = INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS; 524 | exports.ɵResourceLoaderImpl = ResourceLoaderImpl; 525 | 526 | Object.defineProperty(exports, '__esModule', { value: true }); 527 | 528 | }))); 529 | //# sourceMappingURL=platform-browser-dynamic.umd.js.map 530 | -------------------------------------------------------------------------------- /test-angular-elements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Multiple angular elements 7 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /test-angular-elements/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test-angular-elements", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "async": { 8 | "version": "1.5.2", 9 | "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", 10 | "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=", 11 | "dev": true 12 | }, 13 | "colors": { 14 | "version": "1.0.3", 15 | "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz", 16 | "integrity": "sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=", 17 | "dev": true 18 | }, 19 | "corser": { 20 | "version": "2.0.1", 21 | "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz", 22 | "integrity": "sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c=", 23 | "dev": true 24 | }, 25 | "debug": { 26 | "version": "3.1.0", 27 | "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", 28 | "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", 29 | "dev": true, 30 | "requires": { 31 | "ms": "2.0.0" 32 | } 33 | }, 34 | "ecstatic": { 35 | "version": "3.3.0", 36 | "resolved": "https://registry.npmjs.org/ecstatic/-/ecstatic-3.3.0.tgz", 37 | "integrity": "sha512-EblWYTd+wPIAMQ0U4oYJZ7QBypT9ZUIwpqli0bKDjeIIQnXDBK2dXtZ9yzRCOlkW1HkO8gn7/FxLK1yPIW17pw==", 38 | "dev": true, 39 | "requires": { 40 | "he": "1.2.0", 41 | "mime": "1.6.0", 42 | "minimist": "1.2.0", 43 | "url-join": "2.0.5" 44 | } 45 | }, 46 | "eventemitter3": { 47 | "version": "3.1.0", 48 | "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.0.tgz", 49 | "integrity": "sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA==", 50 | "dev": true 51 | }, 52 | "follow-redirects": { 53 | "version": "1.5.8", 54 | "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.8.tgz", 55 | "integrity": "sha512-sy1mXPmv7kLAMKW/8XofG7o9T+6gAjzdZK4AJF6ryqQYUa/hnzgiypoeUecZ53x7XiqKNEpNqLtS97MshW2nxg==", 56 | "dev": true, 57 | "requires": { 58 | "debug": "3.1.0" 59 | } 60 | }, 61 | "he": { 62 | "version": "1.2.0", 63 | "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", 64 | "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", 65 | "dev": true 66 | }, 67 | "http-proxy": { 68 | "version": "1.17.0", 69 | "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.17.0.tgz", 70 | "integrity": "sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==", 71 | "dev": true, 72 | "requires": { 73 | "eventemitter3": "3.1.0", 74 | "follow-redirects": "1.5.8", 75 | "requires-port": "1.0.0" 76 | } 77 | }, 78 | "http-server": { 79 | "version": "0.11.1", 80 | "resolved": "https://registry.npmjs.org/http-server/-/http-server-0.11.1.tgz", 81 | "integrity": "sha512-6JeGDGoujJLmhjiRGlt8yK8Z9Kl0vnl/dQoQZlc4oeqaUoAKQg94NILLfrY3oWzSyFaQCVNTcKE5PZ3cH8VP9w==", 82 | "dev": true, 83 | "requires": { 84 | "colors": "1.0.3", 85 | "corser": "2.0.1", 86 | "ecstatic": "3.3.0", 87 | "http-proxy": "1.17.0", 88 | "opener": "1.4.3", 89 | "optimist": "0.6.1", 90 | "portfinder": "1.0.17", 91 | "union": "0.4.6" 92 | } 93 | }, 94 | "mime": { 95 | "version": "1.6.0", 96 | "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", 97 | "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", 98 | "dev": true 99 | }, 100 | "minimist": { 101 | "version": "1.2.0", 102 | "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", 103 | "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", 104 | "dev": true 105 | }, 106 | "mkdirp": { 107 | "version": "0.5.1", 108 | "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", 109 | "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", 110 | "dev": true, 111 | "requires": { 112 | "minimist": "0.0.8" 113 | }, 114 | "dependencies": { 115 | "minimist": { 116 | "version": "0.0.8", 117 | "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", 118 | "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", 119 | "dev": true 120 | } 121 | } 122 | }, 123 | "ms": { 124 | "version": "2.0.0", 125 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 126 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", 127 | "dev": true 128 | }, 129 | "opener": { 130 | "version": "1.4.3", 131 | "resolved": "https://registry.npmjs.org/opener/-/opener-1.4.3.tgz", 132 | "integrity": "sha1-XG2ixdflgx6P+jlklQ+NZnSskLg=", 133 | "dev": true 134 | }, 135 | "optimist": { 136 | "version": "0.6.1", 137 | "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz", 138 | "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=", 139 | "dev": true, 140 | "requires": { 141 | "minimist": "0.0.10", 142 | "wordwrap": "0.0.3" 143 | }, 144 | "dependencies": { 145 | "minimist": { 146 | "version": "0.0.10", 147 | "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz", 148 | "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=", 149 | "dev": true 150 | } 151 | } 152 | }, 153 | "portfinder": { 154 | "version": "1.0.17", 155 | "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.17.tgz", 156 | "integrity": "sha512-syFcRIRzVI1BoEFOCaAiizwDolh1S1YXSodsVhncbhjzjZQulhczNRbqnUl9N31Q4dKGOXsNDqxC2BWBgSMqeQ==", 157 | "dev": true, 158 | "requires": { 159 | "async": "1.5.2", 160 | "debug": "2.6.9", 161 | "mkdirp": "0.5.1" 162 | }, 163 | "dependencies": { 164 | "debug": { 165 | "version": "2.6.9", 166 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 167 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 168 | "dev": true, 169 | "requires": { 170 | "ms": "2.0.0" 171 | } 172 | } 173 | } 174 | }, 175 | "qs": { 176 | "version": "2.3.3", 177 | "resolved": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz", 178 | "integrity": "sha1-6eha2+ddoLvkyOBHaghikPhjtAQ=", 179 | "dev": true 180 | }, 181 | "requires-port": { 182 | "version": "1.0.0", 183 | "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", 184 | "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", 185 | "dev": true 186 | }, 187 | "union": { 188 | "version": "0.4.6", 189 | "resolved": "https://registry.npmjs.org/union/-/union-0.4.6.tgz", 190 | "integrity": "sha1-GY+9rrolTniLDvy2MLwR8kopWeA=", 191 | "dev": true, 192 | "requires": { 193 | "qs": "2.3.3" 194 | } 195 | }, 196 | "url-join": { 197 | "version": "2.0.5", 198 | "resolved": "https://registry.npmjs.org/url-join/-/url-join-2.0.5.tgz", 199 | "integrity": "sha1-WvIvGMBSoACkjXuCxenC4v7tpyg=", 200 | "dev": true 201 | }, 202 | "wordwrap": { 203 | "version": "0.0.3", 204 | "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz", 205 | "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=", 206 | "dev": true 207 | } 208 | } 209 | } 210 | -------------------------------------------------------------------------------- /test-angular-elements/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test-angular-elements", 3 | "version": "1.0.0", 4 | "description": "test angular elements", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1", 7 | "start": "http-server" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "http-server": "^0.11.1" 13 | } 14 | } 15 | --------------------------------------------------------------------------------