title: angular 2 app-root not loading when running
body: <p>I followed the instruction from here: <a href="https://angular.io/cli" rel="nofollow noreferrer">https://angular.io/cli</a></p>
  
  <p>I executed the following lines with no route option:</p>
  
  <pre><code>ng new test-test-projectthree
  ng serve
  </code></pre>
  
  <p>I am suppose to see everything from app.component.html ? However, I just see an empty page. The index page is display, but the root component is not loading (I do not see anything from root component html file). </p>
  
  <p>I am running everything on Red Hat linux 7 and I am connecting to it using mobaXterm. </p>
  
  <p>I am testing it on firefox ESR 38.6.1 and I see no error in firefox console. </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;TestProjectthree&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-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>main.ts</p>
  
  <pre><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  
  import { AppModule } from './app/app.module';
  
  
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err =&gt; console.error(err));
  </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 = 'test-projectthree';
      }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule, 
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;!--The content below is only a placeholder and can be replaced.--&gt;
  &lt;div style="text-align:center"&gt;
    &lt;h1&gt;
      Welcome to dz!
    &lt;/h1&gt;
  &lt;/div&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', () =&gt; {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
    });
  
    it(`should have as title 'test-projectthree'`, () =&gt; {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app.title).toEqual('test-projectthree');
    });
  
    it('should render title in a h1 tag', () =&gt; {
      const fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('h1').textContent).toContain('Welcome to test-projectthree!');
    });
  });
  </code></pre>
  
  <p>console output: </p>
  
  <pre><code>ng serve
   10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
  ℹ ｢wds｣: webpack output is served from /
  ℹ ｢wds｣: 404s will fallback to //index.html                                                                                                                                                            chunk {main} main.js, main.js.map (main) 7.28 kB [initial] [rendered]
  chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 251 kB [initial] [rendered]
  chunk {runtime} runtime.js, runtime.js.map (runtime) 6.09 kB [entry] [rendered]
  chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
  chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
  Date: 2019-07-30T21:01:50.970Z - Hash: b54b63db5003df7b9b19 - Time: 15924ms
  ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
  ℹ ｢wdm｣: Compiled successfully.
  SystemMessageCache: initATTENTION: default value of option force_s3tc_enable overridden by environment.
  1565203202194   addons.repository       WARN    Search failed when repopulating cache
  1565203202731   addons.update-checker   WARN    Update manifest was not valid XML
  </code></pre>
  
  <p>Anything suggestion on what I am doing wrong? 
  I don't see any error when I run angular using the ng serve command (except for "Search failed when repopulating cache", but I don't think that is the problem) and I don't see any error in the firefox console. Since I am also new to angular 2, I am not sure what I can do to solve this issue right now. </p>