Angular 11 未运行ngcc

Question

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)

我的问题是， ngcc没有运行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;
                                                        ~~~~~~~~~~~~~~~~~~~

我真的需要它，因为你可以看到一些包有 ngcc 可以解决的 旧依赖问题。 我认为当我们使用 Ivy 时，默认情况下运行它将成为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"
  }
}

Answer 1

你可以试试：

1. 在脚本中将这些命令添加到package.json中：

    { "scripts": { //... "ngcc": "ngcc --properties es2015 browser main module --async false --first-only", "postinstall": "npm run ngcc", } }

2. 删除node_modules文件夹，然后再次安装依赖项。

   运行rm -fr node_modules然后npm install 。

这个例子是一个想法，如果你使用CI ，否则你可以只使用"postinstall":"ngcc"

常春藤和通用/应用程序 shell

Answer 2

我的问题是另一个tsconfig文件覆盖了根的定义，并完全关闭了 ivy 和 ngcc。

sr5c/tsconfig.app.json ：

{
  "extends": "../tsconfig.json",
  ...