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.

24 thoughts on “Create a module with routing in angular and make it as the main module”

  1. I do not even know how I ended up here, but I thought this post was good.

    I do not know who you are but definitely you’re going to a
    famous blogger if you are not already 😉 Cheers!

  2. Oh my goodness! Incredible article dude!
    Thank you so much, However I am experiencing troubles with your RSS.
    I don’t know why I am unable to subscribe to
    it. Is there anyone else having identical RSS problems?
    Anyone that knows the answer can you kindly respond? Thanx!!

  3. Nice blog right here! Additionally your site quite a bit up very fast!
    What web host are you the usage of? Can I get your affiliate hyperlink
    on your host? I desire my site loaded up as quickly as yours lol

  4. You really make it seem so easy with your presentation but
    I find this matter to be really something that I think I would never understand.
    It seems too complex and very broad for me. I am looking forward for your
    next post, I’ll try to get the hang of it!

  5. fantastic publish, very informative. I’m wondering why the opposite experts of this sector
    do not realize this. You must proceed your writing.
    I am sure, you have a great readers’ base already!

  6. Howdy! Someone in my Facebook group shared this
    website with us so I came to look it over. I’m definitely
    enjoying the information. I’m bookmarking and will be
    tweeting this to my followers! Terrific blog and great design and
    style.

  7. I like the helpful information you provide in your articles.

    I’ll bookmark your blog and check again here frequently.
    I’m quite certain I’ll learn a lot of new stuff right here!
    Good luck for the next!

  8. Hi there just wanted to give you a quick heads up.
    The words in your post seem to be running off the screen in Internet explorer.
    I’m not sure if this is a format issue or something to do with
    browser compatibility but I thought I’d post to let
    you know. The design look great though! Hope you get the issue fixed soon.
    Many thanks

Leave a Reply

Your email address will not be published. Required fields are marked *