在 angular 中寻找有关功能模块之间路由的指针

Question

I was working on a big project of mine in angular, discovered feature modules and routing modules, then tried to implement that in order to better organize the project. When I did this, the app became very disfunctional. Since then, i made this test project to try to implement routing between feature modules, on a smaller, more managable scale.

This test project works, but there are some small problems that I know will cause issues down the line, and id like to resolve.

There are two big problems as I see it:

1. <a routerLink="some/link> does not work in feature modules, only app module: it renders in the markup as plaintext with no working link. I tried importing routerLink to the feature modules module.ts file, as a last ditch effort, but still nothing.

2. I was hoping that routing to a feature module, if configured that way, could display different mark up and styling, for example- routing to module-a shows one navigation menu, and routing to module-b shows another. Instead, the default behaivor happens- app.component is displayed everywhere, and routing to a feature module makes the url specified component appear in place of router-outlet. Id like to disable this default behaivor if possible, so that components routed to in one feature module have one set of styles and features, and components routed to in another module have different styling and features- as if router-outlet recognizes that feature-a/component is part of feature-a, and in turn loads that modules' html and css as the app.component instead of the root app.component.

Attached the source code below, for this test project. I only included source for module feature-a, as feature-b is in essence the same thing with different text, to prevent unneeded cluttering

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FeatureAModule } from './feature-a/feature-a.module';
import { FeatureBModule } from './feature-b/feature-b.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FeatureAModule,
    FeatureBModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

App.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChalpComponent } from './feature-a/chalp/chalp.component';
import { FeatureAComponent } from './feature-a/feature-a.component';
import { FeatureBComponent } from './feature-b/feature-b.component';
import { SkoneComponent } from './feature-b/skone/skone.component';


const routes: Routes = [
/*     { path: 'feature-a', component: FeatureAComponent,
        children: [
            { path : 'feature-a/chalp', component: ChalpComponent }
        ]
    },
    { path: 'feature-b', component: FeatureBComponent,
        children: [
            { path : 'feature-b/skone', component: SkoneComponent }
        ]
    }
 */    
    { path : 'feature-a/chalp', component: ChalpComponent },
    { path : 'feature-b/skone', component: SkoneComponent },
    { path: 'feature-a', component: FeatureAComponent },
    { path: 'feature-b', component: FeatureAComponent },
    
];

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

markup for app.component:

<h1>Inside App-Module now!</h1>

Go to feature A for chalp: <a routerLink="feature-a/chalp">Chalp</a>
Go to feature B for Skone: <a routerLink="feature-b/skone">Skone</a>
<router-outlet></router-outlet>

feature-a routing + module file

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes, RouterOutlet, RouterLink } from '@angular/router';
import { FeatureAComponent } from './feature-a.component';
import { ChalpComponent } from './chalp/chalp.component';


const routes : Routes = [
    { path : '', component : FeatureAComponent },
    { path : 'chalp', component: ChalpComponent}
]


@NgModule({
  declarations: [ChalpComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class FeatureAModule { }

chalp- a component within feature-a

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-chalp',
  templateUrl: './chalp.component.html',
  styleUrls: ['./chalp.component.css']
})
export class ChalpComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

chalp markup

<p>chalp works!</p>
<a routerLink="../">Go back one</a>

Answer 1

The answer is cleaner:

use lazily loaded feature modules.

// root module routing:

router.forRoot([
  // this is what ng documentation suggests
  { 
     path: 'admin',
     loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
  },
    each of these unique route prefixes 
    existing already in our bloated application.
    now is stored and carefully imported depending
    on when the contained resources are required
    by the user.
    ...


])

//then in each feature modules' routing module
router.forChild([
    // treat the first word as root, so url is not admin/admin!
    { path: '', component: AdminComponent,
      children: [
          /*All urls in our app which
           have 'admin' prefix*/ 
      ]
    }
]

Two big lessons out of this excursion into typescript:

1. always know the framework and the way its designed before using it.
2. not only do the feature modules handle imports and routing, they also each import a shared module called util which houses the service main module, all types and interfaces, componentry, pipes and directives that the whole app uses.

In the future, knowing this will help me better design applications. The core app is what all our feature modules plug into and what gets bootstrapped when the application is served. Now there is a unified structure to how imports and exports are structured, and you never have a question about how to get to a service or interface.