Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
giolongo opened this issue Jun 23, 2021 · 5 comments

Comments

@giolongo
Copy link

giolongo commented Jun 23, 2021

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

@giolongo giolongo changed the title Multiple Assets on Angular 11 and single-spa 4.0.0 Multiple Assets on Angular 11 and single-spa >=4.0.0 Jun 23, 2021
@giolongo giolongo changed the title Multiple Assets on Angular 11 and single-spa >=4.0.0 Multiple Assets on Angular 11, single-spa >=4.0.0 and single-spa-angular ^4.9.2 Jun 23, 2021
@joeldenning
Copy link
Member

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
Copy link
Author

giolongo commented Jul 7, 2021

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
Copy link
Member

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
Copy link
Contributor

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:
image

@wncm
Copy link

wncm commented Nov 16, 2022

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",

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants