Angular 2应用程序无法正常工作-空白页

Question

I am using Chrome browser, Angular 2 with TypeScript. 我正在使用带有TypeScript的Chrome浏览器Angular 2。 Following is my code; 以下是我的代码；

index.html 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>

app.ts: 应用程式：

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: app.module.ts：

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

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

export class AppRedditModule{};

main.ts: main.ts：

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

platformBrowserDynamic().bootstrapModule(AppRedditModule);

My code compiles fine with the tsc command. 我的代码可以使用tsc命令正常编译。 When I run it, I get the app Loaded!! 当我运行它时，我已经app Loaded!!了app Loaded!! message in console too, but it shows a blank page. 控制台中也显示消息，但显示空白页。
There are no Console errors or warnings. 没有控制台错误或警告。

What am I missing? 我想念什么？

Answer 1

Please change selector in your component 请更改组件中的选择器

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

You have typo in selector 您在选择器中有错字

Answer 2

Does it show any error in console? 它在控制台中显示任何错误吗？ Did you create the project with Angular CLI? 您是否使用Angular CLI创建了项目？

Try to add catch to the main.ts: platformBrowserDynamic().bootstrapModule(AppRedditModule).catch(err => console.log(err)); 尝试将catch添加到main.ts中： platformBrowserDynamic().bootstrapModule(AppRedditModule).catch(err => console.log(err));

And try to add <base href="/"> into index.html head tag 并尝试将<base href="/">到index.html head标记中

Unimportant but I have to say it: In app.ts you don't need import { NgModule } from '@angular/core'; 无关紧要，但我不得不说：在app.ts您不需要import { NgModule } from '@angular/core'; and if you would need it, you can add it to the first import. 如果需要，可以将其添加到第一个导入中。 But you don't need it. 但是您不需要它。

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