Angular-cli RC 5 Adding multiple components to app.module.ts

Question

In my Angular-cli RC5 project I am trying to create charts.

1. Created a new component as "chart"
2. Created a directive as "line-graph.directive.ts"

Folder structure.

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>

Then, I added following inside the app.component.html as below.

<app-chart></app-chart>

Then "chart works!" line should display when I run the application.

But it doesn't.

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() {}
}

line-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!';
}

Any suggestions of what i have done wrong with my code.

Thank You

Answer 1

You need to also declare your Component at the bootstrap metadata in the app.module.ts. Without it, it won't display the content of your Component. I have also encountered this problem just a few hours ago.

So your app.module.ts should look like this:

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 {
}

Answer 2

If you look in your browser's network requests, I bet you will find some 404 not found errors when Angular tries to load the chart component.

Your import paths are not correct. Change

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

With the right paths. The folder structure is difficult for me to make out from your image (small indentation) but your current import would only work if the chart directory was in the same folder as AppModule

Answer 3

You also have to import your chart component in the app.component.ts . Just add

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

It will definitely work