#native_company# #native_desc#
#native_cta#
  1. AngularJS Migration
  2. Step 9 - Migrate Routing
  3. Create AppRootComponent

Create AppRootComponent

Important

The source code for this course can be found on GitHub. Each step has it’s own branch, instructions for how to checkout the correct code for each step are in the Project Setup lecture.

Create AppRootComponent

This is the largest step left in our migration process, in which we will migrate routing over from UI-Router to Angular Router and drop dual booting. We will do this in a single step that will span across a couple of lectures so lets get started!

Note

At the end of this lecture (and maybe a few other upcoming ones) your project may exist in a transitional state and will not be fully compilable!

Root Component

In modern Angular, all applications have a root component that represents the entry point of the application. All other components will reside in this primary root component.

First, lets include the <app-root> tag in our index.html which will identify the location to place our root component in, like so:

Listing 1. index.html
<!DOCTYPE html >
<html lang="en">

<head>
  ...
</head>

<body>
  <app-root></app-root>
  ...
</body>

</html>

Next lets create our root component. Create a file app-root.component.ts in src/app/components with the following skeleton code like so:

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: ``
})
export class AppRootComponent {

}

Also, make sure this AppRootComponent is added to the declarations array of our NgModule like so:

...
import { AppRootComponent } from "./components/app-root.component";
...
@NgModule({
  imports: [
    ...
  ],
  providers: [
    ...
  ],
  declarations: [
    SearchComponent,
    DefaultImagePipe,
    CardComponent,
    SpinnerComponent,
    PersonListComponent,
    PersonCreateComponent,
    PersonEditComponent,
    AppRootComponent
  ],
  entryComponents: [
    ...
  ]
})
...

To add the template code to our root component, move the HTML source from the index.html file to the app-root.component.ts file like so:

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">Contacts
          </a>
        </div>

        <router-outlet name="header"></router-outlet>

        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li [routerLinkActive]="['active']" >
              <a [routerLink]="[{outlets: {primary: 'list', header: 'search'}}]">Search</a>
            </li>
            <li [routerLinkActive]="['active']">
              <a [routerLink]="[{outlets: {primary: 'create', header: null}}]">Create</a>
            </li>
          </ul>
        </div>

      </div>
    </nav>

    <div class="container main-content">

      <toaster-container></toaster-container>

      <div class="row">

        <router-outlet></router-outlet>

      </div>
    </div>
  `
})
export class AppRootComponent {

}

Remove Dual Booting

Since this step will completely convert our application to Angular, we can get rid of dual booting and bootstrap our application only in Angular. This can be done as follows:

  • Remove the entryComponents property from NgModule in main.ts.

  • Remove the overridden ngDoBootstrap method from the AppModule class in main.ts

  • Modify the bootstrap code in main.ts to remove AngularJS bootstrapping via the UpgradeModule like so:

platformBrowserDynamic().bootstrapModule(AppModule);

  • Finally, add a bootstrap property to NgModule and add the AppRootComponent like so:

...
import { AppRootComponent } from "./components/app-root.component";
...

@NgModule({
  imports: [
    ...
  ],
  providers: [
    ...
  ],
  declarations: [
    ...
  ],
  bootstrap: [
    AppRootComponent
  ]
})
...

Try re-building this application and running it on localhost. Your application will not work, but this is expected. If you do an “inspect element” on the page, you will notice that your application code now resides within the <app-root> element that we added to our HTML code.

Also, notice that there is no AngularJS being bootstrapped into our application.

Caught a mistake or want to contribute to the book? Edit this page on GitHub!


Advanced JavaScript

This unique course teaches you advanced JavaScript knowledge through a series of interview questions. Bring your JavaScript to the 2021's today.

Level up your JavaScript now!