Angular 2應用程序無法正常工作-空白頁

Question

我正在使用帶有TypeScript的Chrome瀏覽器Angular 2。 以下是我的代碼；

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Angular 2 - Simple Reddit</title>
    <script src="node_modules/es6-shim/es6-shim.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>    

    <link rel="stylesheet" href="resources/vendor/semantic.min.css" type="text/css">
    <link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app.js')
              .then(console.log('app.js Loaded!!'), console.error.bind(console));
    </script>
    <app-reddit></app-reddit>
</body>
</html>

應用程式：

import { Component } from "@angular/core";
import { NgModule }  from '@angular/core';

@Component({
    selector: 'app-reddit',
    template: "<div>Reddit Clone! ... </div>"
})

export class AppReddit{}

app.module.ts：

import { NgModule } from '@angular/core'; 
import { AppReddit } from './app'; 

@NgModule({ 
  declarations: [AppReddit], 
  bootstrap: [AppReddit] 
}) 

export class AppRedditModule{};

main.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppRedditModule } from './app.module'; 

platformBrowserDynamic().bootstrapModule(AppRedditModule);

我的代碼可以使用tsc命令正常編譯。 當我運行它時，我已經app Loaded!!了app Loaded!! 控制台中也顯示消息，但顯示空白頁。
沒有控制台錯誤或警告。

我想念什么？

Answer 1

請更改組件中的選擇器

@Component({
    selector: 'app-reddit',
    template: "<div>Reddit Clone! ... </div>"
})

您在選擇器中有錯字

Answer 2

它在控制台中顯示任何錯誤嗎？ 您是否使用Angular CLI創建了項目？

嘗試將catch添加到main.ts中： platformBrowserDynamic().bootstrapModule(AppRedditModule).catch(err => console.log(err));

並嘗試將<base href="/">到index.html head標記中

無關緊要，但我不得不說：在app.ts您不需要import { NgModule } from '@angular/core'; 如果需要，可以將其添加到第一個導入中。 但是您不需要它。

Angular 2應用程序無法正常工作-空白頁

問題描述

2 個解決方案

解決方案1
0 2017-12-30 17:49:04

解決方案2
0 2017-12-30 18:02:16

Angular 2應用程序無法正常工作-空白頁

問題描述

2 個解決方案

解決方案1 0 2017-12-30 17:49:04

解決方案2 0 2017-12-30 18:02:16

解決方案1
0 2017-12-30 17:49:04

解決方案2
0 2017-12-30 18:02:16