angular - 由于错误 : No provider for MapsAPILoader?，Google map 无法加载到 Angular 项目中

Question

我有一个 Angular 项目，我正在尝试让谷歌地图模块 ( Googlemaps library ) 工作。我以前用过这个库，没有遇到过这个问题。但出于某种原因，我现在遇到了这个问题。这种情况与以前的用例之间的一个区别是这次我懒加载使用谷歌地图的模块。尽管 admin.module 文件导入 google maps 模块的方式与我在它工作时所做的方式相同。我试图在 admin.module 中提供 MapsApiLoader。但这不起作用，因为会抛出 typescript 错误。这是我的 typescript 错误的样子，运行应用程序时控制台中的错误，以及 package.json 的样子。因为我已经在另一个应用程序中使用了它。我觉得这是一个依赖性问题。但是关于为什么在控制台中抛出此错误的任何建议都会有所帮助。谢谢!

我已对其进行编辑以包含 admin.module.ts 和 app.module.ts。 admin.module.ts 在 app.module.ts 中导入，在 app-routing.module.ts 中延迟加载

{
  "name": "admin-guest",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.0",
    "@angular/animations": "^4.3.5",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/flex-layout": "^2.0.0-beta.8",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@types/googlemaps": "^3.26.20",
    "core-js": "^2.4.1",
    "ng2-facebook-sdk": "^2.1.1",
    "angular2-google-maps": "^0.16.0",
    "ng2-img-cropper": "^0.9.0",
    "ngx-facebook": "^2.4.0",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.2.7",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^6.0.87",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.2.0"
  }
}

应用程序模块.ts

@NgModule({
  declarations: [
    AppComponent,
    SplashComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MdMenuModule,
    MdButtonModule,
    FlexLayoutModule,
    MdCardModule,
    GuestModule,
    AdminModule,
    MdIconModule

  ],
  providers: [
    AuthguardService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

admin.module.ts

@NgModule({
  declarations: [
    AdminComponent,
    LoginComponent,
    DisplayRecommendationsComponent,
    DisplayEventsComponent,
    GuestHomepageComponent,
    MovieDialog,
    SettingsComponent,
    CreateComponent,
    WelcomeComponent,
    GoogleMapComponent,
    GoogleuxComponent,
    CreateEventComponent,
    CreateRecommendationComponent,
    UsernameComponent,
    PasswordComponent,
    EmailComponent,
    ImageComponent,
    InstagramComponent,
    LocationComponent,
    AboutComponent,
    AboutmeComponent,
    InstagramHelp,
    SignupComponent,
    TermsDialog,
    PasswordReset,
    ChangePasswordComponent,
    HelpComponent,
    EditRecommendationComponent,
    FbComponent,
    ImageCropperUploaderComponent,
    ChangeEmployeeImage,
    MultipleImageCropperComponent,
    SignupImageCropperComponent,
    NofacebookloginComponent,
    AddSettingsComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    MdMenuModule,
    MdButtonModule,
    MdCardModule,
    MdGridListModule,
    MdIconModule,
    MdInputModule,
    MdInputModule,
    MdDialogModule,
    AppRoutingModule,
    MdNativeDateModule,
    MdDatepickerModule,
    MdToolbarModule,
    FlexLayoutModule,
    MdTooltipModule,
    FacebookModule.forRoot(),
    AgmCoreModule.forRoot(
      {
        apiKey:'***',
        libraries: ["places"]
      }
    ),
    ImageCropperModule
  ],
  providers: [
    EmployeeHttpService,
    EmployeeService,
    UserLoaded,
    MoreInfo,
    DeserializationService,
    NewImageService,
    HttpService,
    SplashHttp,
    FacebookService,
    ApiKeyService,
    ContentService,
    AuthguardService,
    ImagePathService,
    AWSuploadService,
    EmployeeErrorService,
    LocationService,
    LoginService,
    ResponseService
  ],
  entryComponents:[
    MovieDialog,
    InstagramHelp,
    TermsDialog,
    PasswordReset,
    HelpComponent,
    EditRecommendationComponent,
    ImageCropperUploaderComponent,
    ChangeEmployeeImage,
    MultipleImageCropperComponent,
    SignupImageCropperComponent
  ]
})
export class AdminModule { }

Answer 1

对于使用 google maps API 的模块，您可能在导入中缺少以下代码。

AgmCoreModule.forRoot({
 apiKey: '',
}),