找不到名称需要Angular2

时间:2017-07-04 10:00:26

标签: json angular typescript

我正在尝试学习使用schedulerApp的角度。 这是我的代码:

app.component.ts

import {Component} from '@angular/core';
import {Routes, ROUTER_DIRECTIVES} from '@angular/router';
import {AboutComponent} from './about/about.component';
import {ExperimentsComponent} from './experiments/experiments.component';
import {HomeComponent} from './home/home.component';
import {calendrierComponent} from './calendrier/calendrier.component';
import {StateService} from './common/state.service';
import {ExperimentsService} from './common/experiments.service';

@Component({
  selector: 'app',
  template: require('./app.component.html'),
  styles: [ require('./app.component.css')],
  directives: [ ROUTER_DIRECTIVES ],
  providers: [StateService, ExperimentsService],
})
@Routes([
  {path: '/',            component: HomeComponent },
  {path: '/home',        component: HomeComponent },
  {path: '/about',       component: AboutComponent },
  {path: '/experiments', component: ExperimentsComponent },
  {path: '/calendrier',  component: calendrierComponent },
  {path: '/*',           component: HomeComponent }
])
export class AppComponent {}

当我添加这些行时:

import {calendrierComponent} from './calendrier/calendrier.component';

@Routes([
  {path: '/calendrier',  component: calendrierComponent },
])

我有这些错误:

Error   Typescript  Cannot find name 'require'. 12:13
Error   Typescript  Cannot find name 'require'. 13:13

我试着在我的ts.config.json上添加“”类型“:[”node“]”但它没有做任何事情......你有什么想法让我脱掉吗?非常感谢你

2 个答案:

答案 0 :(得分:0)

您不必使用require。您可以使用templateUrlstyleUrls选项直接传递文件路径。 Angular将根据路径自动解析样式和模板:

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [StateService, ExperimentsService],
})

答案 1 :(得分:0)

你的组件应该是这样的。您无法在角度4中使用requiredirectives也会在angular 2 & 4中贬值。请参阅(app.module.ts),因此您需要在组件中的提供程序或模块

中的声明中传递它
 import {Component} from '@angular/core';
    import {Routes, ROUTER_DIRECTIVES} from '@angular/router';
    import {AboutComponent} from './about/about.component';
    import {ExperimentsComponent} from './experiments/experiments.component';
    import {HomeComponent} from './home/home.component';
    import {calendrierComponent} from './calendrier/calendrier.component';
    import {StateService} from './common/state.service';
    import {ExperimentsService} from './common/experiments.service';

    @Component({
      selector: 'app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      providers: [StateService, ExperimentsService, ROUTER_DIRECTIVES],
    })
    @Routes([
      {path: '/',            component: HomeComponent },
      {path: '/home',        component: HomeComponent },
      {path: '/about',       component: AboutComponent },
      {path: '/experiments', component: ExperimentsComponent },
      {path: '/calendrier',  component: calendrierComponent },
      {path: '/*',           component: HomeComponent }
    ])
    export class AppComponent {}