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