问题描述
我有一个托管在 .net core 3.1 应用程序中的 Angular 应用程序.我按照官方指南从 8 升级到 9,现在我的应用程序无法构建.我收到以下错误:
I have an Angular application that is hosted in a .net core 3.1 application. I upgraded from 8 to 9 following the official guide and now my application won't build. I get the following errors:
未找到模块:错误:无法解析‘@angular/cdk/layout/breakpoints’",字段‘浏览器’不包含有效的别名配置解析为模块在未找到描述文件中寻找模块字段浏览器"不包含有效的别名配置没有找到描述文件没有扩展字段浏览器"不包含有效的别名配置/@angular/cdk/layout/breakpoints不存在.ts"
对于 @angular/material/core/common-behaviors
、@angular/material/core/datetime
和 @angular,我遇到了上述相同的错误/material/core/ripple
.
我已经包含了所有我认为可能有用的文件.我多年来一直试图解决这个问题,但已经没有想法了.这很令人沮丧,请帮助.
I've included all the files that I thought may be helpful. I've been trying to fix this for ages and have run out of ideas. This is very frustrating, Please help.
package.json:
package.json:
{
"name": "myapp",
"private": true,
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --live-reload=false",
"build": "ng build",
"build:ssr": "ng run MIC:server:dev",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"eslint": "eslint src/**/*.ts",
"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
},
"postcss": {},
"dependencies": {
"@angular/animations": "9.0.0",
"@angular/cdk": "^9.0.0",
"@angular/common": "9.0.0",
"@angular/compiler": "9.0.0",
"@angular/core": "9.0.0",
"@angular/flex-layout": "9.0.0-beta.29",
"@angular/forms": "9.0.0",
"@angular/material": "9.0.0",
"@angular/material-moment-adapter": "^9.0.0",
"@angular/platform-browser": "9.0.0",
"@angular/platform-browser-dynamic": "9.0.0",
"@angular/platform-server": "9.0.0",
"@angular/router": "9.0.0",
"@fortawesome/angular-fontawesome": "0.6.0",
"@fortawesome/fontawesome-svg-core": "1.2.27",
"@fortawesome/free-regular-svg-icons": "5.12.1",
"@fortawesome/free-solid-svg-icons": "5.12.1",
"@microsoft/signalr": "3.1.0",
"@microsoft/signalr-protocol-msgpack": "3.1.0",
"@ng-bootstrap/ng-bootstrap": "^5.2.1",
"@ng-select/ng-select": "^3.7.2",
"@nguniversal/module-map-ngfactory-loader": "9.0.0-next.1",
"@popperjs/core": "2.0.5",
"@swimlane/ngx-charts": "13.0.2",
"angular-dual-listbox": "5.0.1",
"angular2-notifications": "3.0.0",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "4.4.1",
"classlist.js": "1.1.20150312",
"core-js": "3.6.4",
"date-fns": "2.9.0",
"hammer-timejs": "1.1.0",
"hammerjs": "2.0.8",
"hash-sum": "2.0.0",
"immutable": "3.8.2",
"intl": "1.2.5",
"jquery": "3.4.1",
"jwt-decode": "2.2.0",
"material-design-icons": "3.0.1",
"moment": "^2.24.0",
"ng-validator": "2.0.0",
"ngx-material-timepicker": "5.3.0",
"oidc-client": "1.10.1",
"primeicons": "2.0.0",
"primeng-lts": "8.1.4",
"rxjs": "6.5.4",
"tippy.js": "5.2.0",
"web-animations-js": "2.3.2",
"zone.js": "0.10.2"
},
"devDependencies":
{
"@angular-devkit/build-angular": "^0.900.1",
"@angular-devkit/core": "9.0.1",
"@angular-eslint/builder": "0.0.1-alpha.18",
"@angular-eslint/eslint-plugin": "0.0.1-alpha.18",
"@angular-eslint/eslint-plugin-template": "0.0.1-alpha.18",
"@angular-eslint/template-parser": "0.0.1-alpha.18",
"@angular/cli": "^9.0.1",
"@angular/compiler-cli": "9.0.0",
"@angular/language-service": "9.0.0",
"@intervolga/optimize-cssnano-plugin": "1.0.6",
"@types/jasmine": "3.5.3",
"@types/jasminewd2": "2.0.8",
"@types/jwt-decode": "2.2.1",
"@types/node": "13.7.0",
"@typescript-eslint/eslint-plugin": "2.19.0",
"@typescript-eslint/eslint-plugin-tslint": "2.19.0",
"@typescript-eslint/parser": "2.19.0",
"autoprefixer": "9.7.4",
"codelyzer": "5.2.1",
"eslint": "^6.8.0",
"jasmine-core": "3.5.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "4.4.1",
"karma-chrome-launcher": "3.1.0",
"karma-coverage-istanbul-reporter": "2.1.1",
"karma-jasmine": "3.1.0",
"karma-jasmine-html-reporter": "1.5.2",
"karma-scss-preprocessor": "4.0.0",
"typescript": "3.7.5"
},
"optionalDependencies": {
"node-sass": "4.13.1",
"protractor": "6.0.0",
"ts-node": "8.6.2"
}
}
angular.json:
angular.json:
{
"$schema": "node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"myapp": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"progress": true,
"verbose": false,
"extractCss": true,
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.browser.ts",
"polyfills": "src/polyfills/browser.polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/assets",
"src/favicon.ico"
],
"styles":
[
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@ng-select/ng-select/themes/default.theme.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng-lts/resources/themes/nova-light/theme.css",
"node_modules/primeng-lts/resources/primeng.css",
"node_modules/tippy.js/dist/backdrop.css",
"node_modules/tippy.js/dist/svg-arrow.css",
"node_modules/tippy.js/dist/tippy.css",
"src/myapp-theme.scss",
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "myapp:build"
},
"configurations": {
"production": {
"browserTarget": "myapp:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "myapp:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills/browser.polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/myapp-theme.scss",
"src/styles.scss"
],
"scripts": [],
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist-server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
},
"configurations": {
"dev": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": true
},
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false
}
}
}
}
},
"myapp-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "myapp:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "myapp",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
}
}
tsconfig.json:
tsconfig.json:
{
"compileOnSave": false,
"compilerOptions":
{
"baseUrl": "/",
"module": "esnext",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"skipDefaultLibCheck": true,
"strict": true,
"strictNullChecks": false,
"strictPropertyInitialization": false,
"target": "es2015",
"typeRoots":
[
"node_modules/@types",
"app_typings",
"src/types"
],
"lib":
[
"es2018",
"dom"
],
"types":
[
//"webpack-env"
],
"suppressImplicitAnyIndexErrors": true
},
"angularCompilerOptions":
{
//"fullTemplateTypeCheck": true,
//"strictInjectionParameters": true,
//"enableIvy": false
"fullTemplateTypeCheck": false,
"strictTemplates": false
},
"exclude":
[
"bin",
"node_modules"
],
"atom":
{
"rewriteTsconfig": false
}
}
推荐答案
试试看:
- 回滚所有更改
- 删除
node_modules
文件夹 npm i/yarn
npm install @angular/cli -g
ng update @angular/cli @angular/core --force
ng update --all --force
如果您有角材料,请将 @angular/material
添加到最后一个命令
如果你想通过 git commits 查看更改,请添加 --create-commits
这篇关于从 Angular 8 升级到 9 后的构建错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!