{ "id": "api/router/RouterModule", "title": "RouterModule", "contents": "\n\n
\n
\n
\n \n API > @angular/router\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

RouterModulelink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Adds directives and providers for in-app navigation among views defined in an application.\nUse the Angular Router service to declaratively specify application states and manage state\ntransitions.

\n\n

See more...

\n
\n \n \n \n
\n\nclass RouterModule {\n static forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders<RouterModule>\n static forChild(routes: Routes): ModuleWithProviders<RouterModule>\n}\n\n\n \n \n\n
\n\n\n \n
\n

See alsolink

\n \n
\n\n\n \n \n \n
\n

Descriptionlink

\n

You can import this NgModule multiple times, once for each lazy-loaded bundle.\nHowever, only one Router service can be active.\nTo ensure this, there are two ways to register routes when importing this module:

\n
    \n
  • The forRoot() method creates an NgModule that contains all the directives, the given\nroutes, and the Router service itself.
    • \n
  • The forChild() method creates an NgModule that contains all the directives and the given\nroutes, but does not include the Router service.
    • \n
\n\n \n
\n\n \n\n \n\n
\n

Static methodslink

\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n
\n
\n

\n forRoot()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Creates and configures a module with all the router providers and directives.\nOptionally sets up an application listener to perform an initial navigation.

\n\n
\n
\n \n\n static forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders<RouterModule>\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n routes\n Routes\n

An array of Route objects that define the navigation paths for the application.

\n\n
\n \n config\n ExtraOptions\n

An ExtraOptions configuration object that controls how navigation is performed.

\n

Optional. Default is undefined.

\n\n
\n\n \n
Returns
\n

ModuleWithProviders<RouterModule>: The new NgModule.

\n\n \n\n\n \n\n \n
\n
\n

When registering the NgModule at the root, import as follows:

\n\n@NgModule({\n imports: [RouterModule.forRoot(ROUTES)]\n})\nclass MyNgModule {}\n\n\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n
\n
\n

\n forChild()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Creates a module with all the router directives and a provider registering routes,\nwithout creating a new Router service.\nWhen registering for submodules and lazy-loaded submodules, create the NgModule as follows:

\n\n
\n
\n \n\n static forChild(routes: Routes): ModuleWithProviders<RouterModule>\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n routes\n Routes\n

An array of Route objects that define the navigation paths for the submodule.

\n\n
\n\n \n
Returns
\n

ModuleWithProviders<RouterModule>: The new NgModule.

\n\n \n\n\n \n\n \n
\n
\n \n@NgModule({\n imports: [RouterModule.forChild(ROUTES)]\n})\nclass MyNgModule {}\n\n\n
\n\n \n
\n\n \n\n \n\n\n \n\n\n \n\n \n \n
\n

Directiveslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
NameDescription
\n \n RouterLink\n \n \n \n

When applied to an element in a template, makes that element a link\nthat initiates navigation to a route. Navigation opens one or more routed components\nin one or more <router-outlet> locations on the page.

\n\n
\n \n RouterLinkActive\n \n \n \n

Tracks whether the linked route of an element is currently active, and allows you\nto specify one or more CSS classes to add to the element when the linked route\nis active.

\n\n
\n \n RouterLinkWithHref\n \n \n \n

Lets you link to specific routes in your app.

\n\n
\n \n RouterOutlet\n \n \n \n

Acts as a placeholder that Angular dynamically fills based on the current router state.

\n\n
\n
\n\n \n \n\n\n \n\n\n
\n
\n\n\n" }