title: Angular <app-root> is not recognized in Node views
body: <p>I am building a MEAN app, and have run into a problem I have not faced before.  When I include my app-root selector in my index.ejs file in the Node views, the selector is not recognized and is discarded.  The editor shows this error:</p>
  
  <pre><code>&lt;app-root&gt; is not recognized!  Discarding Unexpected &lt;app-root&gt;  
  </code></pre>
  
  <p>I checked the selector in the App Component to make sure the selector matched, checked the AppModule to make sure I was declaring it, and checked the main.ts to make sure I was bootstrapping correctly.  Everything looks fine, and there isn't an error in the terminal when I run the app.  I've spent about an hour looking for similar questions here and in the Angular documentation, but haven't found anything.</p>
  
  <p>So I'm curious whether anyone else has faced this problem or has an idea of what's happening.  Code below.</p>
  
  <h1> index.ejs </h1>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel='stylesheet' href='/stylesheets/style.css' /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;app-root&gt;Loading...&lt;/app-root&gt;
  
    &lt;script src="/js/app/bundle.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h1> App Component </h1>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app works!';
  }
  </code></pre>
  
  <h1> App Module </h1> 
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { routes } from './route/app.routing';
  import { RouterModule } from "@angular/router";
  import { AmChartsModule } from "amcharts3-angular2";
  
  import { AppComponent } from './app.component';
  import { MapComponent } from './map/map.component';
  import { NavbarComponent } from './navbar/navbar.component';
  import { MainComponent } from './main/main.component';
  
  //Services
  import { NewsApiService } from './service/news-api.service';
  
  
  
  @NgModule({
    declarations: [
      AppComponent,
      MapComponent,
      NavbarComponent,
      MainComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      RouterModule,
      AmChartsModule,
      BrowserModule,
      RouterModule.forRoot(routes)
    ],
    providers: [NewsApiService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <h1> main.ts </h1>
  
  <pre><code>import './polyfills';
  
  import { enableProdMode } from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  
  import { AppModule } from './app/app.module';
  import { environment } from './environments/environment';
  
  if (environment.production) {
    enableProdMode();
  }
  
  platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>
  
  <h1> dependencies </h1> 
  
  <pre><code>{
    "name": "aether-news",
    "version": "0.0.0",
    "private": true,
    "scripts": {
      "start": "node ./server/bin/www",
      "build": "del-cli public/js/app &amp;&amp; webpack --config webpack.config.dev.js --progress --profile --watch"
    },
    "engines": {
      "node": "7.4.0"
    },
    "dependencies": {
      "@angular/animations": "^4.2.5",
      "@angular/common": "^4.2.5",
      "@angular/compiler": "^4.2.5",
      "@angular/compiler-cli": "^4.2.5",
      "@angular/core": "^4.2.5",
      "@angular/forms": "^4.2.5",
      "@angular/platform-browser": "^4.2.5",
      "@angular/platform-browser-dynamic": "^4.2.5",
      "@angular/platform-server": "^4.2.5",
      "@angular/router": "^4.2.5",
      "@angular/upgrade": "^4.2.5",
      "bcrypt": "^1.0.2",
      "body-parser": "^1.16.1",
      "cookie-parser": "^1.4.3",
      "cors": "^2.8.2",
      "debug": "^2.6.3",
      "ejs": "~2.5.5",
      "express": "^4.14.1",
      "hbs": "^4.0.1",
      "jsonwebtoken": "^7.3.0",
      "mongoose": "^4.9.2",
      "morgan": "^1.7.0",
      "multer": "^1.3.0",
      "passport": "^0.3.2",
      "passport-jwt": "^2.2.1",
      "preboot": "^5.0.0-rc.11",
      "request": "^2.81.0",
      "request-promise": "^4.2.0",
      "rxjs": "^5.4.2",
      "serve-favicon": "^2.3.2",
      "zone.js": "^0.8.12"
    },
    "devDependencies": {
      "angular2-router-loader": "^0.3.5",
      "angular2-template-loader": "^0.6.2",
      "awesome-typescript-loader": "^3.2.1",
      "del-cli": "^1.1.0",
      "html-loader": "^0.4.5",
      "raw-loader": "^0.5.1",
      "typescript": "^2.4.1",
      "webpack": "^3.1.0",
      "webpack-merge": "^4.1.0"
    }
  }
  </code></pre>
  
  <p>Thanks for taking a look...</p>