angular 8 module loading

[ponnalaxmikanth]

i have my route defined as below in my child application

const routes: Routes = [
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
{ path: '', redirectTo: '/admin', pathMatch: 'full' },
];

when i navingate to /app1/admin, I am getting below error.

ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk admin-admin-module failed.
(error: http://localhost:4900/admin-admin-module.js)
ChunkLoadError: Loading chunk admin-admin-module failed.
(error: http://localhost:4900/admin-admin-module.js).

my root application is running on port 4900 and app1 is running on port 4901.

what changes I need to make to load the correct module in child application when navigating.

[internettrans]

Failing to load webpack chunks is almost always related to webpack public path. For single-spa + systemjs to work, you need to dynamically set the public path, from within the browser.

The systemjs-webpack-interop repo is an easy way of doing this right.

The coexisting-angular-microfrontends repo is just missing this ^ right now. Would you be interested in submitting a PR that adds systemjs-webpack-interop to each of the applications? The only thing we need to do is to use the setPublicPath function

[ponnalaxmikanth]

when I try to use --deploy-url with ng serve, it didn't take the path and the application got served from /.

so as a work around I have modified by webpack.config.js as below to work in local. while taking build for deployment, I am passing --deploy-url.

this may or may not be the best solution, but it might help some one.

const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (angularWebpackConfig, options) => {
if(angularWebpackConfig.mode == 'development' && angularWebpackConfig.devServer != null) {
var path = angularWebpackConfig.devServer.https ? 'https' : 'http';
path = path + '://' + angularWebpackConfig.devServer.host + ':' + angularWebpackConfig.devServer.port + angularWebpackConfig.devServer.publicPath + '/';
angularWebpackConfig.output.publicPath = path;

}
const singleSpaWebpackConfig = singleSpaAngularWebpack(angularWebpackConfig, options);

// Feel free to modify this webpack config however you'd like to
return singleSpaWebpackConfig;
}

[internettrans]

--deploy-url does not dynamically set the public path ("on the fly"). Nor does modifying the webpack config. The only way to dynamically set the public path is described in the links I posted above. That is what you need to do.