2

Если добавить на страницу собранное приложение после тега <app-one>, с тегом <app-two>, и добавить бандлы приложения 2, то при запуске вылетает ошибка

Uncaught Error: Zone already loaded.

Как добавить на одну страницу два разных приложения Angular4 чтобы они не конфликтовали? Сильно ли это скажется на производительности?

2 ответа 2

2

все, понял... поковырявшись в интеренатах понял, что это можно реализовать только при помощи сборщика SystemJS, вот линк, хотя люди тоже жалуются на похожую ошибку (https://blog.sstorie.com/bootstrapping-multiple-angular-2-applications-on-the-same-page/).

Если использовать angular-cli, то там добавлена только возможность отдельно создавать два приложения, но не запусктаь и билдить одновременно (https://github.com/angular/angular-cli/wiki/stories-multiple-apps).

Так что надо голосовать за эту фичу (https://github.com/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"
  }
}
],

структура:

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

старт

ng serve --app app1
ng serve --app app2
8
  • Это одно приложение, а не два. 21 авг 2017 в 10:02
  • ты используешь ng-cli?
    – Artsiom
    21 авг 2017 в 10:10
  • да, оба приложения используют Angular CLI 21 авг 2017 в 10:43
  • сейчас поправлю тогда ответ
    – Artsiom
    21 авг 2017 в 10:44
  • Спасибо за старания, но кажется, ты не совсем понял вопрос. У меня есть страница, на которой уже есть приложение на 4 ангуляре. На эту же страницу необходимо добавить другое приложение, которое тоже на 4 ангуляре. Оба приложения уже собраны. Если в index.html инжектить второе приложение,они оба загружаются,но в консоле вылетает ошибка о том что zone.js уже загружен 21 авг 2017 в 11:19
0

Два разных приложения предполагают два разных хоста, грубо говоря два разных сайта у каждого из которых свой адрес. Вам нужно на одной странице, тогда вы можете использовать модули, они специально для этого предназначены. Вы можете расшарить модули между несколькими приложениями.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.