Question

我有一个登录页面，我正在使用防护功能。因此，一旦用户输入正确的数据（用户名和密码），他将被重定向到个人资料页面/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 { }

/ 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（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文件夹包含一个模块：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 { }

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

1 个答案: