1つのアプリケーションで2つのモジュールを使用すると、不正な状態のエラーが発生する

Question

ガード機能を使用しているログインページがあります。したがって、ユーザーが正しいデータ（ユーザー名とパス）を入力すると、彼はプロフィールページ/profile/profile.component.tsにリダイレクトされます。

保護されたページ/コンポーネントのために余分なモジュール/profile/profile.component.tsを使用し、ログインが成功したときにルータモジュールからそのモジュールにリダイレクトしたいと考えています。したがって、私はまず第1に、dashboard.module.tsという新しい/第2のモジュールを生成しました。ここでは、アプリケーションコンポーネントapp.componentがあります。

/src 
    /app 
    app.module.ts 
    app.component.ts 
    router.ts 
    /dashboard 
     /app 
      app.component.ts 
     dashboard.module.ts 

dashborad.component.ts：：/ダッシュボードの下に

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { AppComponent } from 'app/dashboard/app/app.component'; 

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

app.component.ts：

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

@Component({ 
    selector: 'app-app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
@NgModule({ 
    exports:[] 
}) 
export class AppComponent implements OnInit { 
    constructor() { } 
    ngOnInit() {} 
} 

私はせずにng serveでアプリを起動することができますが構造は、次のようになりますエラーは発生しますが、AOT（Ahead of Time Compilation）を実行すると、次のエラーが発生します。

ERROR in Illegal state: Could not load the summary for directive AppComponent in /Users/user/Dev/dashboard-app/src/app/dashboard/app/app.component.ts.

私はapp.component.tsに輸出AppComponentを追加します。

... 
    @NgModule({ 
     exports:[AppComponent] 
    }) 
    ... 

私は、このエラーに直面：

ERROR in Maximum call stack size exceeded 

ERROR in ./src/main.ts 
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/user/Dev/dashboard-app/src' 
@ ./src/main.ts 3:0-74 
@ multi ./src/main.ts 

これをしてください修正するための任意のアイデア？または私は完全に間違った構造や間違った概念を構築していますか？

Answer 1

問題を解決しました。私はNot-Publicコンポーネントの構造を変更しました...ダッシュボードフォルダにはモジュール：dashboard.module.tsと、ユーザーログイン後にアクセス可能な他のサブフォルダが含まれています。

src/ 
    app/ 
     dashboard/ 
      dashboard.component.ts 
      dashboard.component.html 
      dashboard.component.css 
      dashboard.module.ts 
      profile/ 
      profile.component.ts 
      profile.component.html 
      profile.component.css 
      add/ 
      add.component.ts 
      add.component.html 
      add.component.css 
      .... 
     signup/ 
     howto/ 
main.ts 

dashboard.module.ts：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { ProfileComponent } from './profile/profile.component'; 
import { AddComponent } from './add/add.component'; 
import { DashboardComponent } from './dashboard.component'; 
import { Routes, RouterModule, RouterOutlet } from '@angular/router'; 
import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms'; 

import { MaterialModule, MdNativeDateModule, MdAutocompleteModule, MdCheckboxModule, MdDatepickerModule, MdInputModule, 
    MdRadioModule, MdSelectModule, MdSliderModule, MdSlideToggleModule, MdMenuModule, MdSidenavModule, MdToolbarModule, 
    MdListModule, MdGridListModule, MdCardModule, MdTabsModule, MdButtonModule, MdButtonToggleModule, MdChipsModule, 
    MdIconModule, MdProgressSpinnerModule, MdProgressBarModule, MdDialogModule, MdTooltipModule, MdSnackBarModule 
} from '@angular/material'; 

const dashBoardRoutes: Routes = [ 
    { path:'', redirectTo: 'dashboard', pathMatch:'full' }, 
    { path:'dashboard', component: DashboardComponent, 
    children: [ 
     { path:'add', component: AddComponent}, 
     { path:'profile', component: ProfileComponent}, 
    ]}, 

]; 

@NgModule({ 
    declarations: [ 
     ProfileComponent, DashboardComponent, AddComponent 
    ], 

    imports: [ FormsModule, ReactiveFormsModule, 
     MdDatepickerModule, MdInputModule, 
     RouterModule.forChild(dashBoardRoutes) 
    ], 

    providers:[], 

    schemas: [ CUSTOM_ELEMENTS_SCHEMA ], 
    exports:[ProfileComponent, AddComponent], 
    bootstrap: [ 
     DashboardComponent 
    ] 
}) 
export class DashboardModule { } 

また、私は dashboard.module.ts

構造に宣言し、輸出を変更し、修正しました