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

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

angular typescript

Angular应用程序编译但显示空白页,angular,typescript,Angular,Typescript,因此，我试图用Angular为Web应用程序编写一个客户端。我用ng new client初始化了它，此时它显示了默认的网页然后更改了app.component.{html，css，ts}文件，并添加了一个带有ng generate service quote的服务和一个Typescript类（quote.ts）。请记住，这些文件作为另一个Angular项目的一个页面包含，工作正常。然而，就其自身而言，他们不会：当我运行ng service时，我会收到以下消息： ** Angular

因此，我试图用Angular为Web应用程序编写一个客户端。
我用

ng new client

初始化了它，此时它显示了默认的网页

然后更改了

app.component.{html，css，ts}

文件，并添加了一个带有

ng generate service quote

的服务和一个Typescript类（

quote.ts

）。
请记住，这些文件作为另一个Angular项目的一个页面包含，工作正常。
然而，就其自身而言，他们不会：

当我运行

ng service

时，我会收到以下消息：

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

这是我的代码：
app.component.css（如果删除所有css代码，则不会更改任何内容。）

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

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

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
├── 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

所有其他文件仍然是如何生成的

下面是

src

子文件夹的树：

这是上面的代码

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

主要问题是app.component.ts的构造函数中的

私有位置：location

，因为它没有导入。删除未使用的行修复了屏幕上没有显示任何内容的问题。

您是否检查了控制台是否有任何错误？如果这五个文件是您项目的全部，您缺少一个路由器和一个引导程序。请在@SachinGupta上提供一个可验证的示例，它编译成功。@IanMacDonald我在上面的帖子中添加了src文件夹的树。

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

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

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
├── 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