title: Angular2 - Error: The selector "app-root" did not match any elements
body: <p>I am learning Angular 2, without prior experience of Angular.
  I was following this tutorial: <a href="https://www.barbarianmeetscoding.com/blog/2016/03/25/getting-started-with-angular-2-step-by-step-1-your-first-component/" rel="noreferrer">https://www.barbarianmeetscoding.com/blog/2016/03/25/getting-started-with-angular-2-step-by-step-1-your-first-component/</a>.</p>
  
  <p>And after adding new component "app-people-list" and updating the same in index.html, i get below exception. What went wrong?</p>
  
  <pre><code>    Unhandled Promise rejection: The selector "app-root" did not match any elements ; Zone: &lt;root&gt; ; 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 &lt;anonymous&gt;
  </code></pre>
  
  <p>All the code is exactly as per the tutorial link above. But i am still adding some details below.</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Calui&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-people-list&gt;&lt;/app-people-list&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.component.spec.ts:</p>
  
  <pre><code>import { TestBed, async } from '@angular/core/testing';
  
  import { AppComponent } from './app.component';
  
  describe('AppComponent', () =&gt; {
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent
        ],
      }).compileComponents();
    }));
  
    it('should create the app', async(() =&gt; {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
    }));
  
    it(`should have as title 'app'`, async(() =&gt; {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app.title).toEqual('app');
    }));
  
    it('should render title in a h1 tag', async(() =&gt; {
      const fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!!');
    }));
  });
  </code></pre>
  
  <p>app.component.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app';
  }
  </code></pre>
  
  <p>app.module.ts:</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>people-list.component.spec.ts:</p>
  
  <pre><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  
  import { PeopleListComponent } from './people-list.component';
  
  describe('PeopleListComponent', () =&gt; {
    let component: PeopleListComponent;
    let fixture: ComponentFixture&lt;PeopleListComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ PeopleListComponent ]
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(PeopleListComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should be created', () =&gt; {
      expect(component).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>people-list.component.ts:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-people-list',
    template: `
      &lt;p&gt;
        people-list Works!
      &lt;/p&gt;
    `,
    styleUrls: ['./people-list.component.css']
  })
  export class PeopleListComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>