Menu
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
982
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
172
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 { }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
