My project was working fine. When I upgraded to Webpack 5 this issue occurred. I searched online, but all the discussions seem to be from a previous version and I even tried the workarounds specified, but to no avail.
\SourceCode\node_modules\webpack\node_modules\webpack-sources\lib\SizeOnlySource.js:26
throw this._error();
^
Error: Content and Map of this Source is not available (only size() is supported)
Sometimes, such errors occur as a result of incorrect assembly. Most likely angular using a webpack just made changes with an error. Try to delete the .angular folder, then run the
npm install
command and run the project with the usual command:
ng serve --open
If there is an error, try clearing the cache, or running your IDE as administrator.
If you're using angular, remove .angular folder from your project directory.
Then rerun your app. It helped in my case.
When I've disabled the sourceMap generation (for both local and prod configuration) the error no longer occured. Keep in mind this would work for some people, depends on the scenario. In my case I dont need sourceMaps even on local env:
I believe this problem is related somehow to Angular (as I have Angular project), and this might be something that they should address, instead of making changes on our angular.json file config.
I have encountered the same issue today and I was able to solve the problem by installing the 'source-map-support' npm package:
npm install source-map-support
I'm using Webpack module federation in angular for developing micro frontend architecture.
Usually lot of dependencies or version mismatch is going to happen. Ref: Error Screen
Just do:
npm install
Sometimes if you added a new node packages then there is chances of getting these type of errors. So that, to update the packages which are most likely to be dependent on the new installed packages run - npm install.
It worked for me.
Again i faced same problem then i used the below command
npm install source-map-support
Also please check the port number which you are using for the project. Try to change the port numbers to a different port numbers which are unused and safer.
Eg: If you are using the port http://localhost:2000/ then change it to different one in your angular.json file
"options": {
"port": 5000,
"publicHost": "http://localhost:5000",
"extraWebpackConfig": "projects/core/webpack.config.js"
}
and also if you customized the commands for each micro frontend apps then change the port numbers in package.json file also
"ng": "ng",
"start": "npm run start:core",
"start:core": "ng serve core -o --port 5000",
"start:dashboard": "ng serve dashboard -o --port 3000"
}
I have encountered the same issue and I was able to solve the problem by disabling cache by including in angular.json file
"cli": {
"cache": {
"enabled": false
}
}
If npm install then ng serve --open doesn't work for you :
you need to remove node modules
rm -r .\node_modules\
then remove package-lock.json and finally reinstall node modules
npm install
now you can run ng serve and it will work
I have faced the same issue with the angular devtool library:
node_modules/@angular-devkit/build-angular/node_modules/webpack/node_modules/webpack-sources/lib/SizeOnlySource.js:16
None of the previous solutions has worked for me, and after some checking and trying, it was a problem with one of the Chrome browser extensions, So I have been running it in Firefox and everything is fine, or by disabling the extension that cause the problem.
Anyone can check this thread for more details about Chrome.
I tried all the above alternatives with failure. In my case, what worked was using a previous version of node to compile. The error happened with node > 14.18.0. Compilation works correctly here on v14.15.3 (angular 13)
Try
ng cache clean
Then
ng serve
