Angular2でページがロードされない

Question

初めて質問します。

Angular2は始めたばかりです。Angular2を勉強がてら、管理ページを作ろうとSB-Admin-BS4-Angular-2をカスタマイズしています。

エラー表示も何も出ないのにページがロードされない場合、どのようにデバッグすれば良いかご教授頂けないかと思い、質問させていただきました。
Angular2の書き方に不慣れなため、何かしらヒントをつかめれば助かります。

修正したり追加した該当箇所を元にもどすと表示されるため、その部分になにかしら書き方のミスがあるという想定はできるのですが、何が悪いのかがどのように調査すればいいのかがわかりません。書き換え後の自動ロードされる際に、コマンドラインにエラーは表示されません。

下記のコードにBranchComponentをインポートし、pathを追記しました。pathを消すとページはロードされますが、下記の状態だと表示されません。

dashboard.route.tsにbranchコンポーネントを追加

import { Route } from '@angular/router';

import { HomeRoutes } from './home/index';
import { ChartRoutes } from './charts/index';
import { BlankPageRoutes } from './blank-page/index';
import { TableRoutes } from './tables/index';
import { FormRoutes } from './forms/index';
import { GridRoutes } from './grid/index';
import { BSComponentRoutes } from './bs-component/index';
import { BSElementRoutes } from './bs-element/index';

import { DashboardComponent } from './index';

//ブランチが追加したコンポーネント
import { BranchComponent } from '../branch/index';

export const DashboardRoutes: Route[] = [
	{
		path: 'dashboard',
		component: DashboardComponent,
		children: [
			...HomeRoutes,
			...ChartRoutes,
			...BSComponentRoutes,
			...TableRoutes,
			...BlankPageRoutes,
			...FormRoutes,
			...GridRoutes,
			...BSElementRoutes
		]
  	},
  	{
		path: 'branch',
		component: BranchComponent,
		children:[{
			path: 'branch/list'
		}]
  	}
];

追加したbranch.component.ts

import { Component } from '@angular/core';

/**
*	This class represents the lazy loaded DashboardComponent.
*/

@Component({
	moduleId: module.id,
	selector: 'dashboard-cmp',
	templateUrl: 'branch.component.html'
})

export class BranchComponent { }

Answer 1

Firefoxで作業していたのですが、chromeにAuguryを入れてデバッグしたところ、エラーが出ました。
今後、angular2での開発はchromeにします。Auguryを入れなくてもそもそもchromeではコンソールにエラーが出ていたのかもしれません。
FirefoxのFirebugが使いやすくてずっとデバッグに使用しており、そちらのコンソールにJSエラーが出ず試行錯誤してました。

「Angular2によるモダンWeb開発 TypeScriptを使った基本プログラミング」の中に書いてありました。
amazonのプレビューで見つけました。もう少し理解を深めたら買おうと思います。

みなさん、ありがとうございました。

Answer 2

あまり参考にならないかもしれませんが、
個人的には

debugger;

を入れたり、力技ですが無難にconsole.logを利用しています

エラーが出た際ディベロパーツールのコンソールに一切内容は出てこないですか？

Answer 3

パス/branch/listでBranchComponentを表示させたいならこうだと思います。

      {
        path: 'branch',
        children:[{
            component: BranchComponent,
            path: 'list'
        }]
      }

ブラウザのデバッグコンソール表示すればエラーメッセージが表示されていると思います。

Comments

[arahao]

パスの件、ありがとうございます。スラッシュで入れるのはパラメータでした。勘違いして書いておりました。
デバッグですがコンソールに出てこないので、もう少し調べます。