CODEWITHSUNDEEP
angular
hguser
hguser

Reputation: 36048

Why declare components in module in angular

Angular 6.x.

When creating a component you have to declar it in a certain module in the declarations section like this:

app.module.ts:

  declarations: [
    AppComponent,
    DashboardComponent,
    HeroSearchComponent,
    HeroesComponent,
    HeroDetailComponent,
  ],

At the first glance, I thought this may be used to make sure that other module can import the compoents by importing the module first.

However I found that a module(app.routing.module) can import the components created in other module(app.module) by importing the path directly like this, it did not import app.module at all:

app.routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes', component: HeroesComponent }
];

Does this make any sense?

I do not know why you downvote this post, while I accept that may be this is a stupid question for you. But please do not close it.

Because I am really confused by the modularity system. Since I can not find the necessarity in the offical example.

Upvotes: 2

Views: 4164

Answers (2)

Divneet
Divneet

Reputation: 718

There are 3 things to keep in mind.

  1. Components export classes.

  2. These exported classes can be imported in any FILE. These FILES which import component classes may be typescript components or modules.

  3. Modules are nothing but files which enable you to bundle your components which you desire will work in unison and will be dependent on each other. A MODULE should be capable of executing its business logic and should not be dependent on anything which is not a part of that module to execute the very same logic.

  4. Modules can be imported in other modules. The components and services which are exported by the module, can be imported by other modules.
  5. As far as the routing module is concerned, it is a good practice to separate the routing into a separate module. This is because if you are making an application which involves complex logic and a lot of routing, the app module file will become cluttered and hence routing which may involve guard logic should be separated.
  6. As said earlier a module can be imported in another module. So the routing module can be imported in the app module. The routing module imports the component files as it needs a valid declaration of the components to which the paths will route. The app module also declares them as the app needs to know the existence of those components.

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222652

Those 2 configurations are totally different, The components belong to the modules should be imported inside the module.ts. The components needs to be shared across other modules should be added inside exports.

However the components needs to be specificed with the path inside the routing.module.ts in order to load them when you navigate the application using different routes.

Upvotes: 2

Related Questions