Multiple Assets on Angular 11, single-spa >=4.0.0 and single-spa-angular ^4.9.2

[giolongo]

Hi,
I started an application with angular 11 and I included single-spa-angular.

When I launch ng build --watch command, i receive these warnings
Warning: ...\__ivy_ngcc__\fesm2015\single-spa-angular.js depends on 'single-spa-angular/internals'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Warning: Conflict: Multiple assets emit different content to the same filename main.js.map

The problem is that i don't see the ts files on console for debug the app.

An example on this repo:
https://github.com/giolongo/single-spa-angular-11.git

For generating this application I lunched these commands:

ng new my-app --routing --prefix my-app
cd my-app
ng add single-spa-angular

[joeldenning]

The problem is that i don't see the ts files on console for debug the app.

Are you referring to javascript source maps not working in the browser devtools?

i receive these warnings

Those warnings are expected and do not cause issues.

[giolongo]

Are you referring to javascript source maps not working in the browser devtools?

Yes, I don't see the ts files. Without ts files the debuging is very complex

[joeldenning]

I don't spend much time supporting single-spa-angular, but if you have time to investigate this and submit a PR, I am happy to review it. There are also a few others who help maintain the project who may be able to help. Source maps are controlled via webpack's devtool option. See https://webpack.js.org/configuration/devtool/#devtool

[OriolInvernonLlaneza]

Yes, I don't see the ts files. Without ts files the debuging is very complex

Hi, I think the problem comes from the sourceMap option being disabled here. In our case, we have it enabled for standard build and set as false for production.
As a result, we can see and debug from the inspect tools in the browser:

[wncm]

I noticed duplicated sourcemaps in my build (two .map files emitted for every chunk, and two //# sourceMappingURL= comments at the end of each file), which were confusing the browser.

I checked the difference between the original Webpack config and the one after singleSpaAngularWebpack and noticed that the devtool option turned from false to true.

Idk why single-spa-angular decided to enable it, since Angular uses SourceMapDevToolPlugin instead:

     SourceMapDevToolPlugin {
       sourceMapFilename: '[file].map',
       sourceMappingURLComment: '\n//# sourceMappingURL=[url]',
       moduleFilenameTemplate: '[resource-path]',
       fallbackModuleFilenameTemplate: 'webpack://[namespace]/[resourcePath]?[hash]',
       namespace: '',
       options: [Object] },

Finally, I set config.devtool = false and everything seems to work fine now.

I'm using:

    "@angular-builders/custom-webpack": "^11.1.1",
    "@angular/cli": "11.2.14",
    "single-spa-angular": "^4.9.2",
    "webpack": "4.46.0",