Basic lazy loading module routing issue with Angular Routing

Question

Even though I'm relatively new with Angular this should be so simple that it's driving me crazy. I created an Angular project using the CLI with the "Use Angular Routing" option. Created a feature module and used a scaffolding plug-in in VS Code ("Angular Files" by Alexander Ivanichev) to add a routing class to it. At first I was just adding the component selector directly in the app.component.html and it was working fine, as soon as I added the router-outlet, wired everything together and added the "/submodule" part to the address in the browser, the sub-module component is no longer being displayed in the page and there aren't any errors in the console.

As you can see the scaffolding tool did something a little bit different from the documentation and I tried to modify everything to create a regular NgModule and move things around and it still did not work.

Here's my setup:

app.component.html

<div class="root-container">
  <header>
      Site name and other things go here
  </header>
  <aside class="menu">
    <h2>Menu</h2>
    <nav>
      <ul>
        <li><a href="*">Menu item 1</a></li>
        <li><a href="*">Menu item 2</a></li>
        <li><a href="*">Menu item 3</a></li>
        <li><a href="*">Menu item 4</a></li>
      </ul>
    </nav>
  </aside>

  <div class="content">
    <router-outlet></router-outlet>
    <!--
    <app-my-component></app-my-component>
    -->
  </div>
  <aside>some content</aside>
  <footer>This is the footer</footer>
</div>

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MyFeatureModule, <- This is the one I'm trying to load
    AppRoutingModule
  ],
  providers: [],
  exports: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

const routes: Routes = [
  { path: 'submodule', loadChildren: () => import('./featuremodule/feature.module').then(m => m.MyFeatureModule)}
];

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

featuremodule.module.ts

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    CommonModule,
    FeatureModuleRoutes
  ],
  providers: [
    // some providers
  ],
  exports: []
})
export class MyFeatureModule { }

featuremodule.routing.ts

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

export const FeatureRoutes = RouterModule.forChild(routes);

Thank you for your help

is ` <app-my-component></app-my-component>` meant to be commented out like that? — Train
– Train, Commented Sep 13, 2019 at 14:26

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

According to your route setup you need to navigate to /submodule/mycomponent to view the MyComponent Component.

Additionally, you should not be importing the MyFeatureModule into AppModule anymore. This will defeat the purpose of lazy-loading the modules as it will be included in your AppModule.

StackBlitz

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 13, 2019 at 14:27

Teddy Sterne

14.3k2 gold badges49 silver badges52 bronze badges

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

2 Comments

Sergio Romero Over a year ago

Argh! I knew it had to be something stupid. Thanks! One extra question, if I add this path { path: '', redirectTo: '/mycomponent', pathMatch: 'full' } it redirects to the root of the application. I was under the impression that it would match the empty path starting from the '/submodule' one.

Teddy Sterne Over a year ago

Prepending a / to the redirectTo makes it absolute. You should do this instead: { path: '', redirectTo: "mycomponent", pathMatch: "full" }. I updated the StackBlitz to demo this too.

sivy · Accepted Answer · 2019-09-13 14:29:10Z

0

You don't need to import MyFeatureModule in app.module.ts

answered Sep 13, 2019 at 14:29

sivy

4814 silver badges10 bronze badges

Collectives™ on Stack Overflow

Basic lazy loading module routing issue with Angular Routing

2 Answers 2

StackBlitz

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related