将项目从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.
答案 0 :(得分:1)
如果您仍要从角度8升级到9 , 只需执行以下操作:
ng update @angular/core @angular/cli
如果依赖项仍然存在一些问题或其他原因,请强制所有更新:
ng update --all --force
使用以下方法检查您的角度版本:
ng --version
答案 1 :(得分:0)
运行npm audit
命令并在升级角度后获得现有冲突。可能是某些第三方库可能与最新的angular不兼容。根据上述命令的输出,您可能会有所了解。
答案 2 :(得分:0)
我已经为我们的项目做过记录,可能会对您有所帮助。如果您发现任何挑战,可以随时询问将很乐意为您提供帮助。
请按照以下步骤操作,具体取决于您的要求。
用于路由
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"
]
}