If you add the assembled application to the page after the <app-one> tag, with the <app-two> , and add application 2 bundles, an error occurs when you start it

Uncaught Error: Zone already loaded.

How to add two different Angular4 applications to one page so that they do not conflict? Will it have a significant impact on performance?

    2 answers 2

    I understood everything ... having picked it up in internates, I realized that this can only be done with the SystemJS collector, here is the link, although people also complain about a similar error ( https://blog.sstorie.com/bootstrapping-multiple-angular-2- applications-on-the-same-page / ).

    If you use angular-cli, then there is added only the ability to separately create two applications, but do not run and build at the same time ( https://github.com/angular/angular-angular/cli/wiki/stories-multiple-apps ).

    So you need to vote for this feature ( https://github.com/angular/angular/angular-cli/issues/6428 )

    .angular-cli.json

     "apps": [ { "name":"app1", "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main-one.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "styles.css", "../node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css" ], "scripts": [], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } }, { "name":"app2", "root": "src", "outDir": "dist2", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main-two.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "styles.css", "scripts": [], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ],

    structure:

     src/ ---/app1 ---/app2

    start

     ng serve --app app1 ng serve --app app2
    • This is one application, not two. - July August
    • do you use ng-cli? - Artsiom
    • Yes, both applications use the Angular CLI - July August
    • I'll correct the answer now - Artsiom
    • Thank you for your efforts, but it seems you did not quite understand the question. I have a page on which there is already an application on 4 angular. On the same page, you need to add another application, which is also on 4 angular. Both applications are already assembled. If the second application is injected into index.html, both of them are loaded, but an error occurs in the console stating that zone.js is already loaded - July August

    Two different applications assume two different hosts, roughly speaking two different sites each of which has its own address. You need one page, then you can use modules, they are specifically designed for this. You can share modules between multiple applications.