コンポーネントの呼び出しが超過しました

Question

私は角度4のアプリを構築し、ルーティングを実装しています。私のブラウザは、最初のページの読み込み時にムービーコンポーネントへのコールを頻繁に行うようです。開発者ツールでエラーメッセージが表示されます。最大通話を超えています。問題が何であるか分かりません。ここでは、コード

スクリーンショット

ホームモジュール

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { HomeComponent } from './home.component'; 

@NgModule({ 
    imports: [ 
    CommonModule 
    ], 
    exports: [HomeComponent], 
    declarations: [HomeComponent] 
}) 
export class HomeModule { } 

ホームコンポーネント

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

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'] 
}) 
export class HomeComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

です

Home.component.html

<p> 
    home works! 
</p> 

ムービーモジュール

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import {MovieComponent} from './movie.component' 

@NgModule({ 
    imports: [ 
    CommonModule 
    ], 
    exports: [MovieComponent], 
    declarations: [MovieComponent] 
}) 
export class MovieModule { } 

ムービー成分

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

@Component({ 
    selector: 'app-movie', 
    templateUrl: './movie.component.html', 
    styleUrls: ['./movie.component.css'] 
}) 
export class MovieComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

appmodule

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import {FormsModule} from '@angular/forms'; 
import {HttpModule} from '@angular/http' 

import { AppComponent } from './app.component'; 
import { NavbarComponent } from './navbar/navbar.component'; 
import { TopbarComponent } from './topbar/topbar.component'; 
import { FooterbarComponent } from './footerbar/footerbar.component'; 
import { MRDBGlobalConstants } from './shared/mrdb.global.constants'; 
import {AppRoutingModule} from './app.routing'; 
import {HomeModule} from './home/home.module'; 
import {MovieModule} from './movie/movie.module'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    FooterbarComponent, 
    TopbarComponent, 
    NavbarComponent 


    ], 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    AppRoutingModule, 
    HomeModule, 
    MovieModule 

    ], 
    providers: [MRDBGlobalConstants], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

appcomponent

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


@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app'; 

constructor(public viewRef : ViewContainerRef) { 

} 

} 

app.routing

import {NgModule} from '@angular/core'; 
import {Routes,RouterModule} from '@angular/router'; 
import {MovieComponent} from '../app/movie/movie.component'; 
import {HomeComponent} from '../app/home/home.component'; 

export const appRoutes:Routes = [ 
    {path: '', component: HomeComponent}, 
    {path: 'movie', component : MovieComponent} 

]; 

@NgModule({ 
imports:[RouterModule.forRoot(appRoutes,{ useHash: true})], 
exports:[RouterModule] 

}) 
export class AppRoutingModule {} 

app.component.html

<section id="container"> 
    <top-bar>Loading top bar...</top-bar> 
    <nav-bar>Loading navigation menu...</nav-bar> 

    <footer-bar>Loading footer...</footer-bar> 

     <app-movie></app-movie> 
     <app-home></app-home> 


    <router-outlet> </router-outlet> 
</section> 

開発ツール スクリーンショット1

スクリーンショット2

Answer 1

は、おそらくあなたは怠惰なロードされたモジュールのための任意のルーティングを持っていませんでした。

私はモジュールを削除するように提案して、それを、これはからコンポーネントを取得します

<app-movie></app-movie> 
    <app-home></app-home> // remove these lines 

<router-outlet></router-outlet>コメントの後に更新してみてください

@NgModule({ 
    declarations: [ 
    AppComponent, 
    FooterbarComponent, 
    TopbarComponent, 
    NavbarComponent, 
    MovieComponent, 
    HomeComponent 

    ], 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    AppRoutingModule// it should be something like this 

    ], 
    providers: [MRDBGlobalConstants], 
    bootstrap: [AppComponent] 
}) 

AppRoutingModule

import { RouterModule, Routes } from '@angular/router'; 
import { AppComponent } from './app.component'; 

const ROUTER_DATA: Routes = [ 
    { path:'home', component: yourroutes}, 
]; 

export const AppRoutingModule= RouterModule.forRoot(ROUTER_DATA); 

を与えるだろうルータとディスプレイ、あなたがすでにリダイレクトしている家庭用o適切なURL