显示静态注射器错误而不是加载页面

时间:2018-06-24 10:28:02

标签: angular

我是Angular的新手。我正确定义了所有组件。但是,当我设置要从一页重定向到另一页的路由时,将显示Error

我已经在app.module.ts中添加了HttpsClientModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import{HttpClientModule} from '@angular/common/http';

import { AppComponent } from './app.component';
import { EmployeeComponent } from './employee/employee.component';
import { ReservationComponent } from './reservation/reservation.component';

import { RouterModule, Routes} from '@angular/router';


const appRoutes: Routes = [
  {path:'', component: EmployeeComponent},
  {path:'reservation', component: ReservationComponent},

];


@NgModule({
  declarations: [
    AppComponent,
    EmployeeComponent,
    ReservationComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,

    RouterModule.forRoot(appRoutes)
  ],
  providers: [], 
  bootstrap: [AppComponent]
})
export class AppModule { }

我不知道这是怎么回事。因为我是新手,所以请帮助我!

2 个答案:

答案 0 :(得分:0)

您必须将 ReservationService 导入到 app.module.ts 文件中,并将其添加到 providers 数组中。

答案 1 :(得分:0)

正如Florian所说,将ReservationService添加到AppModule的提供者。
将应用程序模块更新为此版本

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import{HttpClientModule} from '@angular/common/http';

import { AppComponent } from './app.component';
import { EmployeeComponent } from './employee/employee.component';
import { ReservationComponent } from './reservation/reservation.component';

import { RouterModule, Routes} from '@angular/router';


const appRoutes: Routes = [
  {path:'', component: EmployeeComponent},
  {path:'reservation', component: ReservationComponent},

];


@NgModule({
  declarations: [
    AppComponent,
    EmployeeComponent,
    ReservationComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,

    RouterModule.forRoot(appRoutes)
  ],
  providers: [ReservationService], 
  bootstrap: [AppComponent]
})
export class AppModule { }