AgentAlley

Skills · Coding

Angular Migration

Unverified●31/40

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.

Originally by wshobson · MIT

Claude Code◐PartialHas SKILL.md but declares no allowed-tools — Claude Code will ask for permission each time
Cursor◐PartialPlain prose you can paste in — but no Cursor rules file
Codex◐PartialPlain prose you can paste in — but no AGENTS.md
Gemini CLI◐PartialPlain prose you can paste in
Copilot◐PartialPlain prose you can paste in — but no Copilot instructions file
npx agentalley add angular-migration

This command does not work yet — the CLI is still being built. Until then, use Raw in the reader below to take the file.

Who is stuck, and on what

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.

The whole source

No sign-in, no blur, nothing truncated
angular-migration/SKILL.md314 lines7.0 KBRawView on GitHub
Frontmatter — 2 properties
nameangular-migration
descriptionMigrate 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.
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---A5 — No allowed-tools declared — no way to tell what this skill may touch
5 
6# Angular Migration
7 
8Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.
9 
10## When to Use This Skill
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## Migration Strategies
21 
22### 1. Big Bang (Complete Rewrite)
23 
24- Rewrite entire app in Angular
25- Parallel development
26- Switch over at once
27- **Best for:** Small apps, green field projects
28 
29### 2. Incremental (Hybrid Approach)
30 
31- Run AngularJS and Angular side-by-side
32- Migrate feature by feature
33- ngUpgrade for interop
34- **Best for:** Large apps, continuous delivery
35 
36### 3. Vertical Slice
37 
38- Migrate one feature completely
39- New features in Angular, maintain old in AngularJS
40- Gradually replace
41- **Best for:** Medium apps, distinct features
42 
43## Hybrid App Setup
44 
45```typescript
46// main.ts - Bootstrap hybrid app
47import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
48import { UpgradeModule } from "@angular/upgrade/static";
49import { AppModule } from "./app/app.module";
50 
51platformBrowserDynamic()
52 .bootstrapModule(AppModule)
53 .then((platformRef) => {
54 const upgrade = platformRef.injector.get(UpgradeModule);
55 // Bootstrap AngularJS
56 upgrade.bootstrap(document.body, ["myAngularJSApp"], { strictDi: true });
57 });
58```
59 
60```typescript
61// app.module.ts
62import { NgModule } from "@angular/core";
63import { BrowserModule } from "@angular/platform-browser";
64import { UpgradeModule } from "@angular/upgrade/static";
65 
66@NgModule({
67 imports: [BrowserModule, UpgradeModule],
68})
69export class AppModule {
70 constructor(private upgrade: UpgradeModule) {}
71 
72 ngDoBootstrap() {
73 // Bootstrapped manually in main.ts
74 }
75}
76```
77 
78## Component Migration
79 
80### AngularJS Controller → Angular Component
81 
82```javascript
83// Before: AngularJS controller
84angular
85 .module("myApp")
86 .controller("UserController", function ($scope, UserService) {
87 $scope.user = {};
88 
89 $scope.loadUser = function (id) {
90 UserService.getUser(id).then(function (user) {
91 $scope.user = user;
92 });
93 };
94 
95 $scope.saveUser = function () {
96 UserService.saveUser($scope.user);
97 };
98 });
99```
100 
101```typescript
102// After: Angular component
103import { Component, OnInit } from "@angular/core";
104import { UserService } from "./user.service";
105 
106@Component({
107 selector: "app-user",
108 template: `
109 <div>
110 <h2>{{ user.name }}</h2>
111 <button (click)="saveUser()">Save</button>
112 </div>
113 `,
114})
115export class UserComponent implements OnInit {
116 user: any = {};
117 
118 constructor(private userService: UserService) {}
119 
120 ngOnInit() {
121 this.loadUser(1);
122 }
123 
124 loadUser(id: number) {
125 this.userService.getUser(id).subscribe((user) => {
126 this.user = user;
127 });
128 }
129 
130 saveUser() {
131 this.userService.saveUser(this.user);
132 }
133}
134```
135 
136### AngularJS Directive → Angular Component
137 
138```javascript
139// Before: AngularJS directive
140angular.module("myApp").directive("userCard", function () {
141 return {
142 restrict: "E",
143 scope: {
144 user: "=",
145 onDelete: "&",
146 },
147 template: `
148 <div class="card">
149 <h3>{{ user.name }}</h3>
150 <button ng-click="onDelete()">Delete</button>
151 </div>
152 `,
153 };
154});
155```
156 
157```typescript
158// After: Angular component
159import { Component, Input, Output, EventEmitter } from "@angular/core";
160 
161@Component({
162 selector: "app-user-card",
163 template: `
164 <div class="card">
165 <h3>{{ user.name }}</h3>
166 <button (click)="delete.emit()">Delete</button>
167 </div>
168 `,
169})
170export class UserCardComponent {
171 @Input() user: any;
172 @Output() delete = new EventEmitter<void>();
173}
174 
175// Usage: <app-user-card [user]="user" (delete)="handleDelete()"></app-user-card>
176```
177 
178## Service Migration
179 
180```javascript
181// Before: AngularJS service
182angular.module("myApp").factory("UserService", function ($http) {
183 return {
184 getUser: function (id) {
185 return $http.get("/api/users/" + id);
186 },
187 saveUser: function (user) {
188 return $http.post("/api/users", user);
189 },
190 };
191});
192```
193 
194```typescript
195// After: Angular service
196import { Injectable } from "@angular/core";
197import { HttpClient } from "@angular/common/http";
198import { Observable } from "rxjs";
199 
200@Injectable({
201 providedIn: "root",
202})
203export class UserService {
204 constructor(private http: HttpClient) {}
205 
206 getUser(id: number): Observable<any> {
207 return this.http.get(`/api/users/${id}`);
208 }
209 
210 saveUser(user: any): Observable<any> {
211 return this.http.post("/api/users", user);
212 }
213}
214```
215 
216## Dependency Injection Changes
217 
218### Downgrading Angular → AngularJS
219 
220```typescript
221// Angular service
222import { Injectable } from "@angular/core";
223 
224@Injectable({ providedIn: "root" })
225export class NewService {
226 getData() {
227 return "data from Angular";
228 }
229}
230 
231// Make available to AngularJS
232import { downgradeInjectable } from "@angular/upgrade/static";
233 
234angular.module("myApp").factory("newService", downgradeInjectable(NewService));
235 
236// Use in AngularJS
237angular.module("myApp").controller("OldController", function (newService) {
238 console.log(newService.getData());
239});
240```
241 
242### Upgrading AngularJS → Angular
243 
244```typescript
245// AngularJS service
246angular.module('myApp').factory('oldService', function() {
247 return {
248 getData: function() {
249 return 'data from AngularJS';
250 }
251 };
252});
253 
254// Make available to Angular
255import { InjectionToken } from '@angular/core';
256 
257export const OLD_SERVICE = new InjectionToken<any>('oldService');
258 
259@NgModule({
260 providers: [
261 {
262 provide: OLD_SERVICE,
263 useFactory: (i: any) => i.get('oldService'),
264 deps: ['$injector']
265 }
266 ]
267})
268 
269// Use in Angular
270@Component({...})
271export class NewComponent {
272 constructor(@Inject(OLD_SERVICE) private oldService: any) {
273 console.log(this.oldService.getData());
274 }
275}
276```
277 
278## Routing Migration
279 
280```javascript
281// Before: AngularJS routing
282angular.module("myApp").config(function ($routeProvider) {
283 $routeProvider
284 .when("/users", {
285 template: "<user-list></user-list>",
286 })
287 .when("/users/:id", {
288 template: "<user-detail></user-detail>",
289 });
290});
291```
292 
293```typescript
294// After: Angular routing
295import { NgModule } from "@angular/core";
296import { RouterModule, Routes } from "@angular/router";
297 
298const routes: Routes = [
299 { path: "users", component: UserListComponent },
300 { path: "users/:id", component: UserDetailComponent },
301];
302 
303@NgModule({
304 imports: [RouterModule.forRoot(routes)],
305 exports: [RouterModule],
306})
307export class AppRoutingModule {}
308```
309 
310## Additional patterns and templates
311 
312More detailed templates and worked examples live in `references/details.md`. Read that file for the full pattern library.
313 
314 

Reviews

Installed this one?Write the first review and take the Trailblazer badge.

Reviews only open after a real install, so this is empty — and we leave it empty rather than invent one.

Alternatives

Also in Coding
Subagent Driven DevelopmentUse when executing implementation plans with independent tasks in the current sessionCoding · MIT◐◐◐◐◐●36/40Python Code Style & DocumentationPython code style, linting, formatting, naming conventions, and documentation standards. Use when writing new code, reviewing style, configuring linters, writing docstrings, or establishing project standards.Coding · MIT◐····●35/40Competitor Price Analysis 💲Competitor pricing strategy analysis and market positioning. Price mapping, pricing gaps identification, elasticity signals evaluation, and strategic pricing optimization. Use when the user asks about competitor pricing, price analysis, pricing strategy, or coCoding · MIT◐····●34/40Competitor Price Tracker 📊Set up competitor price tracking and monitoring workflows. Track price changes, detect promotions, analyze pricing patterns, and get alerts for competitive price movements.Coding · MIT◐····●34/40