Angular 11 未运行 ngcc

Question

我有一个旧的 Angular 应用程序，我已将其从 Angular 9 升级到 Angular 11。（从 Angular 2 开始，多年来它进行了许多稳定的升级）

\n

我的问题是，它ngcc没有运行ng build：

\n

$ ng build\n    \'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\'.\n\xe2\x9c\x94 Browser application bundle generation complete.\n\nError: node_modules/ngx-device-detector/index.d.ts:3:23 - error TS2314: Generic type \'ModuleWithProviders<T>\' requires 1 type argument(s).\n\n3     static forRoot(): ModuleWithProviders;\n                        ~~~~~~~~~~~~~~~~~~~\nnode_modules/@ngx-translate/core/public_api.d.ts:22:53 - error TS2314: Generic type \'ModuleWithProviders<T>\' requires 1 type argument(s).\n\n22     static forRoot(config?: TranslateModuleConfig): ModuleWithProviders;\n                                                       ~~~~~~~~~~~~~~~~~~~\nnode_modules/@ngx-translate/core/public_api.d.ts:26:54 - error TS2314: Generic type \'ModuleWithProviders<T>\' requires 1 type argument(s).\n\n26     static forChild(config?: TranslateModuleConfig): ModuleWithProviders;\n                                                        ~~~~~~~~~~~~~~~~~~~\n

\n

我真的很需要它，因为你可以看到一些软件包存在ngcc 可以解决的旧依赖问题。我认为当我们使用 Ivy 时，运行它将成为build默认的一部分。我能够手动运行命令npx ngcc：

\n

forest@forest:~/....$ npx ngcc\nCompiling @angular/core : fesm2015 as esm2015\nCompiling @angular/animations : fesm2015 as esm2015\nCompiling @angular/compiler/testing : fesm2015 as esm2015\nCompiling @angular/animations : esm2015 as esm2015\nCompiling @angular/animations : main as umd\nCompiling @angular/compiler/testing : esm2015 as esm2015\nCompiling @angular/compiler/testing : main as umd\nCompiling @angular/common : fesm2015 as esm2015\nCompiling @ngx-translate/core : fesm2015 as esm2015\nCompiling @ngx-translate/core : fesm2015 as esm2015\nCompiling @angular/platform-browser : fesm2015 as esm2015\nCompiling @angular/common/http : fesm2015 as esm2015\nCompiling @angular/forms : fesm2015 as esm2015\n\n...\n\n

\n

之后应用程序按预期运行：

\n

ng build\n    \'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\'.\n\xe2\x9c\x94 Browser application bundle generation complete.\n\xe2\x9c\x94 Copying assets complete.\n\xe2\x9c\x94 Index html generation complete.\n                                                                                                                                                        \nInitial Chunk Files | Names         |      Size                                                                                                         \nvendor.js           | vendor        |  14.23 MB                                                                                                         \nmain.js             | main          |   4.31 MB                                                                                                         \nstyles.css          | styles        | 637.39 kB\npolyfills-es5.js    | polyfills-es5 | 583.94 kB\npolyfills.js        | polyfills     | 148.32 kB\nruntime.js          | runtime       |   6.15 kB\n\n                    | Initial Total |  19.88 MB\n\nBuild at: 2021-01-26T13:06:31.502Z - Hash: 2340989d60fecfe588df - ....\n

\n

可能有什么东西阻碍了它，但我找不到根本原因。有什么想法可能是什么问题吗？

\n

我的角度版本：

\n

$ ng version\n\n     _                      _                 ____ _     ___\n    / \\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|\n   / \xe2\x96\xb3 \\ | \'_ \\ / _` | | | | |/ _` | \'__|   | |   | |    | |\n  / ___ \\| | | | (_| | |_| | | (_| | |      | |___| |___ | |\n /_/   \\_\\_| |_|\\__, |\\__,_|_|\\__,_|_|       \\____|_____|___|\n                |___/\n    \n\nAngular CLI: 11.1.1\nNode: 12.3.1\nOS: linux x64\n\nAngular: 11.1.0\n... animations, common, compiler, compiler-cli, core, forms\n... language-service, platform-browser, platform-browser-dynamic\n... router\nIvy Workspace: Yes\n\nPackage                         Version\n---------------------------------------------------------\n@angular-devkit/architect       0.1101.1\n@angular-devkit/build-angular   0.1101.1\n@angular-devkit/core            8.3.28\n@angular-devkit/schematics      8.3.28\n@angular/cli                    11.1.1\n@angular/http                   7.2.16\n@schematics/angular             8.3.28\n@schematics/update              0.803.28\nrxjs                            6.6.0\ntypescript                      4.0.5\nwebpack                         4.43.0\n\n

\n

tsconfig.json:

\n

