nie może wiązać się z „szerokości geograficznej”, ponieważ nie jest znana własność „AGM-mapy”

Question

Próbuję dodać AGM kątowe Mapach Google (https://github.com/SebastianM/angular-google-maps) do mojego Angular4 Projektu

przewodnik następuje: https://github.com/SebastianM/angular-google-maps/blob/master/docs/getting-started.jade

błąd pojawia kiedy odwiedzam stronę z AGM części:

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>] 

I zadbali/próbowałem;

• Moi Moduł import AgmCoreModule
• Dodany CUSTOM_ELEMENTS_SCHEMA do schematów w moim modułu (ten nie miał wpływu)
• wiążące łac Wartości/LNG dosłownych całkowitymi

My 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); 
    } 

} 

My site-map.component.html

<agm-map [latitude]="lat" [longitude]="lng"> 
        <agm-map-marker [latitude]="lat" [longitude]="lng"></agm-map-marker> 
        </agm-map> 

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

Każda pomoc jest mile widziane.

Answer 1

Rozwiązałem mój problem dzięki @ developer033 Zaimportowałem Angular Google Maps do mojej app.module, ale musiałem być w main.module zamiast tego, gdzie faktycznie go używam przez komponent.

Answer 2

dzięki odpowiedzi plotosha s'w issues 71 trzeba wykorzystać kątową 2 CUSTOM_ELEMENTS_SCHEMA przez następujący sposób:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 

// ... 

@NgModule({ 
    // ... 
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 
}) 
export class AppModule { }