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

Question

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

Created a new component as "chart"
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

what you are getting as output ? are you getting any error ? — ranakrunal9, Sep 05 '16 at 13:08
There's no any error. The page shows only the html content of app.component.html file. — Rose18, Sep 05 '16 at 13:10
From your folder structure your both chart component import path looks confusing. whats the code of `ChartComponent` and `LineGraphDirective`? — ranakrunal9, Sep 05 '16 at 13:12
@ranakrunal9, I have posted the code for ChartComponent and LineGraphDirective. chart directory & app.module.ts are inside the app folder and line-graph-directive.ts file is inside the chart directory. — Rose18, Sep 05 '16 at 13:40
This is it? You didnt import chart.component in your app.component.ts — pd farhad, Sep 07 '16 at 15:31

score 1 · Answer 1 · answered Sep 05 '16 at 13:12

1

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

answered Sep 05 '16 at 13:12

BeetleJuice

39,516
19
105
165

There's no any 404 not found error. chart directory and app.module are inside app folder – Rose18 Sep 05 '16 at 13:25
@Rose18 ok. The structure is tough for me to see. If you inline the template (put it in `template: '
Chart works!
` instead of using `templateUrl`), does it work? – BeetleJuice Sep 05 '16 at 13:28
I tried by adding inline template to ChartComponent, it doesn't work either :( – Rose18 Sep 05 '16 at 13:42

score 0 · Answer 2 · answered Sep 07 '16 at 17:25

0

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

answered Sep 07 '16 at 17:25

pd farhad

6,352
2
28
47

score 0 · Answer 3 · answered Oct 28 '16 at 14:36

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

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

3 Answers3