Error in angular (fails to detect layout)

1

Hi guys, im learning angular and just started my first project but im 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 { }:
2

You need to add your component to the declarations array in either your app module or your feature module.
https://angular.io/guide/ngmodules

1 Like
3

If i understood you right its alreay there

this is my app module

@NgModule({

  declarations: [

    AppComponent,

    LayoutComponent,

    HeaderComponent,

    NavigationComponent,

    FooterComponent,

    LoginComponent,

    AdminComponent,

    HomeComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    FormsModule,

    HttpClientModule

    

  ],

  providers: [],

  bootstrap: [LayoutComponent]

})
4

Based on the given snippet, why are you having bootstrap: [LayoutComponent]?

bootstrap: [LayoutComponent] essentially means, Angular go and re-render the whole index.html one more time using LayoutComponent as the root. That could cause the error you’re getting

5

From my understanding 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);
if i use the app component as my bootstrap the page loades,but only the login page.
in addition this was a class drill and a code snippet i have as an example shows to use [layoutComponent] in my bootstrap,which worked in my class but for some reason i cant get the page to work on my home computer

6

Problem was i didnt replace the app-root in my index to app-layout

Solved thanks for the help!

1 Like
7

Happy that it worked :ok_hand:t4: :grinning:
Yes based on your following comment and more info about the layoutComponent I figured you want that component to act as your root component. This way your layoutComponent would be the very first component that gets created by Angular and contains all other components.

Good luck with the rest of your journey with Angular! If anything else came up, let us know.