Angular 11无法运行ngcc。

5
我有一个旧的Angular应用程序,我已经将其从Angular 9升级到Angular 11。(它在多年间进行了许多稳定的升级,从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"
  }
}


1
不要在超过1个主要版本之间升级。这将帮助您将问题追踪到1个版本,而不是2个或更多。 - user13258211
我按照官方指南的建议,先从ng9升级到ng10,然后再从ng10升级到ng11。 - ForestG
2个回答

9

你可以尝试:

  1. add these commands to package.json in scripts:

      {
        "scripts": {
          // ...
          "ngcc": "ngcc --properties es2015 browser main module --async false --first-only",
         "postinstall": "npm run ngcc",
       }
     }
    
  2. delete the node_modules folder and then install the dependencies again.

    run rm -fr node_modules and then npm install.

如果您使用CI,可以使用此示例,否则可以只使用"postinstall":"ngcc"

Ivy和Universal / App shell


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

sr5c/tsconfig.app.json:

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

2
这对Ivy没有任何影响,这只是一个扩展另一个tsconfig的配置文件...我不明白这怎么能解决问题。需要明确的是,“extends”属性并不会“覆盖”根目录,它像类继承一样“扩展”它。您未定义的任何属性都将从扩展的父级继承。 - dudewad

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接