Question

我使用的是Chrome浏览器，Angular 2和TypeScript。以下是我的代码;

的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：

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!!消息，但它显示一个空白页面没有控制台错误或警告。

我错过了什么？

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 app无效 - 空白页

2 个答案: