I am currently working on an Angular application and encountering some issues during the compilation process using ng build. When I compile the project for production deployment with the optimization option enabled, I am faced with console errors that prevent the bundle from functioning properly. Interestingly, the bundle works fine in development mode with optimization disabled. Enabling optimization leads to a range of console errors popping up.
The errors seem to be random and affect different components inconsistently. The minified object/function names in main.js make it difficult to pinpoint the cause of these errors.
Some of the errors that have been observed include:
Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'resolveComponentFactory')
TypeError: Cannot read properties of undefined (reading 'resolveComponentFactory')
at main.78b92ab8588ccb699d55.js:1:20111326
Error: NG0302: The pipe 'translate' could not be found!
at main.78b92ab8588ccb699d55.js:1:3736300
TypeError: Cannot read properties of undefined (reading 'location')
at gi.injectWindowHeader (main.78b92ab8588ccb699d55.js:1:1439711)
TypeError: Cannot read properties of undefined (reading 'tableColumns')
at ye.ngAfterViewInit (main.78b92ab8588ccb699d55.js:1:19400784)
Below are my build configurations in angular.json:
"configurations": {
"production": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
},
{
"type": "initial",
"maximumWarning": "2mb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"aot": true,
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": true
}
}
},
"development": {
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
}
},
"defaultConfiguration": "development"
},
Disabling optimization resolves all the issues, but the resulting unoptimized bundle is larger in size. I am seeking advice on how to troubleshoot these errors and enable optimization without breaking the site.
If anyone has insights on why optimization is causing these problems and how to address them, I would greatly appreciate any help.