I am trying to incorporate three components from a "shared" module into app.component.html. Here is my current setup:
<header></header>
<div class="main-wrapper">
<div class="bg-trick"></div>
<main-nav></main-nav>
<div class="main-view widened">
<h1>Here comes my <router-outlet> tag later!</h1>
</div>
<sidebar></sidebar>
</div>
All of the tags - <header>, <main-nav>, and <sidebar> have been declared as selectors in shared module components. I have added these components to declarations and exports in shared.module.ts, and imported Shared Module in app.module.ts. Here are the relevant files:
shared.module.ts:
import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { MainNavComponent } from './main-nav/main-nav.component';
import { SidebarComponent } from './sidebar/sidebar.component';
@NgModule({
imports: [
],
declarations: [
HeaderComponent,
MainNavComponent,
SidebarComponent
],
exports: [
HeaderComponent,
MainNavComponent,
SidebarComponent
]
})
export class SharedModule {}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SharedModule } from './shared/shared.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
A sample component:
import { Component } from '@angular/core';
@Component({
selector: 'sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent {
}
When I remove the component selector tags from app.component.html, the app runs correctly. However, when they are included, the app doesn't work. What could be the issue? How can components from another module be inserted into app.model and used as layout components on every page?