Angular 6 component change depending on the route, Error: The selector “app-navbar” did not match any elements

Question

I have an angular application with two parts :

• One for all users, the current view
• One for admin with an admin dashboard

I want to have two different views who are managed in my app.component.html

app.component.html

<div *ngIf="!isAdmin()">
    <app-navbar></app-navbar>
</div>

<router-outlet></router-outlet>

<app-footer></app-footer>

app.component.ts

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(
    private route: ActivatedRoute,
    private location: Location,
  ) { }

  public getPath() {
    return this.location.path();  
  }

  public isAdmin() {
    return this.location.path().includes("/admin");
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule} from '@angular/common/http';
import { NguCarouselModule } from '@ngu/carousel';
import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from '@app/app.component';
import { SharedModule } from '@app/shared/shared.module';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from '@app/app-routing.module';
import { NavbarComponent } from '@app/components/navbar/navbar.component';
import { FooterComponent } from './components/footer/footer.component';
import { AdminComponent } from './admin/admin.component';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    FooterComponent,
    AdminComponent,
  ],
  imports: [
    RouterModule,
    BrowserModule,
    BrowserAnimationsModule,
    SharedModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    HttpClientModule,
    NgbModule.forRoot()
  ],
  bootstrap: [AppComponent, NavbarComponent]
})

export class AppModule { }

But on my application I have this error :

ERROR Error: The selector "app-navbar" did not match any elements at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.selectRootElement (platform-browser.js:1079) at BaseAnimationRenderer.push../node_modules/@angular/platform-browser/fesm5/animations.js.BaseAnimationRenderer.selectRootElement (animations.js:236) at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.selectRootElement (core.js:11456) at createElement (core.js:8136) at createViewNodes (core.js:10367) at createRootView (core.js:10320) at callWithDebugContext (core.js:11351) at Object.debugCreateRootView [as createRootView] (core.js:10838) at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (core.js:8666) at ComponentFactoryBoundToModule.push../node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create (core.js:3315)

How it's possible to have the distinction between these two views with my two different navbars? I want to create to a component of the navbar, on for each view.

When i remove *ngIf="!isAdmin()" it's works fine.

Answer 1

1. Check in which module is declared <app-navbar> (which module does include AppNavbarComponent ?)
2. Check if AppNavbarComponent is exported in its module
3. Check if the above module is imported in app.module.ts

If no module is declaring AppNavbarComponent , then add it in the declarations of app.module.ts