Google maps won't load in angular project because of Error: No provider for MapsAPILoader? -




i have angular project , trying google maps module (googlemaps library) working. have used library before , not had issue. reason having issue now. 1 difference between situation , previous usecases time lazy loading module, uses google maps. although admin.module file imports google maps module in same way have done when have gotten work. have tried provide mapsapiloader in admin.module. not work because typescript error thrown. typescript error looks like, error in console when running app, , package.json . because have had working in app. feel dependency issue. suggestions why error thrown in console helpful. thanks!

i have edited include admin.module.ts , app.module.ts. admin.module.ts imported in app.module.ts , lazy loaded in app-routing.module.ts

enter image description here

enter image description here

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





wiki

Comments

Popular posts from this blog

Asterisk AGI Python Script to Dialplan does not work -

python - Read npy file directly from S3 StreamingBody -

kotlin - Out-projected type in generic interface prohibits the use of metod with generic parameter -