Lazy loading - router outlet not displaying component

[twilit bolt]

Hello,

I am trying to do lazy loading with router outlet.
AppModule.module.ts:

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient, APP_BASE_HREF]
            }
        }),
        TranslateModule,
        BrowserAnimationsModule,
        MainContainerModule,
        ApiModule.forRoot(apiConfigFactory)
    ],
    providers: [
        {
            provide: APP_BASE_HREF,
            useFactory: getAppBaseHref
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

AppRouting.module.ts

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {RouteEnum} from 'src/app/route.enum';

const loadExaminations = () => import('./modules/sections/modules/examinations/examinations.module').then(m => m.ExaminationsModule);

const routes: Routes = [
    {path: RouteEnum.EXAMINATIONS, loadChildren: loadExaminations},
    {path: '**', redirectTo: RouteEnum.EXAMINATIONS}
];

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

SectionContainer.module.ts

@NgModule({
    declarations: [
        SectionContainerComponent
    ],
    exports: [
        SectionContainerComponent
    ],
    imports: [
        CommonModule,
        TranslateModule,
        RouterOutlet,
        RouterModule
    ]
})
export class SectionContainerModule {
}

SectionContainer.component.ts

...
      <div class="row">
                <div class="col">
                    <router-outlet></router-outlet>
                </div>
            </div>
...

path in url is set correctly by this.router.navigate() but component is not displayed under <router-outlet>

I skipped some indirect components. The SectionContainer component is displayed correctly

Structure looks like this:
app -> MainContainer -> [NavBar, SectionContainer]

[rain silo]

I'm not sure what the role of the SectionContainer.module.ts is. It's not imported not lazy-loaded anywhere in the code you posted. Please read #how-to-get-help to get help and provide a minimal reproduction of your issue in a stackblitz, as explained there.

[twilit bolt]

SectionContainer is a coomponent in which html code is <router-outlet>. There I would like to display ExaminationsComponent

ExaminationsModule is lazyloaded

[rain silo]

OK. But that component is declared in SectionContainerModule, which is not imported anywhere nor lazy-loaded.

[twilit bolt]

I skipped some imports. There you can see that in SectionContainerModule is declared same named component

[rain silo]

If you skip important things, we have a very hard time providing help. That's why we advise providing a minimal reproduction as a stackblitz.

[twilit bolt]

Ok. So what am I missing?

Not asking about imports we talked above but why router outlet doesnt work?

[rain silo]

I don't know, since I don't know how this component is used, if it's even associated to a route, what is that route definition, etc. etc. Post a minimal repro on stackblitz.

[twilit bolt]

I wrote above how it is used

app component contains main container which contains section container

Section container contains router outlet.
AppRouterModule loads ExaminationsModule which has ExaminationsComponent declared

[rain silo]

Good luck with your issue.

[proud marlin]

Routing issues are pretty hard to debug from the outside as it's about a lot of file imports.
That's why a simple reproduction with Stackblitz would be more useful than plain files.

[unkempt jacinth]

Shouldn't SectionContainer.module.ts have route config in RourerModule.forChild?

[twilit bolt]

Hmm In another project I think I didnt seen it but ill check it. Should I also have Routing config with path in component displayed by router outlet?

[twilit bolt]

I mean, if Examination component should be displayed under router outlet, should I also create ExaminationRoutingModule with path: "" ?

[twilit bolt]

I don't know how to recreate it in stackblitz

[twilit bolt]

As I can see in another project, I don't have such a thing

[proud marlin]

Copying your files in stackblitz is fone. That's more likely about missing import/incomplete route definition. That's fine if the project do not run on stackblitz

[twilit bolt]

I imported all modules etc. that I am using

Maybe I'll describe again but more detailed

That's the root of my app

app.module.ts:

[proud marlin]

Please stop by now, mind you 'll loose a second helper by not providing a stackblitz example

[twilit bolt]

Why you are forcing me to copy paste files there when I can just type code here, same files as there?

If stackblitz project would at least need to work, then ok, but if not, then it's pointless...

[proud marlin]

I'm not forcing you but mind we are helping on our free time and we have a quite clear experience about what's the best place to debug such a situation

The stackblitz project do NOT need to work. The point is to get z clear vision of your files, unrelated to human explanation

[twilit bolt]

That is a force to me :/

I understand, but you didn't try my way. Ok I'll copy paste files then

[proud marlin]

Then good luck with this problem

[twilit bolt]

To people that wants the answer, routing module for component that needs to be displayed under <router-outlet>

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {ExaminationsComponent} from 'src/app/modules/sections/modules/examinations/components/examinations.component';

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

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

was missing in imports[] of ExaminationsModule

So the whole thing is:
in app/ you create AppRoutingModule, define module loaders there
import AppRoutingModule in AppModule
somewhere in desired container component place <router-outlet></router-outlet> in html and RouterOutlet in it's module imports[]
then simple ChildComponentsRoutingModule as above + place it in imports[] of ChildComponentsModule

[unkempt jacinth]

Ya, If you are not displaying component in the view by component tag but want through router-outlet you need to add route config for that module. You can have angular create it during module creation.

ng g m exam-module --routing