Is it mandatory to associate a route to a component in Angular

Question

I'm new to Angular. I've the following folder/file tree:

-- app folder
  -- root (
     -- pages (pages-routing, pages-module, pages-component)
        -- page1 (page1-routing, page1-component)
           -- subcomponent (subcomponent-component)

My pages-routing is defined this way

const routes: Routes = [{
path: '',
component: PagesComponent,
   children: [{
     path: 'page1',
     component: Page1Component,
   }, {
     path: 'subcomponent',
     component: SubComponent,
   }],
 }];

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

 export const routedComponents = [
     Page1Component,
     SubComponent,
 ];

The Pages NgModule

@NgModule({
  imports: [
    ThemeModule,
    PagesRoutingModule,
  ],
  declarations: [
     ...routedComponents,
  ],
  providers: [
    SmartTableService,
  ],
})

The Page1 NgModule looks similiar:

@NgModule({
   imports: [
      ThemeModule,
      PagesRoutingModule,
      Ng2SmartTableModule,
   ],
   declarations: [
      ...routedComponents,
   ],
   providers: [
      SmartTableService,
   ],
})

This works but my Question is ..I wonder if it is possible to remove the route for the subcomponent ..since the subcomponent doesnt need to have a route for real ? What i did so far is to try to remove from the pages-routing this

{
 path: 'subcomponent',
 component: SubComponent,
}

and

{ 
 SubComponent,
}

and I added SubComponent reference in both Pages NgModule and Page1 NgModule Declarations sections but I get: No component factory found for SubComponent

So the real question. Is it mandatory to have a route for component ? Can a Component live Without a Route ?

simple answer is, no. It is not mandatory to have routes defined on every component you create. As for the error message you are getting, see if [this answer](https://stackoverflow.com/a/46990483/5260710) helps you debug it. — amal, May 08 '19 at 15:00
This question is difficult to understand. It sounds like you are referring to two modules with two routings, but only show one route configuration. You're also referring to removing the "subcomponent" route, but not explaining why this needs to be removed. — Reactgular, May 08 '19 at 15:22
It has to be removed because the Route associated to the component has to be removed — Claudio Ferraro, May 08 '19 at 15:23

Severin Klug · Accepted Answer · 2019-05-08T15:00:02.633

3

It's not mandatory for a component to be associated to a Route.

It is mandatory to use a Route with a component - according to the Angular Route documentation. If not set in the Route directly, then at least the child Route has to have a component.

https://angular.io/api/router/Route

component?: Type<any>   
The component to instantiate when the path matches. Can be empty if child routes specify components.

Components can serve as something like Pages where you usually want to route to. In theese cases you will associate them to a route to navigate to this page. Components can also be small packages of content you want to put into other components - like a page comonent for example. You'll try to encapsulate a specific scope in a specific component that serves exatcly this purpose.

edited May 08 '19 at 15:00

answered May 08 '19 at 14:50

Severin Klug

733
5
9

Thanks for anwer but the question is not if a Route can Live without a component but if a Component can live Without a Route. I edited my question now – Claudio Ferraro May 08 '19 at 14:55
I edited the post to answer your question: It's not mandatory for a component to be associated to a Route. – Severin Klug May 08 '19 at 14:57

Is it mandatory to associate a route to a component in Angular

1 Answers1