Angular ng serve默认路由异常：错误加载FreeModule问题排查

Hey there, let's tackle this confusing routing issue you're dealing with. It's totally bizarre that ng serve keeps loading the FreeModule for your root path (localhost:4200) when your config explicitly points to MainModule—even weirder that deleting the root route doesn't fix it, while the production build works perfectly. Let's walk through actionable fixes to resolve this without rebuilding your project:

1. Wipe Angular Cache & Dependencies #

Dev-mode caching is often the culprit for stale routing configurations. Let's clear everything out and start fresh:

• First, clear Angular's built-in cache:

  ng cache clean
  

• Then delete your dependencies and lock files, then reinstall:

  rm -rf node_modules package-lock.json yarn.lock
  npm install
  

• Also, open your app in an incognito window or clear your browser's cache—old bundled files might be stuck loading.

2. Update Lazy Loading Syntax #

Your current loadChildren uses the older string syntax (./pages/main/main.module#MainModule), which can cause parsing inconsistencies in newer Angular versions, especially in dev mode. Switch to the modern dynamic import syntax:

const routes : Routes = [
 { path : '', loadChildren : () => import('./pages/main/main.module').then(m => m.MainModule) },
 { path : 'ajout', loadChildren : () => import('./free/free.module').then(m => m.FreeModule) },
 { path : '**', loadChildren : () => import('./pages/four/four.module').then(m => m.FourModule) }
];

This syntax is more reliable and avoids issues with module resolution in dev builds.

3. Check for Route Guard/Interceptor Interference #

If you have any route guards (like CanActivate, CanLoad) or HTTP interceptors, they might be inadvertently redirecting to the ajout path in dev mode. Try temporarily commenting out all guards/interceptors and restarting ng serve to see if the issue goes away. If it does, you can narrow down which guard is causing the problem.

4. Verify Angular.json Config #

Double-check your angular.json file to ensure there are no dev-specific configurations overriding your routing:

• Compare the architect.build and architect.serve sections—look for fileReplacements or asset configurations that might be swapping out your AppRoutingModule with an old version.
• Ensure the serve target isn't using a different main file or module that has conflicting routing.

5. Check for Accidental Module Imports #

Make sure you haven't accidentally imported FreeModule in your AppModule or any other eagerly loaded module. If FreeModule is in the imports array of another module, Angular might load it immediately in dev mode, overriding your lazy-loaded route. Remove any such imports if they exist.

6. Enable Route Tracing for Debugging #

Uncomment the enableTracing option in your router config to see exactly how Angular is matching routes:

imports: [ RouterModule.forRoot(routes, {
 //initialNavigation: 'enabled',
 enableTracing : true
 })],

When you start ng serve, the browser console will log every step of the routing process—you'll be able to see why it's choosing to load FreeModule instead of MainModule. This is a great way to pinpoint the exact issue.

Start with the cache cleanup first—it's the quickest fix for most dev-mode inconsistencies. If that doesn't work, updating the lazy loading syntax is the next most likely solution. The tracing option will give you a clear window into what's going on under the hood, so don't skip that if the first few steps don't resolve things!

内容的提问来源于stack exchange，提问作者Joaquim Antonio Kapel