因此，我试图在Angular中为Web应用程序编写客户端。
我使用ng new client对其进行了初始化，这时它显示了默认网页。
然后更改了app.component.{html, css, ts}文件，并添加了ng generate service quote和Typescript类（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();
}
}
quote.service.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];
}
}
Quotes.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上的代码。
如果您能帮助我，我将非常高兴！
答案 0 :(得分：-1)
主要问题是app.component.ts的构造函数中的private location: Location，因为它没有被导入。删除未使用的行可解决屏幕上无显示的问题。