{\n  "compileOnSave": false,\n  "compilerOptions": {\n    "baseUrl": "./",\n    "module": "esnext",\n    "outDir": "./dist/out-tsc",\n    "sourceMap": true,\n    "declaration": false,\n    "moduleResolution": "node",\n    "emitDecoratorMetadata": true,\n    "experimentalDecorators": true,\n    "allowSyntheticDefaultImports": true,\n    "target": "es5",\n    "typeRoots": ["node_modules/@types"],\n    "lib": ["es2017", "dom"],\n  }\n}\n

\n

package.json:

\n

{\n  "name": "eets-frontend",\n  "version": "1.8.0",\n  "scripts": {\n    "ng": "ng",\n    "start": "ng serve",\n  },\n\n  "dependencies": {\n    "@angular/animations": "^11.1.0",\n    "@angular/common": "^11.1.0",\n    "@angular/compiler": "^11.1.0",\n    "@angular/core": "^11.1.0",\n    "@angular/forms": "^11.1.0",\n    "@angular/http": "^7.2.16",\n    "@angular/platform-browser": "^11.1.0",\n    "@angular/platform-browser-dynamic": "^11.1.0",\n    "@angular/router": "^11.1.0",\n  ...\n    "tslib": "^1.10.0",\n    "zone.js": "~0.10.2"\n  },\n  "devDependencies": {\n    "@angular-devkit/build-angular": "^0.1101.1",\n    "@angular/cli": "^11.1.1",\n    "@angular/compiler-cli": "^11.1.0",\n    "@angular/language-service": "^11.1.0",\n    "@babel/core": "^7",\n    "@babel/preset-env": "latest",\n    "@commitlint/cli": "^8.3",\n    "@commitlint/config-angular": "latest",\n    "@cypress/code-coverage": "^1.1",\n    "@cypress/webpack-preprocessor": "^4.1",\n    "@istanbuljs/nyc-config-typescript": "^1",\n    "@types/crypto-js": "^3.1.44",\n    "@types/file-saver": "^2.0.1",\n    "@types/jasmine": "^3.5.8",\n    "@types/jasminewd2": "~2.0.8",\n    "@types/jszip": "^3.1.7",\n    "@types/lodash": "^4.14.149",\n    "@types/node": "^12.11.1",\n    "audit-ci": "latest",\n    "axe-core": "^3.4",\n    "babel-loader": "latest",\n    "babel-plugin-istanbul": "^6.0",\n    "codecov-json-to-lcov": "^1.1.1",\n    "codelyzer": "^5.1.2",\n    "commitlint-config-jira": "latest",\n    "commitlint-plugin-jira-rules": "latest",\n    "concurrently": "^5.2.0",\n    "cypress": "^4.8.0",\n    "cypress-autorecord": "^1.1",\n    "cypress-axe": "^0.6",\n    "cypress-plugin-snapshots": "^1.2",\n    "datalist-polyfill": "^1.24.0",\n    "husky": "^4.2.3",\n    "istanbul-instrumenter-loader": "^3.0",\n    "istanbul-lib-coverage": "^3.0",\n    "jasmine-core": "^3.5.0",\n    "jasmine-spec-reporter": "~4.2.1",\n    "js-base64": "^2.5.2",\n    "jsonlint-cli": "^1.0.1",\n    "karma": "^5.2.3",\n    "karma-chrome-launcher": "~3.1.0",\n    "karma-coverage-istanbul-reporter": "^2.1.1",\n    "karma-jasmine": "~3.1.1",\n    "karma-jasmine-html-reporter": "^1.5.2",\n    "koa": "^2.12.0",\n    "koa-bodyparser": "^4.3.0",\n    "koa-router": "^8.0.8",\n    "koa-static": "^5.0.0",\n    "lint-staged": "^10.0.8",\n    "markdownlint-cli": "^0.22",\n    "ngx-build-plus": "^8",\n    "node-sass": "^4.14.1",\n    "nodemon": "^2.0.4",\n    "nyc": "^15.0",\n    "pa11y": "^5",\n    "prettier": "^2.0.0",\n    "protractor": "^7.0.0",\n    "protractor-istanbul-plugin": "^2.0.0",\n    "source-map-support": "^0.5",\n    "stylelint": "^13.2.1",\n    "stylelint-config-prettier": "latest",\n    "stylelint-config-recommended": "latest",\n    "stylelint-config-recommended-scss": "latest",\n    "stylelint-scss": "^3.10",\n    "ts-loader": "^6.2",\n    "ts-node": "^8.6",\n    "tslint": "^6.1.0",\n    "tslint-config-airbnb": "latest",\n    "tslint-config-prettier": "latest",\n    "tslint-consistent-codestyle": "latest",\n    "typescript": "4.0.5",\n    "wait-on": "^5.0.0",\n    "webpack": "^4",\n    "webpack-bundle-analyzer": "^3.6"\n  },\n  "resolutions": {\n    "js-base64": "2.5.2"\n  }\n}\n\n

\n

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"

Ivy 和 Universal / App shell

Answer 2

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

sr5c/tsconfig.app.json:

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