Create a module with routing in angular and make it as the main module

When we create an angular app from angular CLI, the main module as app.module.ts. But how to change that and learn about the flow of the angular application. In this article, we learn some basic errors too.

Errors we going to see here:

  • Error: No ErrorHandler is platform module browser module included
  • Error: The selector app-main did not match any element
  • Error: The module EcommerceModule was bootstrapped, but it does not declare “@NgModule.bootstrap” components nor a “ngDoBootstrap” method

Let’s start to create a new module.
To create the main module manually. Go to Terminal type command to create a module with routing.

ng g m ecommerce –routing

  • ng – define angular
  • g – Generate
  • m – module
  • ecommerce – name of the module
  • –routing –  define routing add to this module
ng generate module ecommerce –routing

Go to main.ts file and remove AppModule and add your newly created module. In my case, the module name is EcommerceModule.

Import <newModule> from ‘<path>‘;

import { EcommerceModule } from ‘./app/ecommerce/ecommerce.module’;

Then add your Imported Module to 

PlatformBrowserDynamic().bootstrapModule(EcommerceModule).catch(err => console.error(err));

Code: main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
// import { AppModule } from './app/app.module';
import { EcommerceModule } from './app/ecommerce/ecommerce.module';
import { environment } from './environments/environment';
 
if (environment.production) {
  enableProdMode();
}
 
// platformBrowserDynamic().bootstrapModule(AppModule)
// change this AppModule to newly created module
 
platformBrowserDynamic().bootstrapModule(EcommerceModule)
  .catch(err => console.error(err));

Then create a component for main module. Go to path of EcommerceModule and Type in terminal.

ng g c main

Add your component in ecommerce-routing.module.ts

Code: ecommerce-routing.module.ts

import { MainComponent } from './main/main.component';
 
 const routes: Routes = [
  { path: '', component: MainComponent }, 
 // add this newly created component.
];
 
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class EcommerceRoutingModule { }

Now, Try to run with command “ng serve”. Go to browser type http://localhost:4200. Inspect and Let see our error cases.

Error: The module EcommerceModule was bootstrapped, but it does not declare “@NgModule.bootstrap” components nor a “ngDoBootstrap” method

Error: The module EcommerceModule was bootstrapped, but it does not declare “@NgModule.bootstrap” components nor a “ngDoBootstrap” method

Solution: add bootstrap: [MainComponent] to your module.ts

Code: ecommerce.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EcommerceRoutingModule } from './ecommerce-routing.module';
import { MainComponent } from './main/main.component';


@NgModule({
  declarations: [MainComponent],
  imports: [
    CommonModule,
    EcommerceRoutingModule
  ],
  bootstrap: [MainComponent],
})
export class EcommerceModule { }

Error: No ErrorHandler is platform module browser module included

Error: No ErrorHandler is platform module browser module included

Solution: add “BrowserModule” to your module file.

Code: ecommerce.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { EcommerceRoutingModule } from './ecommerce-routing.module';
import { MainComponent } from './main/main.component';


@NgModule({
  declarations: [MainComponent],
  imports: [
    CommonModule,
    BrowserModule, // error gone when we add
    EcommerceRoutingModule
  ],
  bootstrap: [MainComponent],
})
export class EcommerceModule { }

Error: The selector app-main did not match any element

Error: The selector app-main did not match any element

Solution: check index.html add <app-main> and remove <app-root> to your html.

Code: index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>EcommerceAngular</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
  <app-main></app-main>
  <!-- <app-root></app-root> -->
</body>
</html>
Run angular without error

That’s it. Now you can able to run without any error and we successfully create our module and make it as the main module.

I hope this will help you understand how the module works. Your comments are welcome!. Share the idea and get the idea. Have a great day.