How to access one lazyload module component into another lazyload module component in Angular 12?-CodePudding

I have created 2 lazyload modules. I want to add the previewdashboard component into previewcomponent. like the below

previewcomponent.html

<app-previewdashboard></app-previewdashboard>

I tried to add, but I am getting error. This is my folder structure

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

preview-routing module.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 { }

previewdashboard module.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 routing module.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

 ],

app-routing.module.ts

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

I don't know what I am missing.

CodePudding user response：

You need to export the previewdashboard in the previewdashboard module like below,

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

In preview.module.ts, you need to import 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 { }