CODEWITHSUNDEEP
angular2-components
user3355961
user3355961

Reputation: 725

Angular 2 Component Not Displaying in index.html

Im very new to Angular 2 so bear with me. Im trying to get a new component to appear in the index.html page. The file set is from the basic quick start files from GitHub. I created a new component as such:

import { Component } from '@angular/core';

@Component({
    selector: 'app-user-item',
    template: `<h1>It works!</h1>`,
})
export class UserItemComponent {

}

I have declared the selector tags in HTML as such:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>

    <my-app>Loading AppComponent content here ...</my-app>
    <app-user-item>loading another component</app-user-item>
  </body>
</html>

I even tried adding the import to the top of app.module.ts and component name to the declarations array in app.module.ts. But still nothing. I checked my file structure and there is a js version of user-item.component.ts. But I cannot see changes.

Any help would be appreciated.

Cheers

Upvotes: 10

Views: 23540

Answers (3)

Mohini Mhetre
Mohini Mhetre

Reputation: 919

In my case Selector defined in app.component.ts file was not matching with index.html

Upvotes: 0

Tamela
Tamela

Reputation: 171

I had this exact same problem. In your app.module.ts file make sure to include your component in your bootstrap declaration.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { UserItemComponent } from './UserItem.component';

@NgModule({
  declarations : [
    AppComponent,
    UserItemComponent
  ],
  imports:      [ 
    BrowserModule 
  ],
  bootstrap:    [ 
      AppComponent,
      UserItemComponent
  ],
  providers: [],
})
export class AppModule { }

Upvotes: 17

BigPenguin
BigPenguin

Reputation: 264

user-item.component.ts:

import { Component } from '@angular/core';

@Component ({
   selector: 'app-user-item',
   template: `<p>child item</p>`
)}

export class UserItemComponent {
  constructor(){ }
}

user.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  template: ` <h2> My User Item </h2>
   <app-user-item></app-user-item>`
})

export class UserComponent { 
  constructor() {}
}

user.module.ts:

import { NgModule } from '@angular/core';
import { UserComponent } from './user-component';
import { UserItemComponent } from './user-item-component';

@NgModule({ 
  declarations: [
    UserComponent, 
    UserItemComponent
  ]
})

export class UserModule {}

I really encourage you to use angular-cli (https://github.com/angular/angular-cli). And to do the tutorials on angular page. However, For your use case the code above should be sufficient and work. Usually you declare your subcomponent in the same module as the parentcomponent. This module is imported by the app.module (root module)

Look at the Master-Detail Component Tutorials of Angular https://angular.io/docs/ts/latest/tutorial/toh-pt2.html

Upvotes: 2

Related Questions