Angular 在一个应用程序中使用两个模块时出现非法状态错误

我有一个登录页面，在那里我正在使用守卫功能。因此，一旦用户输入正确的数据（用户名和密码），他将被重定向到配置文件页面

/profile/profile.component.ts

现在，我想为受保护的页面/组件使用一个额外的模块

/profile/profile.component.ts

，并在登录成功时从路由器模块重定向到它。因此，我首先生成了一个新的/第二个模块，名为：

dashboard.module.ts

，其中我有一个应用程序组件

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 { }

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

/dashboard下的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（提前编译）时，会出现以下错误：

处于非法状态时出错：无法在/Users/user/Dev/dashboard-app/src/app/dashboard/app/app.component.ts中加载指令AppComponent的摘要。

当我在app.component.ts中添加export

AppComponent

时：

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 { }

    ...
    @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

---

有没有办法解决这个问题？还是我建立了一个完全错误的结构和/或错误的概念？

问题解决了。我确实改变了非公共组件的结构。。。现在，dashboard文件夹包含一个模块：

dashboard.module.ts

，以及用户登录后可以访问的其他子文件夹。另外，我在

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 { }