2017-07-04 42 views
0

正试图学习角度做一个schedulerApp。 这里是我的代码:找不到名字需要Angular2

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上添加“”types“:[”node“] b它没有做任何事情......你有没有想法让我失去知觉?非常感谢您

回答

0

您的组件应该是这样的。您不能在角度4中使用require。另外directivesangular 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 {} 
0

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

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