Angular：如何将应用的某一部分打包为独立次级构建产物

嘿，我来帮你搞定这个需求！要实现只把documents目录下的组件打包成独立的dist目录，同时复用core服务和shared模块的内容，排除主应用的导航组件，我们可以通过给项目添加自定义构建配置来实现，具体步骤如下：

1. 新建次级应用的入口文件 #

在项目的src目录下创建一个新的入口文件，比如documents-entry.ts，作为次级应用的启动入口：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DocumentsRootModule } from './documents/documents-root.module';
import { environment } from './environments/environment';

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

platformBrowserDynamic().bootstrapModule(DocumentsRootModule)
  .catch(err => console.error(err));

2. 创建次级应用的根模块 #

在documents目录下新建根模块documents-root.module.ts，把你的主视图组件设为根组件，同时导入需要的core和shared模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CoreModule } from '../core/core.module';
import { SharedModule } from '../shared/shared.module';
import { DocumentsMainComponent } from './documents-main.component'; // 你的主视图组件

@NgModule({
  declarations: [
    DocumentsMainComponent,
    // 这里添加documents目录下其他需要用到的组件
  ],
  imports: [
    BrowserModule,
    CoreModule,
    SharedModule
  ],
  providers: [],
  bootstrap: [DocumentsMainComponent]
})
export class DocumentsRootModule { }

3. 修改Angular CLI配置文件（angular-cli.json） #

找到angular-cli.json中的apps数组，添加一个新的应用配置项，指向我们的次级入口和专属输出目录：

"apps": [
  // 保留原有的主应用配置
  {
    "name": "main-app",
    "root": "src",
    "outDir": "dist",
    // ...其他主应用配置
  },
  // 新增的次级应用配置
  {
    "name": "documents-app",
    "root": "src",
    "outDir": "dist-documents", // 独立的输出目录
    "assets": ["assets", "favicon.ico"],
    "index": "documents-index.html", // 后面会创建这个纯净的index文件
    "main": "documents-entry.ts",
    "polyfills": "polyfills.ts",
    "tsconfig": "tsconfig.app.json",
    "prefix": "docs", // 给次级应用组件设置单独前缀，避免冲突
    "styles": ["documents-styles.css"], // 可选：用专属样式文件
    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  }
]

4. 创建纯净的次级应用入口HTML #

因为主应用的index.html包含nav和sidebar，我们在src目录下新建documents-index.html，只保留根组件的容器：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Documents Portal</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <docs-main></docs-main> <!-- 替换成你的主组件选择器 -->
</body>
</html>

5. 构建次级应用 #

现在就可以用CLI命令单独构建这个次级应用了：

• 开发环境构建：ng build --app documents-app
• 生产环境构建：ng build --app documents-app --prod

构建完成后，产物会输出到dist-documents目录，完全独立于主应用的dist，而且会自动包含core服务和shared模块的内容，不会带上主应用的nav/sidebar组件。

小提示 #

• 确保CoreModule是可复用的模块：不要在里面声明组件，只放服务、全局指令等，如果需要单例服务，记得用forRoot()模式
• SharedModule要导出所有需要在documents组件中使用的组件、管道、指令，这样次级模块导入后就能直接调用
• 如果不需要共享主应用的全局样式，就用专属的documents-styles.css来控制次级应用的样式

内容的提问来源于stack exchange，提问作者abdul-wahab