angular - Angular 应用程序编译但显示空白页

问题描述

所以我试图在 Angular 中为 web 应用程序编写一个客户端。
我用初始化它ng new client，在那时它显示默认网页。

然后更改了app.component.{html, css, ts}文件并添加了一个带有ng generate service quoteTypescript 类 ( Quote.ts) 的服务。
请记住，作为页面包含在另一个 Angular 项目中的这些文件可以正常工作。
然而，就其本身而言，它们不会：

当我跑步时，ng serve我收到这些消息：

** 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.

然后当我打开浏览器（尝试使用不同的浏览器）时，localhost:4200它只显示一个空白页面。
显示页面的源码如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Client</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-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>

在浏览器的控制台中有以下错误：

AppComponent_Host.ngfactory.js?
[sm]:1 ERROR Error: StaticInjectorError(AppModule)[AppComponent -> Location]: 
  StaticInjectorError(Platform: core)[AppComponent -> 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 -> Location]: 
  StaticInjectorError(Platform: core)[AppComponent -> 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)

那是我的代码：
app.component.css（如果你删除所有的 css 代码，它不会改变任何东西。）

.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;
}

app.component.html（即使您删除了特定角度的部分，它也不会显示任何内容。）

<div class=center>
  <div class="quote">
      <pre>{{ quotes[index].body }}</pre>
  </div>
  <div>
      <button>-1</button>
      <button>+1</button>
  </div>
</div>

app.component.ts

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();
    }
}

报价服务.ts

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 && i < 10) i++;
        this.index = newI;
        return this.quotes[this.index];
    }
}

行情.ts

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;
    }
}

所有其他文件仍然是它们的生成方式。

这是src子文件夹的树：

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

这是stackblitz上的代码。

如果你能帮助我，我会非常高兴！

标签： angulartypescript

angular - Angular 应用程序编译但显示空白页

问题描述

解决方案

推荐阅读