2016-03-23 23 views
1

私は最近thisチュートリアルを行いました。角度はHero Editorでした。 私の問題は今、「localhost:123/dashboard」に行くたびに、Chromeブラウザに「Hello World」(「localhost:123」は正常に表示されます)が表示されます。 Chromeでスクリプトをデバッグしようとすると同じことが起こります。Hello World Error Angular2

編集:私はちょうど私のコードhere

マイルーティングコードアップロード:

@RouteConfig([ 
    { 
     path: '/heroes', 
     name: 'Heroes', 
     component: HeroesComponent 
    }, { 
     path: '/dashboard', 
     name: 'Dashboard', 
     component: DashboardComponent, 
     useAsDefault: true 
    }, { 
     path: '/detail/:id', 
     name: 'HeroDetail', 
     component: HeroDetailComponent 
    } 
]), 

ファイルを、私は私のindex.htmlで参照:

<!-- 1. Load libraries --> 
    <script src="libs/es6-shim.min.js"></script> 
    <script src="libs/system-polyfills.js"></script> 
    <script src="libs/shims_for_IE.js"></script> 
    <script src="libs/angular2-polyfills.js"></script> 
    <script src="libs/system.js"></script> 
    <script src="libs/rx.js"></script> 
    <script src="libs/angular2.dev.js"></script> 
    <script src="libs/router.dev.js"></script> 
    <script src="libs/http.dev.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script> 
     System.config({ 
      packages: { 
       appScripts: { 
        defaultExtension: 'js' 
       } 
      } 
     }); 
    </script> 
    <script> 
     System.import('appScripts/boot') 
       .then(null, console.error.bind(console)); 
    </script> 

私boot.ts:

///<reference path="../node_modules/angular2/typings/browser.d.ts"/> 
import {bootstrap} from 'angular2/platform/browser' 
import {AppComponent} from './app' 
bootstrap(AppComponent); 

ダッシュボードコンポーネント:

import { Component, OnInit } from 'angular2/core'; 
import { Router } from 'angular2/router'; 
import { Hero } from './hero'; 
import { HeroService } from './hero.service'; 
@Component({ 
    selector: 'my-dashboard', 
    templateUrl: '/views/dashboard.component.html' 
}) 
export class DashboardComponent implements OnInit { 
    heroes: Hero[] = []; 
    constructor(private _heroService: HeroService, private _router: Router) { } 
    ngOnInit() { 
      this._heroService.getHeroes().subscribe(heroes => this.heroes); 
     //this._heroService.getHeroes().then(heroes => this.heroes); 
    } 
    gotoDetail(hero: Hero) { 
     let link = ['HeroDetail', { id: hero.id }]; 
     this._router.navigate(link); 
    } 
} 
+0

Angular 2 Documentation: Developer Guide - Routing and Navigationは私たちを見る 'boot.ts'と' dashboardComponent.ts'。 – micronyks

+0

'/ views/dashboard.component.html''ファイルには何がありますか?ありがとう! –

+0

私はコードをhttps://github.com/Rian0702/AngularAdventureにアップロードしました。 – EffGee

答えて

1

これは、ルーティングのための問題解決: "!Hello World" の

@Component({ 
selector: 'pv-app', 
templateUrl: '/Views/PvStart.html', 
directives: [ROUTER_DIRECTIVES], 
providers: [ 
ROUTER_PROVIDERS, 
provide(LocationStrategy, { useClass: HashLocationStrategy }), 
HTTP_PROVIDERS 
], 
pipes: [stringToDatePipe] 
}) 


import {provide} from 'angular2/core' 
0

configure関数のStartup.csから来ています...

 app.Run(async (context) => 
     { 
      await context.Response.WriteAsync("Hello World!"); 
     }); 

コメントアウトすると、そのテキストが表示されなくなります。また

、あなたはindex.htmlを、ヘッドタグの最初の子として基本要素を設定していることを確認してください...

<head> 
    <base href="/"> 

    <title>My Angular 2 App</title> 

最後に、HTMLコンポーネントの相手への絶対パスを提供してみてください...

@Component({ 
    selector: "app", 
    templateUrl: "./app/app.component.html", 
}) 

参考: