Angular-CLI：修改特定懒加载代码块存储路径的解决方案咨询

我来帮你一步步解决这个迁移中的问题：

一、优先方案：通过自定义Webpack配置指定Chunk输出目录 #

Angular CLI本身确实没有直接修改单个Chunk路径的选项，但可以通过自定义Webpack配置来实现，这是最优雅且可持续的方案：

1. 安装自定义Webpack构建器

   npm install @angular-builders/custom-webpack --save-dev
   

2. 在项目根目录创建webpack.custom.js文件，配置Chunk输出规则：

   module.exports = {
     output: {
       // 对命名为"secure"的Chunk，输出到secure子目录
       chunkFilename: (pathData) => {
         const chunkName = pathData.chunk.name;
         return chunkName.startsWith('secure') ? 'secure/[name].bundle.js' : '[name].bundle.js';
       }
     }
   };
   

3. 修改angular.json配置，使用自定义Webpack构建器：
   在projects -> [你的项目名] -> architect -> build下，将builder改为@angular-builders/custom-webpack:browser，并添加customWebpackConfig字段：

   "build": {
     "builder": "@angular-builders/custom-webpack:browser",
     "options": {
       "customWebpackConfig": {
         "path": "./webpack.custom.js"
       },
       // 保留原有的其他配置...
     }
   }
   

4. 更新你的懒加载代码，使用带魔法注释的动态导入（同时修复之前的报错）：
   把原来的require.ensure替换为ES模块的import()，避免CommonJS和ES模块混合导致的错误：

   lazyLoad: ['$q', '$ocLazyLoad', function($q, $ocLazyLoad) { 
     return import(/* webpackChunkName: "secure.bundle" */ '../secure/config/app.secure.module.ajs')
       .then(module => {
         // 加载AngularJS模块
         $ocLazyLoad.load({ name: 'secure.module' });
         return module;
       })
       .catch(error => {
         console.error('加载安全模块失败:', error);
         return $q.reject(error);
       });
   }]
   

这样Webpack会自动将名为secure.bundle的Chunk输出到dist/secure目录下，完美匹配Spring Security的权限管控需求。

二、修复动态导入后的"webpack.require__h is not a function"错误 #

你之前遇到的这个错误，主要是因为混合使用了CommonJS的require.ensure和ES模块的import()，导致Webpack的模块加载逻辑冲突。按照上面的方案，完全切换到import()语法，同时确保你的AngularJS模块文件（app.secure.module.ajs）正确导出模块对象，就能解决这个问题。

另外，还要检查：

• 确认ocLazyLoad的版本是否兼容ES模块的动态导入
• 确保Webpack的publicPath配置正确（在angular.json的build -> options里设置baseHref或在自定义Webpack配置里设置output.publicPath）

三、备选方案：用Gulp任务迁移Chunk文件（临时方案） #

如果暂时无法修改Webpack配置，用Gulp任务作为事后处理也是可行的，但需要额外处理Chunk的引用路径：

1. 安装必要的Gulp插件：

   npm install gulp gulp-rename gulp-replace --save-dev
   

2. 在项目根目录创建gulpfile.js：

   const gulp = require('gulp');
   const rename = require('gulp-rename');
   const replace = require('gulp-replace');
   
   // 移动secure相关Chunk到secure子目录
   gulp.task('move-secure-chunks', () => {
     return gulp.src('dist/frontend-src_app__secure_config_app_secure_module_ajs_js*.js')
       .pipe(rename(path => {
         path.dirname = 'secure';
         path.basename = 'secure.bundle'; // 可选：统一文件名
       }))
       .pipe(gulp.dest('dist'));
   });
   
   // 修复runtime文件中的Chunk引用路径
   gulp.task('fix-chunk-references', () => {
     return gulp.src('dist/runtime*.js')
       .pipe(replace('frontend-src_app__secure_config_app_secure_module_ajs_js', 'secure/secure.bundle'))
       .pipe(gulp.dest('dist'));
   });
   
   // 合并任务
   gulp.task('post-build', gulp.series('move-secure-chunks', 'fix-chunk-references'));
   

3. 修改package.json的构建脚本：

   "scripts": {
     "build": "ng build && gulp post-build"
   }
   

不过这种方案有个缺点：如果Webpack的Chunk命名规则变化（比如修改了文件路径、Webpack版本升级），你需要同步调整Gulp任务中的匹配规则，维护成本相对更高，所以只推荐作为临时过渡方案。

内容的提问来源于stack exchange，提问作者Vortilion