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
– ranakrunal9, Commented Sep 5, 2016 at 13:08
There's no any error. The page shows only the html content of app.component.html file. — Rose18
– Rose18, Commented Sep 5, 2016 at 13:10
From your folder structure your both chart component import path looks confusing. whats the code of ChartComponent and LineGraphDirective? — ranakrunal9
– ranakrunal9, Commented Sep 5, 2016 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
– Rose18, Commented Sep 5, 2016 at 13:40

BeetleJuice · Accepted Answer · 2016-09-05 13:12:20Z

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 5, 2016 at 13:12

BeetleJuice

41.1k24 gold badges120 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rose18 Over a year ago

There's no any 404 not found error. chart directory and app.module are inside app folder

BeetleJuice Over a year ago

@Rose18 ok. The structure is tough for me to see. If you inline the template (put it in template: '<p>Chart works!</p> instead of using templateUrl), does it work?

Rose18 Over a year ago

I tried by adding inline template to ChartComponent, it doesn't work either :(

pd farhad · Accepted Answer · 2016-09-07 17:25:27Z

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 7, 2016 at 17:25

pd farhad

6,4523 gold badges33 silver badges48 bronze badges

Comments

bajro · Accepted Answer · 2016-10-28 14:36:13Z

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

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related