Angular Migration

1---
2name: angular-migration
3description: Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or modernizing legacy Angular code.
4---
5 
6# Angular Migration
7 
8Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.
9 
10## Use this skill when
11 
12- Migrating AngularJS (1.x) applications to Angular (2+)
13- Running hybrid AngularJS/Angular applications
14- Converting directives to components
15- Modernizing dependency injection
16- Migrating routing systems
17- Updating to latest Angular versions
18- Implementing Angular best practices
19 
20## Do not use this skill when
21 
22- You are not migrating from AngularJS to Angular
23- The app is already on a modern Angular version
24- You need only a small UI fix without framework changes
25 
26## Instructions
27 
281. Assess the AngularJS codebase, dependencies, and migration risks.
292. Choose a migration strategy (hybrid vs rewrite) and define milestones.
303. Set up ngUpgrade and migrate modules, components, and routing.
314. Validate with tests and plan a safe cutover.
32 
33## Safety
34 
35- Avoid big-bang cutovers without rollback and staging validation.
36- Keep hybrid compatibility testing during incremental migration.
37 
38## Migration Strategies
39 
40### 1. Big Bang (Complete Rewrite)
41- Rewrite entire app in Angular
42- Parallel development
43- Switch over at once
44- **Best for:** Small apps, green field projects
45 
46### 2. Incremental (Hybrid Approach)
47- Run AngularJS and Angular side-by-side
48- Migrate feature by feature
49- ngUpgrade for interop
50- **Best for:** Large apps, continuous delivery
51 
52### 3. Vertical Slice
53- Migrate one feature completely
54- New features in Angular, maintain old in AngularJS
55- Gradually replace
56- **Best for:** Medium apps, distinct features
57 
58## Hybrid App Setup
59 
60```typescript
61// main.ts - Bootstrap hybrid app
62import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
63import { UpgradeModule } from '@angular/upgrade/static';
64import { AppModule } from './app/app.module';
65 
66platformBrowserDynamic()
67  .bootstrapModule(AppModule)
68  .then(platformRef => {
69    const upgrade = platformRef.injector.get(UpgradeModule);
70    // Bootstrap AngularJS
71    upgrade.bootstrap(document.body, ['myAngularJSApp'], { strictDi: true });
72  });
73```
74 
75```typescript
76// app.module.ts
77import { NgModule } from '@angular/core';
78import { BrowserModule } from '@angular/platform-browser';
79import { UpgradeModule } from '@angular/upgrade/static';
80 
81@NgModule({
82  imports: [
83    BrowserModule,
84    UpgradeModule
85  ]
86})
87export class AppModule {
88  constructor(private upgrade: UpgradeModule) {}
89 
90  ngDoBootstrap() {
91    // Bootstrapped manually in main.ts
92  }
93}
94```
95 
96## Component Migration
97 
98### AngularJS Controller → Angular Component
99```javascript
100// Before: AngularJS controller
101angular.module('myApp').controller('UserController', function($scope, UserService) {
102  $scope.user = {};
103 
104  $scope.loadUser = function(id) {
105    UserService.getUser(id).then(function(user) {
106      $scope.user = user;
107    });
108  };
109 
110  $scope.saveUser = function() {
111    UserService.saveUser($scope.user);
112  };
113});
114```
115 
116```typescript
117// After: Angular component
118import { Component, OnInit } from '@angular/core';
119import { UserService } from './user.service';
120 
121@Component({
122  selector: 'app-user',
123  template: `
124    <div>
125      <h2>{{ user.name }}</h2>
126      <button (click)="saveUser()">Save</button>
127    </div>
128  `
129})
130export class UserComponent implements OnInit {
131  user: any = {};
132 
133  constructor(private userService: UserService) {}
134 
135  ngOnInit() {
136    this.loadUser(1);
137  }
138 
139  loadUser(id: number) {
140    this.userService.getUser(id).subscribe(user => {
141      this.user = user;
142    });
143  }
144 
145  saveUser() {
146    this.userService.saveUser(this.user);
147  }
148}
149```
150 
151### AngularJS Directive → Angular Component
152```javascript
153// Before: AngularJS directive
154angular.module('myApp').directive('userCard', function() {
155  return {
156    restrict: 'E',
157    scope: {
158      user: '=',
159      onDelete: '&'
160    },
161    template: `
162      <div class="card">
163        <h3>{{ user.name }}</h3>
164        <button ng-click="onDelete()">Delete</button>
165      </div>
166    `
167  };
168});
169```
170 
171```typescript
172// After: Angular component
173import { Component, Input, Output, EventEmitter } from '@angular/core';
174 
175@Component({
176  selector: 'app-user-card',
177  template: `
178    <div class="card">
179      <h3>{{ user.name }}</h3>
180      <button (click)="delete.emit()">Delete</button>
181    </div>
182  `
183})
184export class UserCardComponent {
185  @Input() user: any;
186  @Output() delete = new EventEmitter<void>();
187}
188 
189// Usage: <app-user-card [user]="user" (delete)="handleDelete()"></app-user-card>
190```
191 
192## Service Migration
193 
194```javascript
195// Before: AngularJS service
196angular.module('myApp').factory('UserService', function($http) {
197  return {
198    getUser: function(id) {
199      return $http.get('/api/users/' + id);
200    },
201    saveUser: function(user) {
202      return $http.post('/api/users', user);
203    }
204  };
205});
206```
207 
208```typescript
209// After: Angular service
210import { Injectable } from '@angular/core';
211import { HttpClient } from '@angular/common/http';
212import { Observable } from 'rxjs';
213 
214@Injectable({
215  providedIn: 'root'
216})
217export class UserService {
218  constructor(private http: HttpClient) {}
219 
220  getUser(id: number): Observable<any> {
221    return this.http.get(`/api/users/${id}`);
222  }
223 
224  saveUser(user: any): Observable<any> {
225    return this.http.post('/api/users', user);
226  }
227}
228```
229 
230## Dependency Injection Changes
231 
232### Downgrading Angular → AngularJS
233```typescript
234// Angular service
235import { Injectable } from '@angular/core';
236 
237@Injectable({ providedIn: 'root' })
238export class NewService {
239  getData() {
240    return 'data from Angular';
241  }
242}
243 
244// Make available to AngularJS
245import { downgradeInjectable } from '@angular/upgrade/static';
246 
247angular.module('myApp')
248  .factory('newService', downgradeInjectable(NewService));
249 
250// Use in AngularJS
251angular.module('myApp').controller('OldController', function(newService) {
252  console.log(newService.getData());
253});
254```
255 
256### Upgrading AngularJS → Angular
257```typescript
258// AngularJS service
259angular.module('myApp').factory('oldService', function() {
260  return {
261    getData: function() {
262      return 'data from AngularJS';
263    }
264  };
265});
266 
267// Make available to Angular
268import { InjectionToken } from '@angular/core';
269 
270export const OLD_SERVICE = new InjectionToken<any>('oldService');
271 
272@NgModule({
273  providers: [
274    {
275      provide: OLD_SERVICE,
276      useFactory: (i: any) => i.get('oldService'),
277      deps: ['$injector']
278    }
279  ]
280})
281 
282// Use in Angular
283@Component({...})
284export class NewComponent {
285  constructor(@Inject(OLD_SERVICE) private oldService: any) {
286    console.log(this.oldService.getData());
287  }
288}
289```
290 
291## Routing Migration
292 
293```javascript
294// Before: AngularJS routing
295angular.module('myApp').config(function($routeProvider) {
296  $routeProvider
297    .when('/users', {
298      template: '<user-list></user-list>'
299    })
300    .when('/users/:id', {
301      template: '<user-detail></user-detail>'
302    });
303});
304```
305 
306```typescript
307// After: Angular routing
308import { NgModule } from '@angular/core';
309import { RouterModule, Routes } from '@angular/router';
310 
311const routes: Routes = [
312  { path: 'users', component: UserListComponent },
313  { path: 'users/:id', component: UserDetailComponent }
314];
315 
316@NgModule({
317  imports: [RouterModule.forRoot(routes)],
318  exports: [RouterModule]
319})
320export class AppRoutingModule {}
321```
322 
323## Forms Migration
324 
325```html
326<!-- Before: AngularJS -->
327<form name="userForm" ng-submit="saveUser()">
328  <input type="text" ng-model="user.name" required>
329  <input type="email" ng-model="user.email" required>
330  <button ng-disabled="userForm.$invalid">Save</button>
331</form>
332```
333 
334```typescript
335// After: Angular (Template-driven)
336@Component({
337  template: `
338    <form #userForm="ngForm" (ngSubmit)="saveUser()">
339      <input type="text" [(ngModel)]="user.name" name="name" required>
340      <input type="email" [(ngModel)]="user.email" name="email" required>
341      <button [disabled]="userForm.invalid">Save</button>
342    </form>
343  `
344})
345 
346// Or Reactive Forms (preferred)
347import { FormBuilder, FormGroup, Validators } from '@angular/forms';
348 
349@Component({
350  template: `
351    <form [formGroup]="userForm" (ngSubmit)="saveUser()">
352      <input formControlName="name">
353      <input formControlName="email">
354      <button [disabled]="userForm.invalid">Save</button>
355    </form>
356  `
357})
358export class UserFormComponent {
359  userForm: FormGroup;
360 
361  constructor(private fb: FormBuilder) {
362    this.userForm = this.fb.group({
363      name: ['', Validators.required],
364      email: ['', [Validators.required, Validators.email]]
365    });
366  }
367 
368  saveUser() {
369    console.log(this.userForm.value);
370  }
371}
372```
373 
374## Migration Timeline
375 
376```
377Phase 1: Setup (1-2 weeks)
378- Install Angular CLI
379- Set up hybrid app
380- Configure build tools
381- Set up testing
382 
383Phase 2: Infrastructure (2-4 weeks)
384- Migrate services
385- Migrate utilities
386- Set up routing
387- Migrate shared components
388 
389Phase 3: Feature Migration (varies)
390- Migrate feature by feature
391- Test thoroughly
392- Deploy incrementally
393 
394Phase 4: Cleanup (1-2 weeks)
395- Remove AngularJS code
396- Remove ngUpgrade
397- Optimize bundle
398- Final testing
399```
400 
401## Resources
402 
403- **references/hybrid-mode.md**: Hybrid app patterns
404- **references/component-migration.md**: Component conversion guide
405- **references/dependency-injection.md**: DI migration strategies
406- **references/routing.md**: Routing migration
407- **assets/hybrid-bootstrap.ts**: Hybrid app template
408- **assets/migration-timeline.md**: Project planning
409- **scripts/analyze-angular-app.sh**: App analysis script
410 
411## Best Practices
412 
4131. **Start with Services**: Migrate services first (easier)
4142. **Incremental Approach**: Feature-by-feature migration
4153. **Test Continuously**: Test at every step
4164. **Use TypeScript**: Migrate to TypeScript early
4175. **Follow Style Guide**: Angular style guide from day 1
4186. **Optimize Later**: Get it working, then optimize
4197. **Document**: Keep migration notes
420 
421## Common Pitfalls
422 
423- Not setting up hybrid app correctly
424- Migrating UI before logic
425- Ignoring change detection differences
426- Not handling scope properly
427- Mixing patterns (AngularJS + Angular)
428- Inadequate testing
429