本文介绍了从 Angular 8 升级到 9 后的构建错误的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个托管在 .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 后的构建错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-31 18:46