I have an old Angular application, which I have upgraded from Angular 9 to Angular 11. (It had many stable upgrades throughout the years, starting from Angular 2)
My problem is, that the ngcc is not running ng build:
$ ng build
'node-sass' usage is deprecated and will be removed in a future major version. To opt-out of the deprecated behaviour and start using 'sass' uninstall 'node-sass'.
? Browser application bundle generation complete.
Error: node_modules/ngx-device-detector/index.d.ts:3:23 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).
3 static forRoot(): ModuleWithProviders;
~~~~~~~~~~~~~~~~~~~
node_modules/@ngx-translate/core/public_api.d.ts:22:53 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).
22 static forRoot(config?: TranslateModuleConfig): ModuleWithProviders;
~~~~~~~~~~~~~~~~~~~
node_modules/@ngx-translate/core/public_api.d.ts:26:54 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).
26 static forChild(config?: TranslateModuleConfig): ModuleWithProviders;
~~~~~~~~~~~~~~~~~~~
I really need it, as you can see that some of the packages has old dependency issues which ngcc can solve. I thought that as we are using Ivy, running it will be part of the build by default. I was able to run the command manually as npx ngcc:
forest@forest:~/....$ npx ngcc
Compiling @angular/core : fesm2015 as esm2015
Compiling @angular/animations : fesm2015 as esm2015
Compiling @angular/compiler/testing : fesm2015 as esm2015
Compiling @angular/animations : esm2015 as esm2015
Compiling @angular/animations : main as umd
Compiling @angular/compiler/testing : esm2015 as esm2015
Compiling @angular/compiler/testing : main as umd
Compiling @angular/common : fesm2015 as esm2015
Compiling @ngx-translate/core : fesm2015 as esm2015
Compiling @ngx-translate/core : fesm2015 as esm2015
Compiling @angular/platform-browser : fesm2015 as esm2015
Compiling @angular/common/http : fesm2015 as esm2015
Compiling @angular/forms : fesm2015 as esm2015
...
and after that the app runs just as intended:
ng build
'node-sass' usage is deprecated and will be removed in a future major version. To opt-out of the deprecated behaviour and start using 'sass' uninstall 'node-sass'.
? Browser application bundle generation complete.
? Copying assets complete.
? Index html generation complete.
Initial Chunk Files | Names | Size
vendor.js | vendor | 14.23 MB
main.js | main | 4.31 MB
styles.css | styles | 637.39 kB
polyfills-es5.js | polyfills-es5 | 583.94 kB
polyfills.js | polyfills | 148.32 kB
runtime.js | runtime | 6.15 kB
| Initial Total | 19.88 MB
Build at: 2021-01-26T13:06:31.502Z - Hash: 2340989d60fecfe588df - ....
Something might be blocking it, but I cannot find the root cause. Any ideas what can be the problem?
My Angular version:
$ ng version
_ _ ____ _ ___
/ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ | '_ / _` | | | | |/ _` | '__| | | | | | |
/ ___ | | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 11.1.1
Node: 12.3.1
OS: linux x64
Angular: 11.1.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1101.1
@angular-devkit/build-angular 0.1101.1
@angular-devkit/core 8.3.28
@angular-devkit/schematics 8.3.28
@angular/cli 11.1.1
@angular/http 7.2.16
@schematics/angular 8.3.28
@schematics/update 0.803.28
rxjs 6.6.0
typescript 4.0.5
webpack 4.43.0
tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"module": "esnext",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"target": "es5",
"typeRoots": ["node_modules/@types"],
"lib": ["es2017", "dom"],
}
}
package.json:
{
"name": "eets-frontend",
"version": "1.8.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
},
"dependencies": {
"@angular/animations": "^11.1.0",
"@angular/common": "^11.1.0",
"@angular/compiler": "^11.1.0",
"@angular/core": "^11.1.0",
"@angular/forms": "^11.1.0",
"@angular/http": "^7.2.16",
"@angular/platform-browser": "^11.1.0",
"@angular/platform-browser-dynamic": "^11.1.0",
"@angular/router": "^11.1.0",
...
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1101.1",
"@angular/cli": "^11.1.1",
"@angular/compiler-cli": "^11.1.0",
"@angular/language-service": "^11.1.0",
"@babel/core": "^7",
"@babel/preset-env": "latest",
"@commitlint/cli": "^8.3",
"@commitlint/config-angular": "latest",
"@cypress/code-coverage": "^1.1",
"@cypress/webpack-preprocessor": "^4.1",
"@istanbuljs/nyc-config-typescript": "^1",
"@types/crypto-js": "^3.1.44",
"@types/file-saver": "^2.0.1",
"@types/jasmine": "^3.5.8",
"@types/jasminewd2": "~2.0.8",
"@types/jszip": "^3.1.7",
"@types/lodash": "^4.14.149",
"@types/node": "^12.11.1",
"audit-ci": "latest",
"axe-core": "^3.4",
"babel-loader": "latest",
"babel-plugin-istanbul": "^6.0",
"codecov-json-to-lcov": "^1.1.1",
"codelyzer": "^5.1.2",
"commitlint-config-jira": "latest",
"commitlint-plugin-jira-rules": "latest",
"concurrently": "^5.2.0",
"cypress": "^4.8.0",
"cypress-autorecord": "^1.1",
"cypress-axe": "^0.6",
"cypress-plugin-snapshots": "^1.2",
"datalist-polyfill": "^1.24.0",
"husky": "^4.2.3",
"istanbul-instrumenter-loader": "^3.0",
"istanbul-lib-coverage": "^3.0",
"jasmine-core": "^3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"js-base64": "^2.5.2",
"jsonlint-cli": "^1.0.1",
"karma": "^5.2.3",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "~3.1.1",
"karma-jasmine-html-reporter": "^1.5.2",
"koa": "^2.12.0",
"koa-bodyparser": "^4.3.0",
"koa-router": "^8.0.8",
"koa-static": "^5.0.0",
"lint-staged": "^10.0.8",
"markdownlint-cli": "^0.22",
"ngx-build-plus": "^8",
"node-sass": "^4.14.1",
"nodemon": "^2.0.4",
"nyc": "^15.0",
"pa11y": "^5",
"prettier": "^2.0.0",
"protractor": "^7.0.0",
"protractor-istanbul-plugin": "^2.0.0",
"source-map-support": "^0.5",
"stylelint": "^13.2.1",
"stylelint-config-prettier": "latest",
"stylelint-config-recommended": "latest",
"stylelint-config-recommended-scss": "latest",
"stylelint-scss": "^3.10",
"ts-loader": "^6.2",
"ts-node": "^8.6",
"tslint": "^6.1.0",
"tslint-config-airbnb": "latest",
"tslint-config-prettier": "latest",
"tslint-consistent-codestyle": "latest",
"typescript": "4.0.5",
"wait-on": "^5.0.0",
"webpack": "^4",
"webpack-bundle-analyzer": "^3.6"
},
"resolutions": {
"js-base64": "2.5.2"
}
}
question from:
https://stackoverflow.com/questions/65901974/angular-11-is-not-running-ngcc 
