As a newcomer to Angular, I have been working on creating a simple application for hands-on learning. I decided to utilize the shared.module.ts file to handle my header and then imported it into my app.module.ts. However, after running the application, I noticed that the
<app-header></app-header>shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './components/header/header.component';
@NgModule({
declarations: [HeaderComponent],
imports: [
CommonModule
],
exports: [
HeaderComponent // exporting header component from shared module here
]
})
export class SharedModule { }
app.module.ts
//predefined modules
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//application modules
import { AppRoutingModule } from './app-routing.module';
import {BlogModule} from './blog/blog.module';
import { SharedModule} from './shared/shared.module'
//components
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
@NgModule({
declarations: [
AppComponent,
DashboardComponent //declaring the dashboard component
],
imports: [
BrowserModule,
AppRoutingModule,
BlogModule,
SharedModule //importing the shared module here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
dashboard.component.html
Hello, Header is below
<app-header></app-header>
What I see on the browser:
https://i.sstatic.net/rQpa4.png
Upon observing the webpage, it is evident that the header fails to load, even though there are no errors showing up in the browser console.