Disclaimer: This is my first time programming in angular and it's quite possible that this is a misconception and therefore my question is invalid

---

I've started to write an app that is supposed to get several complex features. So I put a single feature in a single module so that I can just load the whole module as a simple import into my app and just have it in HTML.

Simplified folder structure

app.module.ts
app.component.ts
app.component.html
feature/feature.module.ts
feature/componentA/componentA.component.cs
...

in the FeatureModule I export my main component which contains all the sub-components.

Then in AppModule I load the other module like that

import { VorgangsartenEditorModule } from './vorgangsarten-editor/vorgangsarten-editor.module';

...

@NgModule({
  declarations: [ .. ],
  imports: [
    .. ,
    FeatureModule
  ],
  ...
})

Then I can add the feature component in my html. That's it.

But now I want to add routing and I need to specify a specific component, not a module.

This leads to my question: How should I route this? Or: How should I structure my complex feature to hide all the internals from the outside. I just want to expose a single "piece" that I can insert into my app. Plug and Play, if you will

CodePudding user response：

To add routing to your feature module, you can create a routing module within the feature module and configure the routes for your feature components.

Here's an example of how you can structure your feature module:

1. Create a routing module in your feature module. You can create a routing.module.ts file.

2. Import the RouterModule and your feature components in the routing module:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ComponentA } from './componentA/componentA.component';
import { ComponentB } from './componentB/componentB.component';

const routes: Routes = [
  { path: 'feature/componentA', component: ComponentA },
  { path: 'feature/componentB', component: ComponentB }
];

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

3. In the feature module, import the feature routing module:

import { FeatureRoutingModule } from './feature-routing.module';

@NgModule({
  imports: [
    ...,
    FeatureRoutingModule
  ],
  ...
})
export class FeatureModule { }

4. In your app module, configure the root route to load the feature module:

import { FeatureModule } from './feature/feature.module';

const routes: Routes = [
  { path: '', loadChildren: () => FeatureModule }
];

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

This way, you can expose a single component from your feature module that you can insert into your app. The internals of your feature module will be hidden from the outside and your feature components can be accessed through routing.

CodePudding user response：

Look at lazy loading and the Route's loadChildren property.

Your route would look like:

const routes: Routes = [

      {
        path: 'items',
        loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
      }
    ];

And then the lazy-loaded module would have its own routing to specify what component is shown when the module is routed to. Can be just a single route, if you have only one 'feature' component in the module.

The documentation is at https://angular.io/guide/lazy-loading-ngmodules

CodePudding user response：

You can use lazy loading of routes to basically just point a route to your FeatureModule, and then let your FeatureModule have it's own route. This way everything inside your feature expect it's base level module is hidden from your base router which I believe is what you want ?

For instance:

In app-routing.module.ts

...

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

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

Add your router module to you app.module.ts

...

@NgModule({
  imports: [
    ...,
    AppRoutingModule,
  ],
  ...
})
export class AppModule { }

Then you can add a route to your components inside FeatureModule

...
const routes: Routes = [
  {
    path: 'componenta',
    component: ComponentA
  }
];

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

Angular doc