Angular 4 Component is rendered as empty

user_5077196 0
Viewed 7290

I am new to Angular, I am trying to define a component and use it in my main page.

The thing is that when using the component in index.html all I can see is my <custom-component></custom-component> empty, nothing inside it.

So what I did is:

  • in Angular cli: ng generate component custom.

  • in custom.component.html I have just a text inside paragraph tag.

  • in index.html I inserted the selector found in custom.component.ts (app-custom) as tag.

  • in app.module.ts I imported the custom component.
  • ng serve outputs only app-custom tag without the paragraph tag that should be inside it.

What did I miss?

Update: Code of my component:

custom.component.html

<p>
 component works!
</p>

custom.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.css']
})
export class CustomComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>TestApp</title>
  <base href="/">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-custom></app-custom>
</body>
</html>

app.module.ts:

import { CustomComponent } from './custom/custom.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http'; 
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent,
    CustomComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
     BrowserAnimationsModule,
    FlexLayoutModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
angular html
3 Answers

Try to add exports after declarations => [AppComponent, CustomComponent] ? in app.module. Or create a new cli project with the last version

user_86751310

In NgModule.bootstrap, add your own component.

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

Try this in index.html add the Appcomponent selector tag and inside Appcomponent template refer your custom component selector and don't forgot to import and declare the custom component in app module and bootstrap the Appcomponent so it renders the app component on load which internally refers your custom component. There are many tutorials outside just start with a single component if you are using AngularCli everything is made easy for you.

user_88912470
Related