如何在Angular12中將一個延遲加載模塊組件訪問到另一個延遲加載模塊組件？

我創建了 2 個延遲加載模塊。我想將 previewdashboard 組件添加到 previewcomponent 中。像下面

預覽組件.html

<app-previewdashboard></app-previewdashboard>

我嘗試添加，但出現錯誤。這是我的檔案夾結構

預覽.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PreviewRoutingModule } from './preview-routing.module';
import { PreviewComponent } from './preview/preview.component';
import { ReusableModule } from '../ReusableModule';
import { SharedModule } from '../app.shared.module';


@NgModule({
declarations: [PreviewComponent],
 imports: [
  CommonModule,
 PreviewRoutingModule, ReusableModule,
 SharedModule
]
})
export class PreviewModule { }

預覽路由模塊.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PreviewComponent } from './preview/preview.component';

 const routes: Routes = [
 { path: '', component: PreviewComponent },
 { path: 'app/preview', component: PreviewComponent }
 ];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PreviewRoutingModule { }

預覽儀表板模塊.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PreviewdashboardRoutingModule } from './previewdashboard-routing.module';
import { PreviewdashboardComponent } from './previewdashboard/previewdashboard.component';


@NgModule({
declarations: [PreviewdashboardComponent],
imports: [
CommonModule,
PreviewdashboardRoutingModule
]

})
export class PreviewdashboardModule { }

previewdashboard 路由模塊.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PreviewdashboardComponent } from './previewdashboard/previewdashboard.component';

 const routes: Routes = [
 { path: '', component: PreviewdashboardComponent },
 { path: 'previewdashboard', component: PreviewdashboardComponent }
  ];

 @NgModule({
 imports: [RouterModule.forChild(routes)],
 exports: [RouterModule]
 })
 export class PreviewdashboardRoutingModule { }

app.module.ts

import { PreviewdashboardModule } from './previewdashboard/previewdashboard.module';
imports: [
BrowserModule,
HttpClientModule, FormsModule,
AppRoutingModule,
SharedModule.forRoot(),
ReusableModule.forRoot(),
PreviewModule,
PreviewdashboardModule

 ],

應用程式路由.module.ts

{ path: 'app/previewdashboard', 
 loadChildren: () => import('./previewdashboard/previewdashboard.module').then(m => 
  m.PreviewdashboardModule),
 },

我不知道我錯過了什么。

uj5u.com熱心網友回復：

您需要在 previewdashboard 模塊中匯出 previewdashboard ，如下所示，

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    
    import { PreviewdashboardRoutingModule } from './previewdashboard-routing.module';
    import { PreviewdashboardComponent } from './previewdashboard/previewdashboard.component';
    
    
    @NgModule({
    declarations: [PreviewdashboardComponent],
    imports: [
    CommonModule,
    PreviewdashboardRoutingModule
    ],
    exports: [PreviewdashboardComponent],
    })
    export class PreviewdashboardModule { }

在preview.module.ts中，需要匯入PreviewdashboardModule，

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PreviewRoutingModule } from './preview-routing.module';
import { PreviewComponent } from './preview/preview.component';
import { ReusableModule } from '../ReusableModule';
import { SharedModule } from '../app.shared.module';


@NgModule({
declarations: [PreviewComponent],
 imports: [
  CommonModule,
 PreviewRoutingModule, ReusableModule,
 PreviewdashboardModule,
 SharedModule, 
]
})
export class PreviewModule { }

標籤：有角度的 打字稿

上一篇：松動變數型別

下一篇：基于引數的打字稿動態聯合回傳型別