Angular-CLI：更改惰性块位置答案

【问题标题】：Angular-CLI: Change lazy chunk locationAngular-CLI：更改惰性块位置
【发布时间】：2021-08-30 06:41:00
【问题描述】：

我正在尝试从 AngularJS 迁移到 Angular。我有一个 angularjs 模块，它在用户登录后通过延迟加载（使用 ocLazyLoad）加载。我设法通过将路由更改为

lazyLoad: ['$q', '$ocLazyLoad', function($q, $ocLazyLoad) {
                var deferred = $q.defer();

                // Async require => Split point - Webpack does split this into another bundle
                // TODO: Change secure-bundle's location to /secure
                require.ensure([], function () {
                    //
                    // All the code here, plus the required modules
                    // will be bundled in a separate file.
                    var module = require('../secure/config/app.secure.module.ajs');
                    //
                    // OCLazyLoad's 'load' function loads the Angular module.
                    $ocLazyLoad.load({
                        name: 'secure.module'
                    });

                    deferred.resolve(module);
                });
                return deferred.promise;
            }]

在此之前，我们在 login-buttons'-function 的 login-form-component.js 中延迟加载了模块，但这似乎不再可行。

我现在的问题是这个新的惰性块具有路径+文件名作为文件名（“frontend-src_app__secure_config_app_secure_module_ajs_js”）并且它也位于应用程序的根目录中。因为我们正在使用 SpringSecurity 并限制对安全内容的访问，所以我需要限制对这个惰性块文件的访问。如果可以将惰性块生成到一个名为“安全”的子文件夹中，我会更喜欢它，这可能吗？ Angular-CLI 本身似乎没有更改特定块位置的选项，还有其他方法吗？通过将 gulp-task 添加到构建应用程序的 npm-script 中，gulp 是否是实现此目的的好方法？

我尝试过使用带有魔法导入注释的动态导入：

 var module = import(/* webpackChunkName: "secure.bundle" */ '../secure/config/app.secure.module.ajs');

确实更改了块的名称，但它不再正确加载，我收到错误“webpack.require__h 不是函数”。

【问题讨论】：

标签： angularjs angular-cli lazy-loading oclazyload

【解决方案1】：

我设法通过向lazyLoad-Resolve添加另一个参数来实现解决方案：

lazyLoad: ['$q', '$transition$', function($q, $transition$) {
                const deferred = $q.defer();
                const $ocLazyLoad = $transition$.injector().get("$ocLazyLoad");

                // Async require => Split point
                require.ensure([], () => {
                    //
                    // All the code here, plus the required modules
                    // will be bundled in a separate file.
                    let module = require('../secure/app.secure.module.ajs');
                    //
                    // OCLazyLoad's 'load' function loads the Angular module.
                    $ocLazyLoad.load({name: 'collphir.customer-secure'});

                    deferred.resolve(module);
                }, 'secure/secure');

                return deferred.promise;
            }]

线

}**, 'secure/secure'**);

是解决方案。我花了一段时间才在互联网上找到这个...不需要 extra-webpack.config.js。

【讨论】：