Just started delving into Angular and following some tutorials. The project was set up using Angular CLI. Created a new component named navbar on top of the default component and wanted to check if the navbar loads in the index.html at startup. The navbar only appears if both app components are included in the index.html, for example:
<body>
<app-root></app-root>
<app-navbar></app-navbar>
</body>
If I remove app-root from index.html like this:
<body>
<app-navbar></app-navbar>
</body>
The navbar app no longer displays. Could this be related to the app-root component? Is it necessary for the root component to be included in index.html at all times?
Code snippet:
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8>
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-navbar></app-navbar>
</body>
</html>
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './component1/app.component';
import { NavbarComponent } from './navbar/navbar.component';
@NgModule({
declarations: [
AppComponent,
NavbarComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [
AppComponent,
NavbarComponent
]
})
export class AppModule { }
navbar.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
constructor() {}
// tslint:disable-next-line: use-lifecycle-interface
ngOnInit() {
}
}