找不到需要 Angular2 的名称

Question

我试图学习Angular做一个调度程序。 这是我的代码：

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 上添加" "类型"： [ "节点" ]"，但它没有做任何事情......你有没有办法解开我？非常感谢

Answer 1

你的组件应该是这样的。 您不能在 Angular 4 中使用require。 在 Angular 2 和 4 中也directives贬值。 请参阅(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 {}

Answer 2

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

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