Angular

Question

我有一个 Angular 4（或 5）应用程序，其结构如下：

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

文档目录中的一个组件将作为主视图（其他一些作为导入）。主要组件还需要 core 服务和一些来自 shared 目录的共享组件和管道。

主应用程序的 App 组件 在其模板中有 nav 和 sidebar 组件，我不需要那些在二级构建中的。

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 - 如何将应用程序的一部分输出为辅助独立构建

Angular - How to output a section of application as secondary standalone build

typescript

webpack

angular-cli

angular5