Question

我有一个Angular 4（或5）应用程序具有以下结构：

如何构建第二个独立的角度应用程序，以便只有 documents 目录中的一组Angular组件输出到第二个 dist 目录。

文档目录中的一个组件将作为主视图（其他一些包含为导入）。主要组件还需要核心服务以及共享目录中的一些共享组件和管道。

主应用程序的应用程序组件在其模板中有 nav 和侧栏组件，我不需要那些辅助组件建立。

Answer 1

There's a story here in Angular-CLI site on how to create multiple applications

因此，如果你仔细观察你的.angular-cli.json，你的应用程序就是一个数组，所以你可以轻松添加第二个应用程序，第二个bootstrapModule

 "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },

    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main2.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

然后您可以创建App2Module

而不是使用原始AppModule和AppComponent

main2.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { App2Module } from './app/app2.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(App2Module);

然后决定要构建哪个应用

第一个应用

ng serve --app=0

或第二个应用

ng serve --app=1

Angular - 如何将一部分应用程序输出为辅助独立构建

1 个答案: