Angular component doesn't show up

Question

I'm trying to make a webpage, with angular, and make a header with component. For making the files i'm using the ng g c commons/header that make the html,scss,ts and .spec.ts files, and modify the app.module.ts file like this:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HeaderComponent } from './commons/header/header.component';
import { FooterComponent } from './commons/footer/footer.component';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    NgbModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

but, when i'm put it in the index.html file, the component html doesen't show up.

<!DOCTYPE html>
<head>
  <title>TEST</title>
  <meta name="keywords"
    content="" />
  <meta name="description" content="" />
  <meta name="author" content="Szabó Boldizsár">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
  <link href="styles.scss" rel="stylesheet" type="text/scss">
</head>

<body>
  <app-header></app-header>
  <app-footer></app-footer>
</body>

</html>

the generic files(what the console command made) is still the same, i didn't modifyd it. What can be the wrong? I'm using even bootswatch.

Yogendra Chauhan · Accepted Answer · 2020-07-30 12:48:23Z

4

In Angular index.html file have only app-root tag like this:

<body>
  <app-root></app-root>
</body>

just put your header & footer in app.component.html file, which is parent component wrapper of all components in your application.

<div class="wrapper">
    <app-header></app-header>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
</div>

answered Jul 30, 2020 at 12:48

Yogendra Chauhan

8255 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gérôme Grignon · Accepted Answer · 2020-07-30 12:39:19Z

2

It isn't how Angular works : you can't just render your components into a .html file. As a SPA (Single Page Application), your content is rendered into a container (app-root by default). It advice you to follow the official Angular tutorial to understand how components are rendered into the application.

answered Jul 30, 2020 at 12:39

Gérôme Grignon

4,2581 gold badge9 silver badges19 bronze badges

3 Comments

Gérôme Grignon Over a year ago

could you provide me the link of this video?

DrHelmholtz Over a year ago

of course: youtube.com/watch?v=Ym_T0mvvc7c

Gérôme Grignon Over a year ago

starting at 8:13 he adds the header and the footer inside the AppComponent, not inside the index.html

Rishav Mahapatra · Accepted Answer · 2020-07-30 12:53:27Z

0

You have to put the selectors of the header and footer component in the template of the AppComponent instead of putting it in Index.html .

AppComponent is your bootstrap component , as you can see in the @NgModule metadata property . You can think of the components mentioned in the bootstrap array as the starting point of you angular application . So any other angular components has to be inside those Base components in order to show up.

And also please refer to the official angular tutorial.

answered Jul 30, 2020 at 12:53

Rishav Mahapatra

792 silver badges11 bronze badges

Comments

Abd Abughazaleh · Accepted Answer · 2023-09-26 13:17:16Z

-2

Angular Update

In new versions of Angular the index.html must only contain one tag <app-root></app-root>

answered Sep 26, 2023 at 13:17

Abd Abughazaleh

5,6795 gold badges59 silver badges61 bronze badges

Collectives™ on Stack Overflow

Angular component doesn't show up

4 Answers 4

Comments

3 Comments

Comments

Angular Update

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Angular Update

Comments

Your Answer

Sign up or log in

Post as a guest

Related