Angular-CLI: Change lazy chunk location

Question

I'm trying to migrate from AngularJS to Angular. I've got a angularjs-module which is loaded via lazyloading (with ocLazyLoad) after the user loggs in. I managed to achieve this by changing the routing to

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;
            }]

Before this we lazy-loaded the module in the login-form-component.js in the login-buttons'-function, but this didnt seem to be possible anymore.

My problem is now that this new lazy-chunk has the path+filename as a filename ("frontend-src_app__secure_config_app_secure_module_ajs_js") and its also sitting in the root of the application. Because we are using SpringSecurity and restricting access to secure-stuff I need to restrict access to this lazy-chunk file. I'd prefer it if the lazy-chunk could be generated into a subfolder called "secure", is this somehow possible? It seems Angular-CLI itself does not have an option to change a specific chunks' location, is there any other way? Would gulp be a good way to achieve this, by adding a gulp-task to the npm-script which builds the app?

I have tried using dynamic import with magic import comment:

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

which DOES change the chunks' name, but then it is not loaded correctly anymore, I'm getting an error "webpack.require__h is not a function".

score 0 · Answer 1 · answered Sep 02 '21 at 05:29

I managed to achieve the solution by just adding another parameter to the 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;
            }]

The line

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

is the solution. Took me a while to find this one on the internet... No need for an extra-webpack.config.js.

Angular-CLI: Change lazy chunk location

1 Answers1