Why use router-outlet to access component of other module doesn't need add to export

Question

I don't understand the difference between router-outlet and module's exports array compilation strategies.

• router-outlet will auto generate component by ComponentFactoryResolver
• if you are not use router-outlet to access component of other module, it will throw error from template parser

Why do we need to added it to exports array, Angular can't auto generate the component that defined in the module like router-outlet.

---

I know if I want to use component of other modules, it's needed add to exports.

live example

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { M1Module } from './m1/m1.module';
// import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    // AppRoutingModule,
    M1Module
  ],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }


----------------------

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    Comp1Component,
    Comp2Component
  ],
  exports: [
    Comp1Component
  ]
})
export class M1Module {}

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>


<app-comp1></app-comp1>

---

if I access the component through routing(http://example.domain.com/comp1), it doesn't need to exports, it's can work.

live example with routing

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { M1Module } from './m1/m1.module';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    M1Module
  ],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

/*****************************************************/

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { Comp1Component }   from './m1/comp1/comp1.component';
import { Comp2Component }   from './m1/comp2/comp2.component';


const routes: Routes = [
  { path: 'comp1', component: Comp1Component },
  { path: 'comp2', component: Comp2Component }
];

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


/*****************************************************/

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Comp1Component } from './comp1/comp1.component';
import { Comp2Component } from './comp2/comp2.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [Comp1Component, Comp2Component],
})
export class M1Module { }

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<!-- it's need to use export -->
<!-- <app-comp1></app-comp1> -->

<!-- it doesn't need to use export -->
<router-outlet></router-outlet>

---

thanks, everyone's answer, it's summary that I understand :

load component by module's exports array

load component by router

Franklinfranklinite

Answer 1

As explained in Angular NgModule FAQs:

What should I export?

Export declarable classes that components in other NgModules are able to reference in their templates. These are your public classes. If you don't export a declarable class, it stays private, visible only to other components declared in this NgModule.

...

What should I not export?

Don't export the following:

Components that are only loaded dynamically by the router or by bootstrapping. Such entry components can never be selected in another component's template. While there's no harm in exporting them, there's also no benefit.

...

Also note that router components are automatically added to the entryComponents list.

Longlongan

thanks, I added two diagrams to describe my understanding, tell me if I'm wrong – Franklinfranklinite

Answer 2

NgModule and scopes / visibility The confusion starts with components and services not having the same scope / visibility:

declarations / components are in local scope (private visibility), providers / services are (generally) in global scope (public visibility). It means the components you declared are only usable in the current module. If you need to use them outside, in other modules, you’ll have to export them:

But router-outlet load the particular component on run time so we don't need to export them.(Thats how i understood,pardon me if i'm wrong)

Toxicosis

thanks, I added two diagrams to describe my understanding, tell me if I'm wrong – Franklinfranklinite