Angular 11 不是 运行 ngcc
Angular 11 is not running ngcc
我有一个旧的 Angular 应用程序，我已经从 Angular 9 升级到 Angular 11。（这些年来它有很多稳定的升级，从 Angular 2)
我的问题是 ngcc 不是 运行ning 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;
~~~~~~~~~~~~~~~~~~~
我真的很需要它，你可以看到有些包有 old dependency issues ngcc 可以解决。我认为当我们使用 Ivy 时，运行ning 它将默认成为 build 的一部分。我能够 运行 手动执行命令 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
...
然后应用 运行 就如预期的那样：
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 - ....
可能有什么东西阻止了它，但我找不到根本原因。任何想法可能是什么问题？
我的Angular版本：
$ 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"
}
}
我的问题是另一个 tsconfig 文件覆盖了 root 的定义，并完全关闭了 ivy 和 ngcc。
sr5c/tsconfig.app.json:
{
"extends": "../tsconfig.json",
...
你可以试试：
将这些命令添加到 scripts 中的 package.json:
{
"scripts": {
// ...
"ngcc": "ngcc --properties es2015 browser main module --async false --first-only",
"postinstall": "npm run ngcc",
}
}
删除node_modules文件夹，然后重新安装依赖项。
run rm -fr node_modules and then npm install.
如果你使用CI，这个例子是一个想法，否则你可以只使用"postinstall":"ngcc"
我有一个旧的 Angular 应用程序，我已经从 Angular 9 升级到 Angular 11。（这些年来它有很多稳定的升级，从 Angular 2)
我的问题是 ngcc 不是 运行ning 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;
~~~~~~~~~~~~~~~~~~~
我真的很需要它，你可以看到有些包有 old dependency issues ngcc 可以解决。我认为当我们使用 Ivy 时，运行ning 它将默认成为 build 的一部分。我能够 运行 手动执行命令 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
...
然后应用 运行 就如预期的那样：
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 - ....
可能有什么东西阻止了它，但我找不到根本原因。任何想法可能是什么问题？
我的Angular版本：
$ 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"
}
}
我的问题是另一个 tsconfig 文件覆盖了 root 的定义，并完全关闭了 ivy 和 ngcc。
sr5c/tsconfig.app.json:
{
"extends": "../tsconfig.json",
...
你可以试试：
将这些命令添加到 scripts 中的
package.json:{ "scripts": { // ... "ngcc": "ngcc --properties es2015 browser main module --async false --first-only", "postinstall": "npm run ngcc", } }删除node_modules文件夹，然后重新安装依赖项。
run
rm -fr node_modulesand thennpm install.
如果你使用CI，这个例子是一个想法，否则你可以只使用"postinstall":"ngcc"