【发布时间】：2019-01-03 05:36:25
【问题描述】：
所以我试图在 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上的代码。
如果你能帮助我，我会很高兴的！
【问题讨论】：
-
您检查控制台是否有任何错误？
-
如果这五个文件是您项目的全部，那么您缺少一个路由器和一个引导程序。
-
请在stackblitz上提供可验证的样本
-
@SachinGupta 编译成功。
-
@IanMacDonald 我在上面的帖子中添加了 src 文件夹的树。
标签： angular typescript