Angular2 - Error: The selector "app-root" did not match any elements

Question

I am learning Angular 2, without prior experience of Angular. I was following this tutorial: https://www.barbarianmeetscoding.com/blog/2016/03/25/getting-started-with-angular-2-step-by-step-1-your-first-component/.

And after adding new component "app-people-list" and updating the same in index.html, i get below exception. What went wrong?

    Unhandled Promise rejection: The selector "app-root" did not match any elements ; Zone: <root> ; Task: Promise.then ; Value: Error: The selector "app-root" did not match any elements     at DefaultDomRenderer2.webpackJsonp.../../../platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.selectRootElement (platform-browser.es5.js:2808)     at DebugRenderer2.webpackJsonp.../../../core/@angular/core.es5.js.DebugRenderer2.selectRootElement (core.es5.js:13710)     at createElement (core.es5.js:9259)     at createViewNodes (core.es5.js:12225)     at createRootView (core.es5.js:12154)     at callWithDebugContext (core.es5.js:13535)     at Object.debugCreateRootView [as createRootView] (core.es5.js:12852)     at ComponentFactory_.webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create (core.es5.js:9945)     at ComponentFactoryBoundToModule.webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactoryBoundToModule.create (core.es5.js:3333)     at ApplicationRef_.webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.bootstrap (core.es5.js:4822) Error: The selector "app-root" did not match any elements     at DefaultDomRenderer2.webpackJsonp.../../../platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.selectRootElement (http://localhost:4200/vendor.bundle.js:70399:19)     at DebugRenderer2.webpackJsonp.../../../core/@angular/core.es5.js.DebugRenderer2.selectRootElement (http://localhost:4200/vendor.bundle.js:57800:49)     at createElement (http://localhost:4200/vendor.bundle.js:53349:23)     at createViewNodes (http://localhost:4200/vendor.bundle.js:56315:44)     at createRootView (http://localhost:4200/vendor.bundle.js:56244:5)     at callWithDebugContext (http://localhost:4200/vendor.bundle.js:57625:42)     at Object.debugCreateRootView [as createRootView] (http://localhost:4200/vendor.bundle.js:56942:12)     at ComponentFactory_.webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create (http://localhost:4200/vendor.bundle.js:54035:46)     at ComponentFactoryBoundToModule.webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactoryBoundToModule.create (http://localhost:4200/vendor.bundle.js:47423:29)     at ApplicationRef_.webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.bootstrap (http://localhost:4200/vendor.bundle.js:48912:57) api.onUnhandledError @ zone.js:643 handleUnhandledRejection @ zone.js:667 _loop_1 @ zone.js:658 api.microtaskDrainDone @ zone.js:662 drainMicroTaskQueue @ zone.js:592 zone.js:645 Error: Uncaught (in promise): Error: The selector "app-root" did not match any elements Error: The selector "app-root" did not match any elements     at DefaultDomRenderer2.webpackJsonp.../../../platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.selectRootElement (platform-browser.es5.js:2808)     at DebugRenderer2.webpackJsonp.../../../core/@angular/core.es5.js.DebugRenderer2.selectRootElement (core.es5.js:13710)     at createElement (core.es5.js:9259)     at createViewNodes (core.es5.js:12225)     at createRootView (core.es5.js:12154)     at callWithDebugContext (core.es5.js:13535)     at Object.debugCreateRootView [as createRootView] (core.es5.js:12852)     at       ComponentFactory_.webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create (core.es5.js:9945)         at ComponentFactoryBoundToModule.webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactoryBoundToModule.create (core.es5.js:3333)         at ApplicationRef_.webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.bootstrap (core.es5.js:4822)         at DefaultDomRenderer2.webpackJsonp.../../../platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.selectRootElement (platform-browser.es5.js:2808)         at DebugRenderer2.webpackJsonp.../../../core/@angular/core.es5.js.DebugRenderer2.selectRootElement (core.es5.js:13710)         at createElement (core.es5.js:9259)         at createViewNodes (core.es5.js:12225)         at createRootView (core.es5.js:12154)         at callWithDebugContext (core.es5.js:13535)         at Object.debugCreateRootView [as createRootView] (core.es5.js:12852)         at ComponentFactory_.webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create (core.es5.js:9945)         at ComponentFactoryBoundToModule.webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactoryBoundToModule.create (core.es5.js:3333)         at ApplicationRef_.webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.bootstrap (core.es5.js:4822)         at resolvePromise (zone.js:770)         at zone.js:696         at zone.js:712         at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)         at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:141)         at zone.js:818         at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)         at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)         at drainMicroTaskQueue (zone.js:584)         at <anonymous> 

All the code is exactly as per the tutorial link above. But i am still adding some details below.

index.html:

<!doctype html> <html lang="en"> <head>   <meta charset="utf-8">   <title>Calui</title>   <base href="/">    <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body>   <app-people-list></app-people-list> </body> </html> 

app.component.spec.ts:

import { TestBed, async } from '@angular/core/testing';  import { AppComponent } from './app.component';  describe('AppComponent', () => {   beforeEach(async(() => {     TestBed.configureTestingModule({       declarations: [         AppComponent       ],     }).compileComponents();   }));    it('should create the app', async(() => {     const fixture = TestBed.createComponent(AppComponent);     const app = fixture.debugElement.componentInstance;     expect(app).toBeTruthy();   }));    it(`should have as title 'app'`, async(() => {     const fixture = TestBed.createComponent(AppComponent);     const app = fixture.debugElement.componentInstance;     expect(app.title).toEqual('app');   }));    it('should render title in a h1 tag', async(() => {     const fixture = TestBed.createComponent(AppComponent);     fixture.detectChanges();     const compiled = fixture.debugElement.nativeElement;     expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!!');   })); }); 

app.component.ts:

import { Component } from '@angular/core';  @Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css'] }) export class AppComponent {   title = 'app'; } 

app.module.ts:

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http';  import { AppComponent } from './app.component'; import { PeopleListComponent } from './people-list/people-list.component';  @NgModule({   declarations: [ AppComponent, PeopleListComponent ],   imports: [ BrowserModule, FormsModule, HttpModule ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { } 

people-list.component.spec.ts:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';  import { PeopleListComponent } from './people-list.component';  describe('PeopleListComponent', () => {   let component: PeopleListComponent;   let fixture: ComponentFixture<PeopleListComponent>;    beforeEach(async(() => {     TestBed.configureTestingModule({       declarations: [ PeopleListComponent ]     })     .compileComponents();   }));    beforeEach(() => {     fixture = TestBed.createComponent(PeopleListComponent);     component = fixture.componentInstance;     fixture.detectChanges();   });    it('should be created', () => {     expect(component).toBeTruthy();   }); }); 

people-list.component.ts:

import { Component, OnInit } from '@angular/core';  @Component({   selector: 'app-people-list',   template: `     <p>       people-list Works!     </p>   `,   styleUrls: ['./people-list.component.css'] }) export class PeopleListComponent implements OnInit {    constructor() { }    ngOnInit() {   }  } 

Answer 1

Angular starts with a root component. When you give

bootstrap: [ AppComponent ] 

in your app.modules.ts, angular searches for first instance of app-root in your HTML and replaces that tag with angular application. So, your AppComponent selector should match to the root component in HTML .

You need to add other component code inside app.component.html , so that angular can display them . It follows tree structure where app-root is at the top .

Answer 2

one of the simple way sometimes is just to create a new project (definitely only feasible if you are working on a basic project) - there are cases where you might have missed something - this way you can save some good time and focus on learning. This was my experience wasted almost 5 hours finding the reason why this didnt work and I was able to see output by just recreating the entire thing using basic start commands and code changes again on a new boilerplate.