第一次使用firestore,我得到这个错误。根据我的研究,这似乎是艾薇的问题。我没有太多修改tsconfig.app的经验。json,这是我所指向的方向,然后是其他答案。

我唯一能从最初的项目中修改的是使用Angular Fire 6而不是5,我最初是按照教程做的。

package.json:

{
  "name": "language",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.0.1",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "~9.0.1",
    "@angular/compiler": "~9.0.1",
    "@angular/core": "~9.0.1",
    "@angular/fire": "^6.0.0-rc.1",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "~9.0.1",
    "@angular/material": "^9.0.0",
    "@angular/platform-browser": "~9.0.1",
    "@angular/platform-browser-dynamic": "~9.0.1",
    "@angular/router": "~9.0.1",
    "firebase": "^7.8.2",
    "rxjs": "~6.5.4",
    "rxjs-compat": "^6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.2",
    "@angular/cli": "~9.0.2",
    "@angular/compiler-cli": "~9.0.1",
    "@angular/language-service": "~9.0.1",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.7.5",
    "@angular-devkit/architect": "^0.900.0-0 || ^0.900.0",
    "firebase-tools": "^7.12.1",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "language": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/language",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "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,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "language:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "language:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "language:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "language:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "language:serve:production"
            }
          }
        },
        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {}
        }
      }
    }
  },
  "defaultProject": "language"
}

tsconfig.app.json

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

谢谢!


当前回答

对我来说,固定的是匹配角材料和适配器的版本到另一个角模块的最低版本。然后重新安装并重新运行。

    "@angular-devkit/schematics": "^10.1.2",
    "@angular/animations": "^10.1.2",
    "@angular/cdk": "^10.2.1",
    "@angular/common": "10.1.2",
    "@angular/compiler": "10.1.2",
    "@angular/core": "10.1.2",
    "@angular/forms": "10.1.2",
    "@angular/localize": "^10.1.2",
    "@angular/material": "^10.2.1",
    "@angular/material-moment-adapter": "^10.2.1",
    "@angular/platform-browser": "10.1.2",
    "@angular/platform-browser-dynamic": "10.1.2",
    "@angular/router": "10.1.2",

如你所见,我的cdk是10.2.1,我的材料也是10.2.1。 我看到使用的最低版本是10.1.2,所以我改变了版本:

    "@angular/material": "^10.1.2", (was 10.2.1)
    "@angular/material-moment-adapter": "^10.1.2", (was 10.2.1)

到10.1.2,运行"npm install",然后运行"ng serve",编译成功。

其他回答

当您导入一些在组件中没有使用的mat组件时,也会发生这种情况。

if you have all mat components imported in you app.module.ts you have imported some mat components and you have not used any of the components in imports and exports arrays in app.module.ts means no issues no errors will throw works fine. if you create feature module for that let say by ng g m material this will create material.module.ts filename. now we have to copy all mat import statements to newly created feature module before copying keep in mind is any import statements grayed out or not(some indication IDE shows this name is not used). if grayed out means you have to remove those names then copy and paste it to MaterialModule imports and exports array. that's solve.

App.Module.ts 您可以通过在Provider中添加注入而不是导入或声明来解决这个错误。 内部Service.ts 在类上添加@injectable

ex:

@Injectable()
 export class WebApiService {   }

即使你给他们空间也不一定有用

ex:

@Injectable()


export class WebApiService {    }

当使用错误的导入(例如使用autoimport)时,也会发生这种情况。让我们以MatTimePickerModule为例。这将给出一个错误信息,类似于问题中描述的错误信息:

import { NgxMatTimepickerModule } from '@angular-material-components/datetime-picker/lib/timepicker.module';

这应该是

import { NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';

对我来说,固定的是匹配角材料和适配器的版本到另一个角模块的最低版本。然后重新安装并重新运行。

    "@angular-devkit/schematics": "^10.1.2",
    "@angular/animations": "^10.1.2",
    "@angular/cdk": "^10.2.1",
    "@angular/common": "10.1.2",
    "@angular/compiler": "10.1.2",
    "@angular/core": "10.1.2",
    "@angular/forms": "10.1.2",
    "@angular/localize": "^10.1.2",
    "@angular/material": "^10.2.1",
    "@angular/material-moment-adapter": "^10.2.1",
    "@angular/platform-browser": "10.1.2",
    "@angular/platform-browser-dynamic": "10.1.2",
    "@angular/router": "10.1.2",

如你所见,我的cdk是10.2.1,我的材料也是10.2.1。 我看到使用的最低版本是10.1.2,所以我改变了版本:

    "@angular/material": "^10.1.2", (was 10.2.1)
    "@angular/material-moment-adapter": "^10.1.2", (was 10.2.1)

到10.1.2,运行"npm install",然后运行"ng serve",编译成功。

此错误显示当您在imports中添加组件声明:[]而不是声明:[]时,例如:

declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  AppRoutingModule,
  SomeComponent <-----------wrong
],