Use subcomponents in lazy-loading module

Question

I just started studying Angular (v11.0.2 in my source code), and I came across a behavior that I didn't understand.

The problem:

Clone app-structure and code in StackBlitz (major v10, behavior is the same):

see code (after loading, go manually to URL /workspace)

I trying to use SubcompComponent in WorkspaceComponent (see HTML-template), for lazy-loading WorkspaceModule (see AppRoutingModule and WorkspaceRoutingModule). Metadata selector is specified correctly. But I really can't understand what I'm doing wrong.

Q: Why is the component not loading?

What I tried to do:

Adding SubcompComponent to declarations and exports in WorkspaceModule (see code workspace.module.ts)
Also I tried use SharedModule (see workspace.module.ts too (commented line's)) as directed from the guide Sharing Modules
Studied the main docs articles, including NgModule FAQ Lazy Loading NgModules and many others.

Probably, i'm not see the wood for the trees? Any ideas?

Additional:

Plese, suggest best practices for more detailed debugging (why a particular component is loaded now and when). So far, I only use Augury (Chromium) and write in VS Code.

Thank you in advance and excuse my English.

Antoniossss · Accepted Answer · 2020-11-24 19:33:05Z

1

Working fork here https://stackblitz.com/edit/angular-ivy-jaxkll?file=src%2Fapp%2Fworkspace%2Fworkspace.component.html

You have to have both components in your workspace module (you were not)

You have to import your routing module as well (you were not)

@NgModule({
  imports: [CommonModule,WorkspaceRoutingModule],
  declarations: [SubcompComponent,WorkspaceComponent],
  exports: [SubcompComponent]
})
export class WorkspaceModule {}

answered Nov 24, 2020 at 19:33

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alex Krycek Over a year ago

Thank you, it's work! But the second point is a bit unclear (You have to import your routing module). Сould you explain on your fingers why this is necessary? Maybe there is an explanation in the official documentation?

Antoniossss Over a year ago

Your routes are defined as separate module WorkspaceRoutingModule and it was not imported into lazy loaded WorkspaceModule.

Alex Krycek Over a year ago

Oh, God, forgive my stupidity. Thank you very much!

Collectives™ on Stack Overflow

Use subcomponents in lazy-loading module

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related