title: Angular app compiles but shows blank page
body: <p>So I was trying to write a client for a webapplication in Angular.<br>
  I initialized it with <code>ng new client</code>, served at that point it shows the default webpage.</p>
  
  <p>Then changed the <code>app.component.{html, css, ts}</code> files and added a service with <code>ng generate service quote</code> and a Typescript-class (<code>Quote.ts</code>).<br>
  Keep in mind that those files, included as a page on another Angular project, work just fine.<br>
  On it's own, however, they don't:</p>
  
  <p>When I run <code>ng serve</code> I get those messages:</p>
  
  <pre><code>** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
  
  Date: 2019-01-02T20:34:57.478Z
  Hash: 23d31db4a8a333ef9adb
  Time: 7407ms
  chunk {main} main.js, main.js.map (main) 14.7 kB [initial] [rendered]
  chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
  chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
  chunk {styles} styles.js, styles.js.map (styles) 16.2 kB [initial] [rendered]
  chunk {vendor} vendor.js, vendor.js.map (vendor) 3.31 MB [initial] [rendered]
  ℹ ｢wdm｣: Compiled successfully.
  </code></pre>
  
  <p>When I then open a browser (tried it with different ones) on <code>localhost:4200</code> it just shows a blank page.<br>
  The display page's source is as follows: </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Client&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;script type="text/javascript" src="runtime.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="polyfills.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="styles.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="vendor.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="main.js"&gt;&lt;/script&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In the browser's cosole are the following errors:</p>
  
  <pre><code>AppComponent_Host.ngfactory.js?
  [sm]:1 ERROR Error: StaticInjectorError(AppModule)[AppComponent -&gt; Location]: 
    StaticInjectorError(Platform: core)[AppComponent -&gt; Location]: 
      NullInjectorError: No provider for Location!
      at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:717)
      at resolveToken (core.js:954)
      at tryResolveToken (core.js:898)
      at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:795)
      at resolveToken (core.js:954)
      at tryResolveToken (core.js:898)
      at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:795)
      at resolveNgModuleDep (core.js:17656)
      at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:18345)
      at resolveDep (core.js:18716)
  
  main.ts:12
  Error: StaticInjectorError(AppModule)[AppComponent -&gt; Location]: 
    StaticInjectorError(Platform: core)[AppComponent -&gt; Location]: 
      NullInjectorError: No provider for Location!
      at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:717)
      at resolveToken (core.js:954)
      at tryResolveToken (core.js:898)
      at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:795)
      at resolveToken (core.js:954)
      at tryResolveToken (core.js:898)
      at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:795)
      at resolveNgModuleDep (core.js:17656)
      at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:18345)
      at resolveDep (core.js:18716)
  </code></pre>
  
  <p><strong>That is my code:</strong><br>
  <strong>app.component.css</strong> (It does not change anything if you remove all the css code.)</p>
  
  <pre><code>.center {
      border: 3px solid black;
      position: absolute;
      top: 50%;
      left: 50%;
      padding: 15px;
      -ms-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
  }
  
  .quote {
      padding: 30px;
  }
  
  button {
      margin: 5px;
      width: 50px;
  }
  </code></pre>
  
  <p><strong>app.component.html</strong> (Even is you remove the angular specific part, it does not show anything.)</p>
  
  <pre><code>&lt;div class=center&gt;
    &lt;div class="quote"&gt;
        &lt;pre&gt;{{ quotes[index].body }}&lt;/pre&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;button&gt;-1&lt;/button&gt;
        &lt;button&gt;+1&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { QuoteService } from './quote.service';
  import { Quote } from './Quote';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
      public currentQuote: Quote;
  
      public constructor(
          private location: Location,
          private quoteService: QuoteService) {
      }
  
      public ngOnInit(): void {
          this.currentQuote = this.quoteService.getRandomQuote();
      }
  }
  </code></pre>
  
  <p><strong>quote.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Quote } from './Quote';
  
  @Injectable({
      providedIn: 'root'
  })
  export class QuoteService {
      private quotes: Quote[];
      public index: number;
  
      public constructor(/*private httpClient: HttpClient*/) {
          this.quotes = [     // This should be pulled from a server at some point
              new Quote(0, new Date(2018, 11, 13), "some text", 0, 0),
              new Quote(1, new Date(2018, 11, 13), "some text", 5, 1),
              new Quote(5, new Date(2018, 11, 15), "some text", 0, -1),
              new Quote(3, new Date(2018, 11, 16), "some text", -2, 0)
          ];
      }
  
      public getRandomQuote(): Quote {
          let newI: number;
          let i = 0;
          while((newI = Math.floor(Math.random() * this.quotes.length)) == this.index &amp;&amp; i &lt; 10) i++;
          this.index = newI;
          return this.quotes[this.index];
      }
  }
  </code></pre>
  
  <p><strong>Quotes.ts</strong></p>
  
  <pre><code>export class Quote {
      public id: number;      // The unique id of the quote
      public date: Date;      // The date of the quote
      public body: string;    // The actual quote, including the participants and formatting
      public rating: number;  // The global rating on the quote as sum of all votes
      public vote: number;    // The user's own vote for the quote
  
      public constructor(id:number, date:Date, body:string, rating:number, vote:number) {
          this.id = id;
          this.date = date;
          this.body = body;
          this.rating = rating;
          this.vote = vote;
      }
  }
  </code></pre>
  
  <p>All the other files are still how they got generated.</p>
  
  <p>Here is the tree of the <code>src</code> subfolder:</p>
  
  <pre><code>src
  ├── app
  │   ├── app.component.css
  │   ├── app.component.html
  │   ├── app.component.spec.ts
  │   ├── app.component.ts
  │   ├── app.module.ts
  │   ├── quote.service.spec.ts
  │   ├── quote.service.ts
  │   └── Quote.ts
  ├── assets
  ├── browserslist
  ├── environments
  │   ├── environment.prod.ts
  │   └── environment.ts
  ├── favicon.ico
  ├── index.html
  ├── karma.conf.js
  ├── main.ts
  ├── polyfills.ts
  ├── styles.css
  ├── test.ts
  ├── tsconfig.app.json
  ├── tsconfig.spec.json
  └── tslint.json
  </code></pre>
  
  <p>Here is the code on <a href="https://stackblitz.com/edit/angular-1jpvn2" rel="nofollow noreferrer">stackblitz</a>.</p>
  
  <p>I would be really happy if you could help me!</p>