In this step-by-step tutorial you will learn how to create a multiview application using Angular 15, with custom ngModules
(core, feature and shared), lazy loading, primary and nested routes
The Core
module is often used to group components, directive, pipes (and services) that needs to be available in AppModule
and loaded when the application starts, such as the Navigation Bar.
This is not required by Angular, since you may also directly add them in AppModule
, but I like to organize things in this way:
So, let's create the "Core" module and add it to AppModule
:
ng g m core --module app
ng g m
represents the alias for the command ng generate module
core
: the name of the module. It creates core/core.module.ts
--module app
: import the core
module to app.module
, the "root" moduleInfact, AppModule
now imports CoreModule
:
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
@NgModule({
declarations: [ AppComponent ],
imports: [
BrowserModule,
AppRoutingModule,
CoreModule // <== ADDED
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ng g c core/components/navbar --flat --module core --export
ng g c
represents the alias for the command ng generate component
core/components/navbar
: generate the component in a specific path--flat
: avoid the creation of a folder that contains the component itself (otherwise the component would be created in /navbar/navbar.components
)--module core
: register the component to the CoreModule
instead of AppModule
--exports
: the component is also exported, otherwise it cannot be used in other modulesAs you can see, the NavBar component is created and the core.module.ts
file is updated:
core.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavbarComponent } from './components/navbar.component';
@NgModule({
declarations: [ NavbarComponent ], // <== NEW
imports: [ CommonModule ],
exports: [ NavbarComponent ] , // <== NEW
})
export class CoreModule { }
The CommonModule
contains the Angular built-in directives (*ngIf
, *ngFor
, ..) and pipes (date
, json
, ...) and it's necessary in order to use these features in all components of the module
So far, your project structure should look like the following:
Open app.component.ts
and add the NavBar
component you have just created.
We also wrap the router-outlet
component into a div
element, applying a couple of Bootstrap CSS classes in order to distance the Navigation Bar from the route content and make it responsive.
Anyway we use router-outlet
later. At the moment it does not display anything yet.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-navbar></app-navbar>
<div class="container mt-2">
<router-outlet></router-outlet>
</div>
`
})
export class AppComponent { }
As you may have noticed we have also removed some stuff from the "original" generated component:
title
class property: since we don't use it anymorestyles
decorator property: usually used to define local CSS classesIf you run the project on http://localhost:4200
you should just see the following output:
If you don't see any output, open your Browser DevTools and check if there are some runtime errors.
You may also need to kill the angular-cli
process from terminal by using
CTRL
+
C
and run it again by using npm start
Now, create the Navigation Bar layout by using Bootstrap.
Open core/components/navbar.component.ts
and replace previous content with the following (it's just a static HTML template):
navbar.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-navbar',
template: `
<nav class="navbar navbar-expand navbar-dark bg-dark text-white">
<a class="navbar-brand">LOGO</a>
<div class="navbar-collapse collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link">Users</a>
</li>
</ul>
</div>
</nav>
`
})
export class NavbarComponent { }
The navigation still does not work but the layout should be in place.
You will enable navigation in the next chapter.