CODEWITHSUNDEEP
angularangular-cliangular-componentsangular-rc5
Rose18
Rose18

Reputation: 3162

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

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.

enter image description here

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

Upvotes: 1

Views: 1371

Answers (3)

bajro
bajro

Reputation: 1250

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

Upvotes: 0

pd farhad
pd farhad

Reputation: 6432

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

Upvotes: 0

BeetleJuice
BeetleJuice

Reputation: 40906

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

Upvotes: 1

Related Questions