在一个应用程序中使用两个模块时处于非法状态的错误

Question

我有一个使用防护功能的登录页面。因此，一旦用户输入了正确的数据（用户名和密码），他将被重定向到个人资料页面 /profile/profile.component.ts。

现在我想为受保护的 pages/components /profile/profile.component.ts 使用一个额外的模块，并在登录成功时从路由器模块重定向到它。因此，我首先生成了一个名为：dashboard.module.ts 的 new/second 模块，其中我确实有一个应用程序组件 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 在 /dashboard 下:

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（提前编译）时，我会收到以下错误：

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

有什么办法可以解决这个问题吗？还是我构建的结构完全错误 and/or 错误的概念？

Answer 1

问题已解决。我确实更改了 Not-Public 组件的结构...现在仪表板文件夹包含一个模块：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 { }

在一个应用程序中使用两个模块时处于非法状态的错误

ERROR in Illegal state when using two modules in one App

angular-cli

angular2-aot

angular