web-dev-qa-db-fra.com

Impossible de se lier à 'latitude' car ce n'est pas une propriété connue de 'agm-map'

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é;

  • Mes importations de modules AgmCoreModule
  • Ajout de CUSTOM_ELEMENTS_SCHEMA à SCHEMAS dans mon module (cela n'a eu aucun effet)
  • Liaison des valeurs lat/lng à des entiers littéraux

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.

angularangular-google-maps
12
David Hawkins

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.

15
David Hawkins

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

9
Hidayt Rahman

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: '*'
      }),
    ], 
})
0
rychrist88

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 { }
0
Masood Moghini