CODEWITHSUNDEEP
htmlangularbootstrap-4
DrHelmholtz
DrHelmholtz

Reputation: 40

Angular component doesn't show up

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.

Upvotes: 2

Views: 13115

Answers (4)

Abd Abughazaleh
Abd Abughazaleh

Reputation: 5495

Angular Update

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

Upvotes: -1

Rishav Mahapatra
Rishav Mahapatra

Reputation: 79

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.

Upvotes: 0

Yogendra Chauhan
Yogendra Chauhan

Reputation: 825

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>

Upvotes: 4

G&#233;r&#244;me Grignon
G&#233;r&#244;me Grignon

Reputation: 4228

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.

Upvotes: 2

Related Questions