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
{ "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
Post a Comment