Angular Module – Will Nguyen

We have official document here so this is something we can understand and apply fast comparing with normal frontend way such as webpack, stimulus.

PROPERTIES	DETAILS
`declarations`	The components, directives, and pipes that belong to this NgModule.
`exports`	The subset of declarations that should be visible and usable in the component templates of other NgModules.
`imports`	Other modules whose exported classes are needed by component templates declared in this NgModule.
`providers`	Creators of services that this NgModule contributes to the global collection of services; they become accessible in all parts of the application. (You can also specify providers at the component level.)
`bootstrap`	The main application view, called the root component, which hosts all other application views. Only the root NgModule should set the `bootstrap` property.

An Angular module is like an index.js to load all necessary “import”. When we use a component we must see which module routing has this component.

A routing module also declared in module. It prepares loading code and show where to see these components. It gives resources and the paths to them.

So when we generate a module like this.

ng generate module profile --routing

It creates two files.

CREATE src/app/profile/profile-routing.module.ts (250 bytes)
CREATE src/app/profile/profile.module.ts (284 bytes)

And the routing also declared in module already.

@NgModule({
  declarations: [],
  imports: [
    ProfileRoutingModule,
  ]
})

From application.module.ts, we give instruction to go to this module.

const routes: Routes = [
  {
    path: 'profile',
    loadChildren: () => ProfileModule,
  }
];

So when a request goes to this route /profile, we must point out the default Component and other routes (profile-routing.module.ts).

const routes: Routes = [
  {
    path: '',
    component: ProfileComponent
  }
];

We also add the components to declarations so Angular knows that it needs to import CommonModule (and others) to this component. Otherwise, we will see this error message.

NG0303: Can’t bind to ‘ngIf’ since it isn’t a known property of ‘form’ (used in the ‘LoginComponent’ component template). If the ‘ngIf’ is an Angular control flow directive, please make sure that either the ‘NgIf’ directive or the ‘CommonModule’ is a part of an @NgModule where this component is declared.

@NgModule({
  declarations: [AppComponent, LoginComponent],

That’s it. Preparing resources and giving paths to the resources.