从Angular 8升级到9后生成错误

时间:2020-02-09 22:00:20

标签: angular typescript .net-core angular-material angular-cli

我有一个托管在.net core 3.1应用程序中的Angular应用程序。我已按照官方指南从8升级到9,现在无法构建我的应用程序。我收到以下错误:

“未找到模块:错误:无法解析'@ angular / cdk / layout / breakpoints'”,“字段“浏览器”不包含有效的别名配置,解析为模块,在未找到描述文件中查找模块字段“浏览器”不包含有效的别名配置找不到描述文件,没有扩展名字段“浏览器”不包含有效的别名配置/ @ angular / cdk / layout / breakpoints不存在.ts“

我在@angular/material/core/common-behaviors@angular/material/core/datetime@angular/material/core/ripple上遇到相同的错误。

我已包含所有我认为可能会有所帮助的文件。我一直在尝试修复此问题,并且用尽了所有想法。这非常令人沮丧,请帮助。

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:

{
  "$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:

{
  "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
  }
}

2 个答案:

答案 0 :(得分:2)

尝试:

  • 回滚所有更改
  • 删除node_modules文件夹
  • npm i / yarn
  • npm install @angular/cli -g
  • ng update @angular/cli @angular/core --force
  • ng update --all --force

如果您有棱角材料,请在最后一个命令中添加@angular/material
如果要通过git commit查看更改,请添加--create-commits

答案 1 :(得分:0)

以防万一

Angular编译器中的错误需要TypeScript> = 3.6.4和<3.9.0,但是找到了3.9.5。

尝试 npm我typescript@3.8