Angular2 - Importing angular modules

Question

Modules are imported in app.module.ts, by adding an entry below,

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    DirectoryComponent,
    FilterPipe,
    LoggingService
  ],
  imports: [
    FormsModule,
    BrowserModule,
    HttpClientModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})

but RouterModule is directly used in ../src/app/app.routes.ts, as shown below,

import {Routes, RouterModule} from "@angular/router";
export const routes:Routes = [
    /* Each route will be an object {}*/
    {path: 'directory', component: DirectoryComponent},
    {path: '',          component: HomeComponent}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

There is no entry of RouterModule in @NgModule(imports: [..]).

1) Are there different ways to import an angular module?

2) Is import of angular module different from import of typescript module?

Do you not have the exported 'routing' constant imported into your Module? — Joe
– Joe, Commented Nov 17, 2017 at 0:12
@Joe Query edited. Am not sure, What dies it mean by your module? Did I create any module? — overexchange
– overexchange, Commented Nov 17, 2017 at 0:21

Joe · Accepted Answer · 2017-11-17 00:29:06Z

5

In your routes.ts you are creating the constant called routes, assigning it the RouterModule and exporting it.

In your app, you're importing the routes constant, which is just a reference to the Module, just like any other:

@NgModule(
 .... imports: [
         routing, // here you are using the const
      ],
....
)

And you are assigning it on this line:

 export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

You could instead use the exported routes and use that in your app.module:

@NgModule(
 .... imports: [
         RouterModule.forRoot(routes),
      ],
....

The first is just assigning it to a variable (well const) before using it.

Typescript modules are different from Angular modules. Typescript modules allow you to share typescript objects between typescript files. You use them everywhere, even in non angular typescript. They're the import { something } from 'myfile.ts' and it gets transpiled to JavaScript ES5 require statements, and just like ES6 importing. Not many people refer to these as modules much in my experience.

Angular modules are modular chunks of angular components, services, directives and pipes etc bundled to so the compiler knows what to do with them, and you can easily compose angular apps from them. If anyone is talking about angular and modules it's likely they're talking about these because typescript modules are so fundamental - every typescript file will have multiple imports at the top.

edited Nov 17, 2017 at 0:29

answered Nov 17, 2017 at 0:17

Joe

7,0944 gold badges57 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

overexchange Over a year ago

So, can I say, app.routes.ts is used to import Routermodule and nothing more than that?

Joe Over a year ago

Nearly. "app.modules.ts imports the RouterModule as defined in app.routes.ts" would be more accurate.

overexchange Over a year ago

Correct. So, app.module.ts is my initial module created with help of ANGULAR-CLI for me, where angular core's @NgModule() decorator is used to import other modules in my module. Is that correct?

Joe Over a year ago

Yep! Exactly. That's the root module.

DrNio · Accepted Answer · 2017-11-17 00:18:49Z

2

There is an entry, you just named it routing as a const. so in your case routing is actually RouterModule.forRoot(routes); which means it's the RouterModule.

I think angular team explains it nicely here https://angular.io/guide/router

And there is no typescript module. Only angular module. In your case you assigned the angular module to a const referenced with name routing and you exported it.

answered Nov 17, 2017 at 0:18

DrNio

1,9841 gold badge20 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angular2 - Importing angular modules

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related