CODEWITHSUNDEEP
angular
Yeongchan Jeon
Yeongchan Jeon

Reputation: 519

Newly added angular 2 component doesn't work; it's properly added to app.module.js

I created a new angular 2 project with ng new hello and ng build. Then using ng serve, I checked it works well showing 'app works!'.

Next, I added a new component with ng g component hello. The next one is app.module.ts which is automatically modified.

...
import { AppComponent } from './app.component';
import { HelloComponent } from './hello/hello.component';//<--here

@NgModule({
  declarations: [
    AppComponent,
   HelloComponent//<--here
  ],
...

Component part of hello.component.ts is like this. hello.component.html has a default html source.

@Component({
  selector: 'hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})

Then I finally added <hello>Loading!!!</hello> in index.html and ran the project with ng serve again but <hello> tag only shows "Loading!!!".

Is there anything I'm missing?

Upvotes: 0

Views: 1156

Answers (1)

anshuVersatile
anshuVersatile

Reputation: 2068

do not add <hello> tag in index.html add it in app.component.html your hello component is child/directive

or you can use

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { HelloComponent } from './hello/hello.component';

@NgModule({
  declarations: [
    HelloComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [HelloComponent]
})
export class AppModule { }

Upvotes: 3

Related Questions