Export different objects from the same file to different NgModules

Question

Background:

I am developing an application that will utilize angular's lazy loading mechanism (I'm using 7.2.0). I have several feature-routing.module.ts that handle the routing of said lazily loaded modules.

On the AppModule side I would like to use the pattern described here; that is to have parts of the routes array imported (js way) from another file that exports (js) the config fragment (rather than creating many routing modules that aren't necessary -no special providers or services per subroutes-).

Question: What happens from a bundling perspective if I put the part of the app's route config regarding the feature in the same file as the lazy loaded module's routing module?

The file exports a routing module only used by the lazy-loaded feature module, while it also exports some const that is only used by the app-routing module. So will the whole file (hence including BOTH the feature routing module and other objects) be bundled TWICE: once into the app module and once into the feature? Or will ng build be so smart as to bundle only ONCE the const with the app module, and only ONCE the feature routing module with the feature module?

It seems to me to be a good idea, because all routing concerns of a specific feature would be in one file, and any relevant modules would use it from there. I'm desperately trying to minimize my number of files because it's getting out of control.

e.g. user-routing.module.ts:

// This one is meant for the AppRoutingModule, and should only be bundled with that.
export const user_routes: Routes = [
    {
        path: 'users',
        loadChildren: './users/users.module#UsersModule'
    }
// ...
];
// The rest should only be bundled with the UsersModule and NOT with the app module
const routes: Routes = [
// ...
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UsersRoutingModule { }

score 0 · Accepted Answer · answered Apr 25 '19 at 21:39

Question: What happens from a bundling perspective if I put the part of the app's route config regarding the feature in the same file as the lazy loaded module's routing module?

There are no building issues when keeping them together in the same module.

So will the whole file (hence including BOTH the feature routing module and other objects) be bundled TWICE: once into the app module and once into the feature?

TypeScript import statements are mapped to a single reference into a bundle by WebPack. So you can't duplicate TypeScript source code by importing it multiple times.

Or will ng build be so smart as to bundle only ONCE the const with the app module, and only ONCE the feature routing module with the feature module?

Yes, it will only get bundled once because that's how TypeScript handles it.

Take a look at the Angular bundle inspector. This tools visualized what is inside your bundles, what they use and how large they are. It'll make things a little more clear.

https://coryrylan.com/blog/analyzing-bundle-size-with-the-angular-cli-and-webpack

Export different objects from the same file to different NgModules

1 Answers1