J'essaie d'ajouter l'AGM angulaire Google Maps ( https://github.com/SebastianM/angular-google-maps ) à mon projet Angular4.
Guide suivi: https://github.com/SebastianM/angular-google-maps/blob/master/docs/getting-started.jade
L'erreur que je reçois lorsque je visite la page avec le composant agm:
core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'latitude' since it isn't a known property of 'agm-map'.
1. If 'agm-map' is an Angular component and it has 'latitude' input, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("th:100%;height:auto;" src="/assets/common/images/live-demo.png">-->
<agm-map [ERROR ->][latitude]="lat" [longitude]="lng">
<!--<agm-map-marker [latitude]="lat" [longit"): ng:///MainModule/SiteMapComponent.html@22:29
Can't bind to 'longitude' since it isn't a known property of 'agm-map'.
1. If 'agm-map' is an Angular component and it has 'longitude' input, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("to;" src="/assets/common/images/live-demo.png">-->
<agm-map [latitude]="lat" [ERROR ->][longitude]="lng">
<!--<agm-map-marker [latitude]="lat" [longitude]="lng"></agm-"): ng:///MainModule/SiteMapComponent.html@22:46
'agm-map' is not a known element:
1. If 'agm-map' is an Angular component, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("tyle="width:100%;height:auto;" src="/assets/common/images/live-demo.png">-->
[ERROR ->]<agm-map [latitude]="lat" [longitude]="lng">
<!--<agm-map-marker [latitude]="lat"): ng:///MainModule/SiteMapComponent.html@22:20
Error: Template parse errors:
Can't bind to 'latitude' since it isn't a known property of 'agm-map'.
1. If 'agm-map' is an Angular component and it has 'latitude' input, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("th:100%;height:auto;" src="/assets/common/images/live-demo.png">-->
<agm-map [ERROR ->][latitude]="lat" [longitude]="lng">
<!--<agm-map-marker [latitude]="lat" [longit"): ng:///MainModule/SiteMapComponent.html@22:29
Can't bind to 'longitude' since it isn't a known property of 'agm-map'.
1. If 'agm-map' is an Angular component and it has 'longitude' input, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("to;" src="/assets/common/images/live-demo.png">-->
<agm-map [latitude]="lat" [ERROR ->][longitude]="lng">
<!--<agm-map-marker [latitude]="lat" [longitude]="lng"></agm-"): ng:///MainModule/SiteMapComponent.html@22:46
'agm-map' is not a known element:
1. If 'agm-map' is an Angular component, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("tyle="width:100%;height:auto;" src="/assets/common/images/live-demo.png">-->
[ERROR ->]<agm-map [latitude]="lat" [longitude]="lng">
<!--<agm-map-marker [latitude]="lat"): ng:///MainModule/SiteMapComponent.html@22:20
at syntaxError (http://localhost:4200/vendor.bundle.js:107191:34) [angular]
at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:117682:19) [angular]
at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:131433:39) [angular]
at http://localhost:4200/vendor.bundle.js:131357:62 [angular]
at Set.forEach (native) [angular]
at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:131357:19) [angular]
at createResult (http://localhost:4200/vendor.bundle.js:131242:19) [angular]
at Object.onInvoke (http://localhost:4200/vendor.bundle.js:4535:37) [angular]
at http://localhost:4200/polyfills.bundle.js:5617:57 [angular]
at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:4526:37) [angular]
at syntaxError (http://localhost:4200/vendor.bundle.js:107191:34) [angular]
at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:117682:19) [angular]
at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:131433:39) [angular]
at http://localhost:4200/vendor.bundle.js:131357:62 [angular]
at Set.forEach (native) [angular]
at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:131357:19) [angular]
at createResult (http://localhost:4200/vendor.bundle.js:131242:19) [angular]
at Object.onInvoke (http://localhost:4200/vendor.bundle.js:4535:37) [angular]
at http://localhost:4200/polyfills.bundle.js:5617:57 [angular]
at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:4526:37) [angular]
at resolvePromise (http://localhost:4200/polyfills.bundle.js:5569:31) [angular]
at resolvePromise (http://localhost:4200/polyfills.bundle.js:5540:17) [angular]
at http://localhost:4200/polyfills.bundle.js:5617:17 [angular]
at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:4526:37) [angular]
at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:5450:35) [<root>]
at <anonymous> [<root>]
Je me suis assuré/essayé;
AgmCoreModule
Mon site-map.component.ts:
import { Component, AfterViewInit, Injector, ViewEncapsulation, ViewChild, trigger, transition, style, animate, state, } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { NotifyService } from '@abp/notify/notify.service';
import { AppConsts } from '@shared/AppConsts';
import { AppComponentBase } from '@shared/common/app-component-base';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import * as moment from "moment";
import { JTableHelper } from '@shared/helpers/JTableHelper';
import { AgmMap, AgmMarker } from '@agm/core';
var google: any;
@Component({
templateUrl: 'site-map.component.html',
animations: [appModuleAnimation()]
})
export class SiteMapComponent extends AppComponentBase {
title: string = 'My first AGM project';
lat: number = 51.678418;
lng: number = 7.809007;
constructor(
injector: Injector
)
{
super(injector);
}
}
Mon site-map.component.html
<agm-map [latitude]="lat" [longitude]="lng">
<agm-map-marker [latitude]="lat" [longitude]="lng"></agm-map-marker>
</agm-map>
Mon app.module.ts
import { NgModule, APP_INITIALIZER } from '@angular/core';
import * as ngCommon from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { ModalModule, TooltipModule } from 'ngx-bootstrap';
import { FileUploadModule } from '@node_modules/ng2-file-upload';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './shared/layout/header.component';
import { HeaderNotificationsComponent } from './shared/layout/notifications/header-notifications.component';
import { SideBarComponent } from './shared/layout/side-bar.component';
import { FooterComponent } from './shared/layout/footer.component';
import { LoginAttemptsModalComponent } from '@app/shared/layout/login-attempts-modal.component';
import { ChangePasswordModalComponent } from '@app/shared/layout/profile/change-password-modal.component';
import { ChangeProfilePictureModalComponent } from '@app/shared/layout/profile/change-profile-picture-modal.component';
import { MySettingsModalComponent } from '@app/shared/layout/profile/my-settings-modal.component';
import { AbpModule, ABP_HTTP_PROVIDER } from '@abp/abp.module';
import { UtilsModule } from '@shared/utils/utils.module';
import { AppCommonModule } from './shared/common/app-common.module';
import { ServiceProxyModule } from '@shared/service-proxies/service-proxy.module';
import { API_BASE_URL } from '@shared/service-proxies/service-proxies';
import { AppConsts } from '@shared/AppConsts';
import { AppSessionService } from '@shared/common/session/app-session.service';
import { ImpersonationService } from './admin/users/impersonation.service';
import { LinkedAccountService } from './shared/layout/linked-account.service';
import { LinkedAccountsModalComponent } from '@app/shared/layout/linked-accounts-modal.component';
import { LinkAccountModalComponent } from '@app/shared/layout/link-account-modal.component';
import { NotificationsComponent } from './shared/layout/notifications/notifications.component';
import { NotificationSettingsModalCompoent } from './shared/layout/notifications/notification-settings-modal.component';
import { UserNotificationHelper } from './shared/layout/notifications/UserNotificationHelper';
import { ChatBarComponent } from './shared/layout/chat/chat-bar.component';
import { ChatFriendListItem } from './shared/layout/chat/chat-friend-list-item.component';
import { ChatSignalrService } from '@app/shared/layout/chat/chat-signalr.service';
import { QuickSideBarChat } from '@app/shared/layout/chat/QuickSideBarChat';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';
import { environment } from '../environments/environment';
import { AgmCoreModule } from '@agm/core';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
HeaderNotificationsComponent,
SideBarComponent,
FooterComponent,
LoginAttemptsModalComponent,
LinkedAccountsModalComponent,
LinkAccountModalComponent,
ChangePasswordModalComponent,
ChangeProfilePictureModalComponent,
MySettingsModalComponent,
NotificationsComponent,
ChatBarComponent,
ChatFriendListItem,
NotificationSettingsModalCompoent,
],
imports: [
ngCommon.CommonModule,
FormsModule,
HttpModule,
JsonpModule,
TabsModule.forRoot(),
ModalModule.forRoot(),
TooltipModule.forRoot(),
FileUploadModule,
AbpModule,
AppRoutingModule,
UtilsModule,
AppCommonModule.forRoot(),
ServiceProxyModule,
AngularFireModule.initializeApp(firebaseConfig, 'my-app'),
AngularFireDatabaseModule,
AngularFireAuthModule,
AgmCoreModule.forRoot({
apiKey: 'YOUR_KEY'
})
],
providers: [
ImpersonationService,
LinkedAccountService,
UserNotificationHelper,
ChatSignalrService,
QuickSideBarChat
]
})
export class AppModule { }
Toute aide est très appréciée.
J'ai résolu mon problème grâce à @ developer033. J'avais importé Angular Google Maps dans mon app.module, mais il devait être dans main.module, où je le consomme réellement via un composant.
Cette erreur se produit uniquement lorsque vous avez un module enfant pour les composants où vous implémentez la carte, Vous devez donc également ajouter ce module dans votre module enfant sans forRoot ()
app.module.ts
import { AgmCoreModule } from '@agm/core';
@NgModule({
imports: [
AgmCoreModule.forRoot({
apiKey: ''
})
]
})
child.module.ts
import { AgmCoreModule } from '@agm/core';
@NgModule({
imports: [
AgmCoreModule
]
})
Cela fonctionnera bien car le module enfant a maintenant agmCodeModule
Pour quiconque a pu créer un fichier app.routing.ts, l'importation doit y être déclarée à la place de votre fichier app.module.ts.
@NgMoudule ({
declarations: [ALLOTHERCOMPONENTS],
imports: [
CommonModule,
RouterModule.forRoot(appRoutes),
AgmCoreModule.forRoot({
apiKey: '*'
}),
],
})
grâce à plotosha s 'dans numéros 71 vous devez exploiter l'angle 2 / CUSTOM_ELEMENTS_SCHEMA de la manière suivante:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
// ...
@NgModule({
// ...
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }