我正在尝试学习Angular 2和C#web api Core,并从这个视频开始.
https://channel9.msdn.com/Events/Visual-Studio/Visual-Studio-2017-Launch/WEB-103
他没有包含下载代码.我使用VS2017和脚手架工具创建了一个略有不同的文件结构.
我收到错误“异常:调用节点模块失败,错误:错误:未捕获(在承诺中):错误:没有ServiceModuleService的提供程序!
错误:没有ServiceModuleService的提供程序!“
这是一些代码,请询问您是否需要了解更多信息.
https://channel9.msdn.com/Events/Visual-Studio/Visual-Studio-2017-Launch/WEB-103
他没有包含下载代码.我使用VS2017和脚手架工具创建了一个略有不同的文件结构.
我收到错误“异常:调用节点模块失败,错误:错误:未捕获(在承诺中):错误:没有ServiceModuleService的提供程序!
错误:没有ServiceModuleService的提供程序!“
这是一些代码,请询问您是否需要了解更多信息.
app.module.shared.ts:
import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { AppComponent } from './components/app/app.component' import { ServiceModuleListComponent } from './components/service-module-list/service-module-list.component'; import { HeaderComponent } from './components/shared/header/header.component'; import { ServiceModuleService } from './components/shared/service-module.service'; import { ServiceModuleComponent } from './components/service-module/service-module.component'; export const sharedConfig: NgModule = { bootstrap: [AppComponent],declarations: [ AppComponent,ServiceModuleListComponent,HeaderComponent,ServiceModuleComponent ],imports: [ RouterModule.forRoot([ { path: '',redirectTo: 'servicemodulelist',pathMatch: 'full' },{ path: 'servicemodulelist',component: ServiceModuleListComponent },{ path: '**',redirectTo: 'servicemodulelist' } ]) ],providers: [ServiceModuleService] };
app.module.client.ts:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { sharedConfig } from './app.module.shared'; @NgModule({ bootstrap: sharedConfig.bootstrap,declarations: sharedConfig.declarations,imports: [ BrowserModule,FormsModule,HttpModule,...sharedConfig.imports ],providers: [ { provide: 'ORIGIN_URL',useValue: location.origin },sharedConfig.providers ] }) export class AppModule { }
app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app',templateUrl: './app.component.html',styleUrls: ['./app.component.css'] }) export class AppComponent { }
服务module.component.ts:
import { Component,Input } from '@angular/core'; import { ServiceModule } from '../shared/service-module.type'; @Component({ selector: 'service-module',templateUrl: './service-module.component.html' }) export class ServiceModuleComponent { @Input() serviceModule: ServiceModule constructor() { } }
服务模块list.component.ts:
import { Component,OnInit } from '@angular/core'; import { ServiceModule } from '../shared/service-module.type'; import { ServiceModuleService } from '../shared/service-module.service'; import { ServiceModuleComponent }from '../service-module/service-module.component'; @Component({ selector: 'service-module-list',templateUrl: './service-module-list.component.html' }) export class ServiceModuleListComponent implements OnInit { serviceModules: ServiceModule[]; constructor(private serviceModuleService: ServiceModuleService) { } ngOnInit() { this.serviceModuleService.getServiceModuleItems() .then(serviceModuleItems => { this.serviceModules = serviceModuleItems; }); } }
服务module.service.ts:
import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import 'rxjs/Rx'; import { ServiceModule } from './service-module.type'; @Injectable() export class ServiceModuleService { constructor(private http: Http) { } getServiceModuleItems() { return this.http.get('api/ServiceModuleItems') .map(response => response.json() as ServiceModule[]) .toPromise(); } }
服务module.type.ts:
export class ServiceModule { idx: number; applicationName: string; isActive: boolean; description: string; }
基本上在这一点上,在启动时,应用程序必须显示我在sql表上的条目列表,并且服务调用api来获取它,但现在我遇到了这个问题并出现错误消息.
我更多地研究了这个语法:
imports: [ BrowserModule,...sharedConfig.imports ],
这里的’…’是JavaScript扩展运算符.它确保在此处添加导入的内容,而不是数组本身.我的一位同事解释如下:
imports: [ a,b,c,sharedConfig.imports ]
你最终(将数组放入)
imports: [a,[what_shared_config_has]]
而不是你想要的(数组中的值)
imports: [a,what_shared_config_has]
所以这需要有扩展运算符:
providers: [ { provide: 'ORIGIN_URL',...sharedConfig.providers ]