Angular 9:升级到Angular 9“ 9.0.0-rc.5”时出错

时间:2019-12-21 12:32:54

标签: angular angular-cli

将项目从8升级到9时出现错误。 我的项目构建和运行在终端的控制台中出现任何错误,但在进入http://localhost:4200的chrome中,我在chrome的控制台中遇到以下错误:

Error: Dependency array must have arguments.
at reflectDependency (core.js:17943)
at core.js:17916
at Array.map (<anonymous>)
at convertDependencies (core.js:17912)
at reflectDependencies (core.js:17903)
at directiveMetadata (core.js:39767)
at getDirectiveMetadata (core.js:39711)
at Function.get (core.js:39688)
at getDirectiveDef (core.js:1855)
at addDirectiveDefToUndecoratedParents (core.js:39795)

我的项目的@ngModule不仅改变了依赖关系,而且我不知道为什么依赖关系数组为空。

这是我实际的package.json:

"devDependencies": {
    "@angular-builders/custom-webpack": "^8.1.0-beta.0",
    "@angular-devkit/architect": "^0.900.0-rc.5",
    "@angular-devkit/build-angular": "~0.900.0-rc.5",
    "@angular-devkit/build-ng-packagr": "~0.900.0-rc.5",
    "@angular-devkit/build-webpack": "~0.900.0-rc.5",
    "@angular-devkit/core": "^9.0.0-rc.5",
    "@angular-devkit/schematics": "9.0.0-rc.5",
    "@angular/cli": "9.0.0-rc.5",
    "@angular/compiler-cli": "9.0.0-rc.5",
    "@angular/language-service": "9.0.0-rc.5",
    "@commitlint/cli": "^7.2.1",
    "@compodoc/compodoc": "1.1.6",
    "@nrwl/schematics": "7.1.1",
    "@types/googlemaps": "^3.30.8",
    "@types/highlight.js": "^9.12.3",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.2",
    "@types/jest": "^23.3.11",
    "@types/lunr": "^2.1.5",
    "@types/node": "^6.0.105",
    "@types/pdfjs-dist": "2.0.0",
    "@types/url-parse": "^1.1.0",
    "angular-cli-builders": "^2.1.0",
    "babel-core": "^6.26.3",
    "codelyzer": "^5.1.2",
    "commitizen": "^3.0.5",
    "conventional-changelog-cli": "^2.0.1",
    "cz-customizable": "^5.3.0",
    "fs-extra": "^6.0.1",
    "gulp": "^4.0.2",
    "gulp-file": "^0.4.0",
    "gulp-foreach": "^0.1.0",
    "gulp-replace": "^0.6.1",
    "highlight.js": "^9.12.0",
    "husky": "^1.3.1",
    "jasmine": "~2.99.0",
    "jasmine-core": "~2.99.1",
    "jasmine-marbles": "^0.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "jest": "^23.6.0",
    "karma": "~2.0.4",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-scss-preprocessor": "^3.0.0",
    "lint-staged": "^8.1.0",
    "marked": "^0.4.0",
    "ng-packagr": "^9.0.0-rc.2",
    "ngx-speculoos": "^0.2.3",
    "node-minify": "^3.1.0",
    "node-sass": "^4.13.0",
    "node-sass-tilde-importer": "^1.0.2",
    "optimist": "^0.6.1",
    "prettier": "^1.15.3",
    "protractor": "~5.1.2",
    "shallow-render": "7.0.0",
    "ts-jest": "^22.4.5",
    "ts-node": "^8.3.0",
    "tsickle": ">=0.25.5",
    "tslib": "^1.10.0",
    "tslint": "^5.10.0",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "^3.6.4"
  },```

thanks in advance for your answers.




3 个答案:

答案 0 :(得分:1)

如果您仍要从角度8升级到9 , 只需执行以下操作:

    ng update @angular/core @angular/cli

如果依赖项仍然存在一些问题或其他原因,请强制所有更新:

    ng update --all --force

使用以下方法检查您的角度版本:

    ng --version

答案 1 :(得分:0)

运行npm audit命令并在升级角度后获得现有冲突。可能是某些第三方库可能与最新的angular不兼容。根据上述命令的输出,您可能会有所了解。

答案 2 :(得分:0)

角度升级到9.x

我已经为我们的项目做过记录,可能会对您有所帮助。如果您发现任何挑战,可以随时询问将很乐意为您提供帮助。

请按照以下步骤操作,具体取决于您的要求。

用于路由

const routes: Routes = [
 { 
  path: 'lazy',
  loadChildren: './lazy/lazy.module#LazyModule', // use this syntax for non-ivy or Angular 7 and below
loadChildren : () => import('./lazy/lazy.module').then(m => m.LazyModule)**, // new dynamic import method in angular 8 or above
  }
];

———————————————————————— 注意:

错误TS1323:仅当'--module'标志为'commonjs'或'esNext' **

时,才支持动态导入

解决方案上述问题

您正在使用动态导入,因此必须像这样更改tsconfig.json才能将代码定位到esnext模块**

{
"compileOnSave":  false,
"compilerOptions":  {
"baseUrl":  "./",
"outDir":  "./dist/out-tsc",
"sourceMap":  true,
"declaration":  false,
"module":  "esnext",  // add this line**
"moduleResolution":  "node",
"emitDecoratorMetadata":  true,
"experimentalDecorators":  true,
"importHelpers":  true,
"target":  "es2015",
"typeRoots":  [
"node_modules/@types"
],
"lib":  ["es2018","dom"]
  }
}

注意:

还要确保检查tsconfig.app.json没有类似这样的模块和目标配置**

{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"include": [
"src/**/*.ts"
],
"exclude": [
"src/test.ts",
"src/**/*.spec.ts"
 ]
}

注意:**以下情况仅适用于角钢,如果您使用的是角钢,则必须导入特定的进口,如下所示,我的清单很小 ———————————————————————— _ErrorMessage:_ 找不到角材料

_—解决方案_

import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatNativeDateModule, MatOptionModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatNativeDateModule,} from '@angular/material/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

================================================ =======

使用以下编码更新角度项目

ng更新 ng update @ angular / core

================================================ ======= 如果遇到以下我提到的错误,则只需配置 tsconfig.app.json

错误消息:

TypeScript编译,但未使用。 仅将入口点添加到tsconfig中的“文件”或“包含”属性。

tsconfig.app.json

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
// "module": "es2015",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts",
" ../../environments/*.ts"
 ],
}

___在某些项目中,该文件将类似于—> tsconfig.app.json


{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.ts"
],
"exclude": [
"src/test.ts",
"src/**/*.spec.ts",
"**/*.spec.ts",
"src/././environments/*.ts"
]
}