无法绑定到 'latitude'，因为它不是 'agm-map' 的已知 属性
Can't bind to 'latitude' since it isn't a known property of 'agm-map'
我正在尝试将 AGM Angular Google 地图 (https://github.com/SebastianM/angular-google-maps) 添加到我的 Angular4 项目
遵循的指南：https://github.com/SebastianM/angular-google-maps/blob/master/docs/getting-started.jade
访问带有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>]
我做了sure/tried;
- 我的模块导入
AgmCoreModule
- 在我的模块中向 SCHEMAS 添加了 CUSTOM_ELEMENTS_SCHEMA（这没有效果）
- 将 lat/lng 值绑定到文字整数
我的网站-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);
}
}
我的网站-map.component.html
<agm-map [latitude]="lat" [longitude]="lng">
<agm-map-marker [latitude]="lat" [longitude]="lng"></agm-map-marker>
</agm-map>
我的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 { }
非常感谢任何帮助。
感谢@developer033 我解决了我的问题 我已经将 Angular Google 地图导入到我的 app.module 但它需要在 main.module 而不是我实际所在的位置通过组件使用它。
感谢 plotoshas' answer in issues 71 你必须通过以下方式利用 angular 2 CUSTOM_ELEMENTS_SCHEMA :
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
// ...
@NgModule({
// ...
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }
This error occurs only when you have a child module for the components where you are implementing the map,
So you need to add that module in your child module too without 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
]
})
这会很好地工作，因为现在子模块有 AgmCoreModule
对于可能创建了 app.routing.ts 文件的任何人，需要在此处声明导入，而不是您的 app.module.ts 文件。
@NgMoudule ({
declarations: [ALLOTHERCOMPONENTS],
imports: [
CommonModule,
RouterModule.forRoot(appRoutes),
AgmCoreModule.forRoot({
apiKey: '*'
}),
],
})
我正在尝试将 AGM Angular Google 地图 (https://github.com/SebastianM/angular-google-maps) 添加到我的 Angular4 项目
遵循的指南：https://github.com/SebastianM/angular-google-maps/blob/master/docs/getting-started.jade
访问带有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>]
我做了sure/tried;
- 我的模块导入
AgmCoreModule - 在我的模块中向 SCHEMAS 添加了 CUSTOM_ELEMENTS_SCHEMA（这没有效果）
- 将 lat/lng 值绑定到文字整数
我的网站-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);
}
}
我的网站-map.component.html
<agm-map [latitude]="lat" [longitude]="lng">
<agm-map-marker [latitude]="lat" [longitude]="lng"></agm-map-marker>
</agm-map>
我的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 { }
非常感谢任何帮助。
感谢@developer033 我解决了我的问题 我已经将 Angular Google 地图导入到我的 app.module 但它需要在 main.module 而不是我实际所在的位置通过组件使用它。
感谢 plotoshas' answer in issues 71 你必须通过以下方式利用 angular 2 CUSTOM_ELEMENTS_SCHEMA :
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
// ...
@NgModule({
// ...
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }
This error occurs only when you have a child module for the components where you are implementing the map, So you need to add that module in your child module too without 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
]
})
这会很好地工作，因为现在子模块有 AgmCoreModule
对于可能创建了 app.routing.ts 文件的任何人，需要在此处声明导入，而不是您的 app.module.ts 文件。
@NgMoudule ({
declarations: [ALLOTHERCOMPONENTS],
imports: [
CommonModule,
RouterModule.forRoot(appRoutes),
AgmCoreModule.forRoot({
apiKey: '*'
}),
],
})