Error in angular (fails to detect layout) The selector "app-layout" did not match any element

Question

I'm learning angular and just started my first project but i'm running into some trouble, after running a terminal with server i get a blank page on my browser,upon hitting f12 i have the following error:

LayoutComponent_Host.ngfactory.js? [sm]:1 ERROR Error: The selector “app-layout” did not match any elements
at DefaultDomRenderer2.selectRootElement (platform-browser.js:2840)
at DebugRenderer2.selectRootElement (core.js:45842)
at createElement (core.js:42878)
at createViewNodes (core.js:44166)
at createRootView (core.js:44082)
at callWithDebugContext (core.js:45632)
at Object.debugCreateRootView [as createRootView] (core.js:44848)
at ComponentFactory_.create (core.js:30788)
at ComponentFactoryBoundToModule.create (core.js:25731)
at ApplicationRef.bootstrap (core.js:41008)
View_LayoutComponent_Host_0 @ LayoutComponent_Host.ngfactory.js? [sm]:1
proxyClass @ compiler.js:19671
logError @ core.js:45546
handleError @ core.js:6066
(anonymous) @ core.js:40731
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:39572
(anonymous) @ core.js:40728
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39699
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:39680
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
bootstrapModule @ core.js:40600
./src/main.ts @ main.ts:11
webpack_require @ bootstrap:79
0 @ main.ts:12
webpack_require @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
LayoutComponent_Host.ngfactory.js? [sm]:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}
View_LayoutComponent_Host_0 @ LayoutComponent_Host.ngfactory.js? [sm]:1
proxyClass @ compiler.js:19671
logError @ core.js:45546
handleError @ core.js:6071
(anonymous) @ core.js:40731
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:39572
(anonymous) @ core.js:40728
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39699
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:39680
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
bootstrapModule @ core.js:40600
./src/main.ts @ main.ts:11
webpack_require @ bootstrap:79
0 @ main.ts:12
webpack_require @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
main.ts:12 Error: The selector “app-layout” did not match any elements
at DefaultDomRenderer2.selectRootElement (platform-browser.js:2840)
at DebugRenderer2.selectRootElement (core.js:45842)
at createElement (core.js:42878)
at createViewNodes (core.js:44166)
at createRootView (core.js:44082)
at callWithDebugContext (core.js:45632)
at Object.debugCreateRootView [as createRootView] (core.js:44848)
at ComponentFactory_.create (core.js:30788)
at ComponentFactoryBoundToModule.create (core.js:25731)
at ApplicationRef.bootstrap (core.js:41008)

i checked my code and i cant find anything wrong with it,some snippits i think are relevant: My layout component html:

<section>

    <header>

        <app-header> </app-header>

    </header>

    <nav>

        <app-navigation></app-navigation>

    </nav>

    <main>

        <router-outlet></router-outlet>

    </main>

    <footer>

        <app-footer></app-footer>

    </footer>

</section>

My layout component ts:

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-layout',

  templateUrl: './layout.component.html',

  styleUrls: ['./layout.component.css']

})

export class LayoutComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}

and my routing module ts:

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { AdminComponent } from './components/admin/admin.component';

import { LoginComponent } from './components/login/login.component';

const routes: Routes = [

  {path: "login", component: LoginComponent},

    {path: "admin", component : AdminComponent},

    {path:"", redirectTo: "login", pathMatch: "full"}

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }:

and my appModule

@NgModule({

  declarations: [

    AppComponent,

    LayoutComponent,

    HeaderComponent,

    NavigationComponent,

    FooterComponent,

    LoginComponent,

    AdminComponent,

    HomeComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    FormsModule,

    HttpClientModule



  ],

  providers: [],

  bootstrap: [LayoutComponent]

})

If i use appcomponent as my bootstrap the page does load,but the code snippet i got from my teacher shows to use my LayoutComponent as my bootstrap,from my understanding it is because i need to use the layout as the bootstrap for it to load the html of my layout which entitiles my header footer and main(which is my routeroutlet);

Answer 1

Not sure what your index.html page looks like but make sure that you have the bootstrapped component in there as your app root.

In your case make sure that <app-layout></app-layout> is there. As your LayoutComponent's selector is app-layout

Generally the default is <app-root></app-root> as AppComponent's selector is normally app-root