在Angular 4中为延迟加​​载的块自定义输出目录

Question

有没有办法自定义输出目录，其中一些延迟加载的块将被存储？默认情况下，所有工件都转到dist文件夹。但是我需要将它们中的一些存储在dist的子目录中（这些是将要自定义的模块的块，并且客户端希望将它们分开）。

示例：

在：

后：

我对Angular很新，似乎自定义构建输出的唯一方法是执行ng eject，并完全控制构建配置，这似乎并不理想。但即便如此，我也不确定从哪里开始。

Answer 1

查看NRWL的NX，了解如何在应用程序和库中分离构建企业角度应用程序。您的客户可能希望与他相关的代码位于lib而不是app本身。对于lib，您可以定义一个自己的tsconfig，它扩展了主项目的tsconfig。以下是一个示例：https://github.com/nrwl/nx-examples/blob/master/libs/login/tsconfig.lib.json

注意这一行

    "outDir": "../../out-tsc/libs/login",

指定输出的构建位置。

Answer 2

对于 Angular 7+，您可以使用 @angular-builders/custom-webpack。

以下是 Angular 12 的使用方法：

1. 安装@angular-builder/custom-webpack：

   npm i -D @angular-builders/custom-webpack
   

2. 更新 angular.json 以使用自定义 webpack 文件：

   "projects": {
     ...
     "example-app": {
       ...
       "architect": {
         ...
         "build": {
           "builder": "@angular-builders/custom-webpack:browser",
           "options": {
             "customWebpackConfig": {
                 "path": "./extra-webpack.config.js"
             }
           }
         }
       }
     }
   }
   

3. 在项目根目录下创建“extra-webpack.config.js”。根据需要更新文件的大小写值。这是来自 webpack Output documentation

   的修改示例

   module.exports = {
     output: {
       chunkFilename: (pathData) => {
         let fileName;
   
         switch (pathData.chunk.id) {
           case 1:
             fileName = 'custom_dir/[name].js';
             break;
           case 3:
             fileName = 'custom_dir/[name].js';
             break;
           default:
             fileName = '[name].js';
         }
   
         return fileName;
       }
     }
   };
   
   

4. 运行 ng build 以生成带有子目录的 dist 文件夹。