What's the difference between the exports array and exporting a module?

Question

I'm somewhat confused about the difference between declaring the export array and the exporting of the module class?

For example, I have a feature module:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: '../tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

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

My understanding is that if we were to import the TabsPageRoutingModule, say in AppModule, our root app now has the defined routes specified in this module as well as the exported RouterModule. If this is the case, why couldn't we declare RouterModule in the imports in the @NgModule decorator? Alternatively, why can't we export the RouterModule routes?

Thanks in advance!

Reactgular Reactgular · Accepted Answer · 2019-04-01T21:45:02

I'm somewhat confused about the difference between declaring the export array and the exporting of the module class?

Modules that import another module aren't aware of all the dependency modules that are needed. So the child module can export secondary modules so that all of the dependencies will be imported when the child is imported.

RouterModule.forChild(routes)

This creates a child module using a static function. This child module does not contain the features of the RouterModule, but is used to configure the router with this route configuration.

My understanding is that if we were to import the TabsPageRoutingModule, say in AppModule, our root app now has the defined routes specified in this module as well as the exported RouterModule.

It will only have the RouterModule imported into AppModule.

The route configuration is exposed via the dependency injection to the router. The forChild() function creates providers that hold the route configuration.

If this is the case, why couldn't we declare RouterModule in the imports in the @NgModule decorator? Alternatively, why can't we export the RouterModule routes?

I'm not sure I understand your question, but the use of a separate module to define route configurations is purely optional. You can use RouterModule.forChild(...) inside your AppModule if you want.

You don't need to import RouterModule into TabsPageRoutingModule because it doesn't use it. That module only exists to define the providers that hold the route configuration.

What's the difference between the exports array and exporting a module?

1 Answers