第一次使用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"
  ]
}

谢谢!


当前回答

我不知道为什么,但我能解决它的唯一方法是:

导入模块而不是组件 将文件夹名称/my-component-y/与MyComponentY匹配。我有/component-y/和mycomponent .ts

根组件是惰性加载的,因为它是用于多站点的,如果这有任何区别的话。

最好的解决方案是使用React/Next.js代替这个旧的hack框架。

其他回答

根据文档,修正了选择退出常春藤的问题。

https://angular.io/guide/ivy

更改tsconfig.app.json以选择退出Ivy。

"enableIvy": false

当您导入一些在组件中没有使用的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.

如果 使用root帐户运行NPM install或yarn install 而且 使用非root帐户运行ng serve, 您将遇到这个问题。

处理: 使用root帐户启动服务器

我在导入mat-list。我的错误在于使用了以下语句:

import { MatList } from "@angular/material/list";
@NgModule({
  exports: [
    MatList,
  ]
})

我忘记在导入和导出声明中添加'Module'后缀。以下方法解决了这个问题:

import { MatListModule } from "@angular/material/list";
@NgModule({
  exports: [        
    MatListModule, // <-- Add 'Module' suffix here!
  ]
})

我简单地把import from {AngularFirestore} from '@angular/fire/firestore'改成import from {AngularFirestore}; 来 import {AngularFirestoreModule} from '@angular/fire/firestore';

它运行得很好