Question

我正在尝试学习使用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“]”但它没有做任何事情......你有什么想法让我脱掉吗？非常感谢你

Answer 1

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

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

Answer 2

你的组件应该是这样的。您无法在角度4中使用require。directives也会在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 {}

找不到名称需要Angular2

2 个答案: