角度2のアプリが動作しない - 空白のページ

Chromeブラウザを使用しています。タイプ2の角度2です。以下は私のコードです。角度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>

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!!メッセージが表示されますが、空白のページが表示されます。
コンソールのエラーや警告はありません。

私には何が欠けていますか？

出典

2017-12-30 Sid

コード用のプランナーを作成できますか？ – Niladri

私はそれを作成しようとしましょう。 – Sid

あなたはセレクタ

出典

2017-12-30 17:49:04

申し訳ありませんが、私が投稿した質問のタイプミスでした。私はそれを修正しました。気づいてくれてありがとう。 – Sid

それは今働いていますか？ – Niladri

ああ申し訳ありませんが、私は早すぎると回答しました@ Sid。あなたはこれの仕掛けを作成できますか？ –

にタイプミスがあり、あなたのコンポーネントに

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

をセレクタを変更してください。それは、コンソールにエラーが表示されていますか？ Angular CLIでプロジェクトを作成しましたか？

main.tsにキャッチを追加しよう：platformBrowserDynamic().bootstrapModule(AppRedditModule).catch(err => console.log(err));

そして<base href="/">タグ

重要でないheadindex.htmlにを追加しようが、私はそれを言っている： app.tsでは、import { NgModule } from '@angular/core';を必要としないと必要に応じて、最初のインポートに追加することができます。しかし、あなたはそれを必要としません。

出典

2017-12-30 18:02:16 Laker

上記の手順を試行する前後でコンソールにエラーはありません。どちらもうまくいきませんでした。 – Sid

アプリを調べて要素ツリーのスクリーンショットを作成できますか？ – Laker

ここにリンクです：https://imgur.com/FvNjJMC – Sid

角度2のアプリが動作しない - 空白のページ

答えて

関連する問題