質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.10%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 2,422

score 18

初めて質問します。

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 { }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

check解決した方法

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/28 09:55

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

    キャンセル

0

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

debugger;


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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る