2016-12-12 49 views
2

私はAngular2プロジェクトを持っています。これは別の人が開発したプロジェクトです。実行する必要があります。私がしたら、npm startを使用してサーバーを稼働させましたが、my-appというコンポーネントがページに表示されません。コンポーネントがページに表示されない

これはindex.htmlです:

<html> 
    <head> 
    <base href='/'> 
    <title></title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  
    <link href="c3.css" rel="stylesheet" type="text/css"> 

    </head> 

    <body> 
    <my-app>Loading......</my-app> 
    </body> 
</html> 

これはapp.components.tsです:

app/app.component.htmlある my-appため template、で
import { Component } from '@angular/core'; 
import { AuthenticationService } from './authentication.service'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/app.component.html', 
    styleUrls: ['app/app.component.css'] 
}) 

export class AppComponent { 
    title = ''; 
    isProd:boolean; 
    constructor(private authenticationService: AuthenticationService, private router: Router) { 
     this.isProd = false; 
} 

私はテストのための簡単なdivを置く:

<div><h1>app components</h1></div> 

これを実行するとindex.htmlにあるLoading.....が表示されますが、app/app.component.htmlの内容は表示されません。

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

+1

コンソールでエラーがないか確認してください。 –

+0

私はc3.cssが見つかりません。 – Eddy

+0

AuthenticationServiceとは何ですか?私は数日前に同じ問題を抱えていました。プロバイダを@Componetに追加する必要がありました(たとえば、「providers:[AuthenticationService]」) –

答えて

0

あなたが角度をつけているのか、あなたの蒸したtsがindex.htmlのどこにあるのかわかりません。あなたは、index.htmlで実行されているangular2アプリケーションに必要なすべての必要なものすべてを読み込み、あなたの蒸散されたTSをすべてロードする必要があります。

注:load cssにリンクした後にベースタグを置く必要があります。

<title></title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="styles.css"> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  
     <link href="c3.css" rel="stylesheet" type="text/css"> 
    <base href='/'> 
+0

必要なすべての依存関係をどのようにロードするのですか?私はこの例を見ていますが、https://embed.plnkr.co/?show=previewとindex.htmlファイルにはロード角度タスクを実行するようなものは何もありません。 – Eddy

+0

@Eddyこのプランナーには角度ロードはありませんか? [この種子を見てください](https://github.com/blinfo/angular2-webpack-seed) –

関連する問題