Question

我有一个有角度的项目，我想让谷歌地图模块（Googlemaps library）正常工作。我以前使用过这个库而没有这个问题。但出于某种原因，我现在遇到了这个问题。这种情况和以前的用例之间的一个区别是这次我懒得加载使用谷歌地图的模块。虽然admin.module文件导入谷歌地图模块的方式与我工作时的方式相同。我试图在admin.module中提供MapsApiLoader。但这不起作用，因为抛出了打字稿错误。这就是我的打字稿错误的样子，运行应用程序时控制台中的错误，以及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"
  }
}

App.module.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

您可能在使用谷歌地图 API 的模块的导入中缺少以下代码。

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

由于错误：没有MapsAPILoader的提供商，谷歌地图不会加载角度项目？

1 个答案: