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.

Post all your modules please, probably you forgot to add the component to one of them — Jacopo Sciampi

Cristian Traìna Cristian Traìna · Accepted Answer · 2018-10-03T08:42:09

Check in which module is declared <app-navbar> (which module does include AppNavbarComponent?)
Check if AppNavbarComponent is exported in its module
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

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

1 Answers