Getting rid of AngularJS

Work In Progress

This chapter should follow the Angular Upgrade Tutorial as described in the sections including and following section 3.4, Upgrading the phone service, but I will add pointers were there are differences due to the usage of Angular CLI.

Differences relative the Angular Upgrade Tutorial

• No need to remove <script> tags since already removed

Upgrading Phone Service

• Add export { Phone, PhoneData } from './phone.service'; in src/app-ajs/core/phone/index.ts
• Add import { Phone } from '../app-ajs/core/phone'; in src/app/app.module.ts.
• Change to templateUrl: './phone-detail.template.html' in src/app-ajs/phone-detail/phone-detail.component.ts
• Change to templateUrl: './phone-list.template.html' in src/app-ajs/phone-list/phone-list.component.ts.

Upgrading Components

Phone list

• Add export { PhoneListComponent } from './phone-list.component'; in src/app-ajs/phone-list/index.ts.
• Add import { PhoneListComponent } from '../app-ajs/phone-list' in src/app/app.module.ts.
• Add export { PhoneListComponent } from './phone-list.component'; in src/app-ajs/phone-list/index.ts.

Phone details

• ajs-upgraded-providers.ts is put into src/app-ajs.
• Add export { PhoneDetailComponent } from './phone-detail.component'; in src/app-ajs/phone-details/index.ts.
• Add import { routeParamsProvider } from '../app-ajs/ajs-upgraded-providers' in src/app/app.module.ts.
• Add import { PhoneDetailComponent } from '../app-ajs/phone-detail' in src/app/app.module.ts.
• Add export { CheckmarkPipe } from './checkmark/checkmark.pipe'; in src/app-ajs/core/index.ts.
• Add import { CheckmarkPipe } from '../app-ajs/core in src/app/app.module.ts.

Converting phone detail template

• Change in phone-detail.template.html from

1 <div *ngIf="phone">
2  <div class="phone-images">
3    <img [src]="img" class="phone"
4         [ngClass]="{selected: img === mainImageUrl}"
5         *ngFor="let img of phone.images" />
6  </div>
:

to

1 <div *ngIf="phone">
2  <div class="phone-images">
3    <img [src]="mainImageUrl" class="phone selected"/>
4  </div>
  :

Adding The Angular Router And Bootstrap

The app/app.component.ts already exists so we won't need to create it as described. Instead we just change our
template from:

<div class="view-container">
  <div ng-view class="view-frame"></div>
</div>

to

<router-outlet></router-outlet>
<div class="view-container">
  <div ng-view class="view-frame"></div>
</div>

Also the index.html is already updated, so no change is needed there.

Create app/app-routing.module.ts as described but change

• import { PhoneListComponent } from './phone-list/phone-list.component'; to `import { PhoneListComponent } from '../app-ajs/phone-list'; `

then add to app/app.module.ts

:
import { AppRoutingModule } from './app-routing.module';`
:
@NgModule({
:
  imports: [
    :
    AppRoutingModule
  ],

When doing the final change to app/app-routing.module.ts

• import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; -> import { PhoneDetailComponent } from '../app-ajs/phone-detail';
• import { PhoneListComponent } from './phone-list/phone-list.component'; -> import { PhoneListComponent } from '../app-ajs/phone-list';

Say goodbye...

New main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);


New `app/app.module.ts`

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CheckmarkPipe } from '../app-ajs/core';
import { Phone } from '../app-ajs/core/phone';
import { PhoneDetailComponent } from '../app-ajs/phone-detail';
import { PhoneListComponent } from '../app-ajs/phone-list';

@NgModule({
  declarations: [
    AppComponent,
    PhoneListComponent,
    PhoneDetailComponent,
    CheckmarkPipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  entryComponents: [
    PhoneListComponent,
    PhoneDetailComponent
  ],
  providers: [
    Phone
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Remove the following

• app-ajs/index.html
• app-ajs/app.module.ts
• app-ajs/app.config.ts
• app-ajs/core/core.module.ts
• app-ajs/core/phone/phone.module.ts
• app-ajs/phone-detail/phone-detail.module.ts
• app-ajs/phone-list/phone-list.module.ts

Also uninstall AngularJS dependencies (just remove them from package.json and run npm prune)

angular 
angular-animate 
angular-resource 
angular-route

@types/angular
@types/angular-animate
@types/angular-cookies 
@types/angular-mocks
@types/angular-resource
@types/angular-route
@types/angular-sanitize

And remove them from script section in angular-cli.json:

      :
      "scripts": [
      ],
      :

Update corresponding index.ts files.