Question

我正在尝试学习Angular 2和C＃web api Core，并从此视频开始。 https://channel9.msdn.com/Events/Visual-Studio/Visual-Studio-2017-Launch/WEB-103 他没有包含下载代码。我使用VS2017和脚手架工具创建了一个略有不同的文件结构。我收到错误＆＃34;异常：调用节点模块失败并显示错误：错误：未捕获（在承诺中）：错误：没有ServiceModuleService的提供者！错误：没有ServiceModuleService的提供者！＆＃34; 这是一些代码，请询问您是否需要了解更多信息。

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来获取它，但现在我遇到了这个错误消息。

Answer 1

我更多地研究了这个语法：

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ...sharedConfig.imports
],

＆＃39; ...＆＃39;这是JavaScript扩展运算符。它确保在此处添加导入的内容，而不是数组本身。我的一位同事解释如下：

imports: [
  a,
  b,
  c,
  sharedConfig.imports
]

你最终得到了（把数组放进去）

imports: [a, b, c, [what_shared_config_has]]

而不是你想要的（数组中的值）

imports: [a, b, c, what_shared_config_has]

所以这需要有扩展运营商：

providers: [
    { provide: 'ORIGIN_URL', useValue: location.origin },
    ...sharedConfig.providers
]

Answer 2

我无法在评论中粘贴这么多代码，所以我在这里粘贴它。但这就是我的模块在我的服务中的样子：

import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { ProductListComponent } from './product-list.component';
import { ProductDetailComponent } from './product-detail.component';
import { ProductDetailGuard } from './product-guard.service';

import { ProductFilterPipe } from './product-filter.pipe';
import { ProductService } from './product.service';

import { SharedModule } from '../shared/shared.module';

@NgModule({
  imports: [
    SharedModule,
    RouterModule.forChild([
      { path: 'products', component: ProductListComponent },
      { path: 'product/:id',
        canActivate: [ ProductDetailGuard],
        component: ProductDetailComponent
      }
    ])
  ],
  declarations: [
    ProductListComponent,
    ProductDetailComponent,
    ProductFilterPipe
  ],
  providers: [
    ProductService,
    ProductDetailGuard
  ]
})
export class ProductModule {}

我不确定{provide：...}的内容是什么，但你可以在这里添加你的ServiceModuleService。

providers: [
    { provide: 'ORIGIN_URL', useValue: location.origin },
    ServiceModuleService
]

Angular 2没有服务提供商

2 个答案: