Angular-cli RC 5将多个组件添加到app.module.ts

Question

在我的Angular-cli RC5项目中，我正在尝试创建图表。

1. 创建了一个新组件＆＃34; chart＆＃34;
2. 创建了一个指令＆＃34; line-graph.directive.ts＆＃34;

文件夹结构。



app.module.ts

import {NgModule, enableProdMode}       from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent}   from './app.component';
import {ChartComponent} from './chart/chart.component';
import {LineGraphDirective} from './chart/line-graph.directive';

@NgModule({
   declarations: [AppComponent, ChartComponent, LineGraphDirective],
   providers: [],
   imports: [],
bootstrap: [AppComponent],
})
export class AppModule {
}

chart.component.html

<p>
 chart works!
</p>

然后，我在app.component.html中添加了以下内容。

<app-chart></app-chart>

然后＆＃34;图表有效！＆＃34;我应该在运行应用程序时显示该行。

但它没有。

chart.component.ts

import {Component} from '@angular/core';

@Component({
 moduleId: module.id,
 selector: 'app-chart',
 templateUrl: 'chart.component.html',
 styleUrls: ['chart.component.css'],
 directives: []
})
export class ChartComponent {
  constructor() {}
}

订单-graph.directive.ts

import {Directive, ElementRef} from '@angular/core';

@Directive({
  selector: 'line-graph'
})

export class LineGraphDirective {
  constructor() {}
}

app.component.ts

import {Component} from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

对我的代码做错了什么建议。

谢谢

Answer 1

如果您查看浏览器的网络请求，我敢打赌，当404 not found尝试加载图表组件时，您会发现一些Angular错误。

您的导入路径不正确。变化

import {ChartComponent} from './chart/chart.component';
import {LineGraphDirective} from './chart/line-graph.directive';

有正确的道路。文件夹结构很难从您的图像（小缩进）中得出，但您当前的导入仅在chart目录与AppModule

位于同一文件夹中时才有效

Answer 2

您还必须在app.component.ts中导入图表组件。 只需添加

import {ChartComponent} from './chart/chart.component';

一定会有效

Answer 3

您还需要在app.module.ts的引导程序元数据中声明您的Component。 没有它，它就不会显示组件的内容。 我几个小时前也遇到过这个问题。

所以你的app.module.ts应该是这样的：

import {NgModule, enableProdMode}       from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent}   from './app.component';
import {ChartComponent} from './chart/chart.component';
import {LineGraphDirective} from './chart/line-graph.directive';

@NgModule({
   declarations: [AppComponent, ChartComponent, LineGraphDirective],
   providers: [],
   imports: [],
bootstrap: [AppComponent,ChartComponent],
})
export class AppModule {
}