I'm maintaining a legacy project, written years back using angular-universal (ssr).
The project used to work just fine, I was recently requested to add something to it, which required me to rebuild the project and deploy it.
For some reason, my build command is stuck on this line - "10% building modules 1/1 modules 0 active", No errors are thrown.
My only guess was that the issue occurs due to the fact that since this project was last built, I've upgraded my local node/angular-cli versions which fail to build such an old project with old dependencies.
Steps that I've tried -
npm install command again.All of the attempts above didn't do anything.
Command -
ng run appName:server && webpack --config webpack.server.config.js --progress --colors
webpack.server.config.js -
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
server: './server.ts',
},
target: 'node',
resolve: { extensions: ['.ts', '.js'] },
externals: [/(node_modules|main\..*\.js)/,],
output: {
libraryTarget: 'commonjs2',
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{ test: /\.ts$/, loader: 'ts-loader' }
]
},
optimization: {
minimize: false
},
plugins: [
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?angular(\\|\/)core(.+)?/,
path.join(__dirname, 'src'), // location of your src
{} // a map of your routes
),
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?express(\\|\/)(.+)?/,
path.join(__dirname, 'src'),
{}
)
]
}
ng version result -
Angular CLI: 7.2.4
Node: 8.17.0
OS: win32 x64
Angular: 6.1.10
... animations, common, compiler, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 7.2.4
@angular/cdk 8.2.3
@angular/cli 7.2.4
@angular/compiler-cli 7.2.6
@ngtools/webpack 6.0.8
@schematics/angular 7.2.4
@schematics/update 0.12.4
rxjs 6.4.0
typescript 3.2.4
webpack 4.8.3
Edit1 -
After multiple attempts, I figured that if I disable AOT, I manage to build the app. As this is an angular universal app, which builds both for the browser and for the server, I needed to disable AOT in both build configuration.
Browser -
angular.json I've adjusted the configurations.production.aot to false.
Server -
node_modules -> @angular-devkit -> build-angular -> src -> index.js
There's a buildWebpackConfig method where it has a hardcoded value of aot to true, adjusted to false.
Doing the patch above I managed to build the app, knowing that AOT is what caused my build to hang, any tips on how can I possibly solve it? what might cause AOT problems that won't throw errors yet block the build?
Also how bad is it to disable AOT in an angular universal app?
Edit2 -
Well about Edit1, disabling AOT and build-optimizer does solve the build issue, but the app doesn't work when doing so lol The generated server.js has tons of decorators that throw errors.
Edit3 -
Another attempt, following - https://gist.github.com/LayZeeDK/c822cc812f75bb07b7c55d07ba2719b3
Iv'e adjusted my versions as follows -
Angular CLI: 6.2.9
Node: 8.17.0
OS: win32 x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 7.3.10
@angular-devkit/schematics 7.3.10
@angular/cdk 6.4.7
@angular/cli 6.2.9
@ngtools/webpack 6.0.8
@schematics/angular 7.2.4
@schematics/update 0.8.9
rxjs 6.6.7
typescript 2.9.2
webpack 4.8.3
It seems like the build managed to overcome where it was initially stuck, right at the end at 94% it throws multiple @types errors like such -
ERROR in [path]\node_modules\@types\minimatch\index.d.ts
[tsl] ERROR in [path]\node_modules\@types\minimatch\index.d.ts(29,35)
TS1005: ',' expected.
Full package.json -
{
"name": "appName",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:server:prod": "ng run consec:server && webpack --config webpack.server.config.js --progress --colors",
"build:browser:prod": "ng build --prod",
"build:prod": "npm run build:server:prod && npm run build:browser:prod",
"server": "node local.js"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/cdk": "^6.0.1",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/platform-server": "^6.0.3",
"@angular/router": "^6.0.3",
"@nebular/eva-icons": "4.6.0",
"@nebular/theme": "^4.6.0",
"@ng-bootstrap/ng-bootstrap": "^4.0.4",
"@ng-toolkit/universal": "^1.1.51",
"@ngu/carousel": "^1.5.5",
"@nguniversal/common": "~6.0.0",
"@nguniversal/express-engine": "~6.0.0",
"@nguniversal/module-map-ngfactory-loader": "~6.0.0",
"angular-froala-wysiwyg": "^3.0.5",
"aws-sdk": "^2.573.0",
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
"cors": "~2.8.4",
"domino": "^2.1.3",
"eva-icons": "^1.1.1",
"froala-editor": "^3.0.5",
"multer": "^1.4.2",
"mysql": "^2.17.1",
"ngx-chips": "^1.9.8",
"node-sass": "^4.14.1",
"nodemailer": "^5.1.1",
"rxjs": "^6.2.2",
"ts-loader": "4.2.0",
"util.promisify": "^1.0.0",
"webpack-cli": "^3.1.2",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.8",
"@angular/cli": "~6.2.9",
"@angular/compiler-cli": "^6.1.10",
"@angular/language-service": "^6.0.3",
"@schematics/angular": "~7.2.0",
"@types/hammerjs": "^2.0.36",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"hammerjs": "^2.0.8",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.9.2"
}
}
I'll keep trying to play with the versions
Aight, after playing the Angular versioning puzzle game for a couple of days, these are the results -
What's causing the build to hang with this error - 10% building modules 1/1 modules 0 active
Is related to - @angular/compiler-cli, downgrading it to version 6.1.10 has solved this error.
But, presented a new error - The Angular Compiler requires TypeScript >=2.7.2 and <2.10.0, I initially tried typescript 2.7.2, I managed to build the app! but it threw errors when trying to actually run it...
Eventually attempted typescript 2.9.2 which worked both for building and running the app.
I know the versions of this legacy project were a bit mixed out, but still, feels like Angular was too delicate in this regard.. never had such issues with Dotnet projects for example...
(For other users, you can likely find the exact version you need for your version of Angular in this version compatibility table.)