Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.
\n// main.ts - Bootstrap hybrid app\nimport { platformBrowserDynamic } from \"@angular/platform-browser-dynamic\";\nimport { UpgradeModule } from \"@angular/upgrade/static\";\nimport { AppModule } from \"./app/app.module\";\n\nplatformBrowserDynamic()\n .bootstrapModule(AppModule)\n .then((platformRef) => {\n const upgrade = platformRef.injector.get(UpgradeModule);\n // Bootstrap AngularJS\n upgrade.bootstrap(document.body, [\"myAngularJSApp\"], { strictDi: true });\n });\n// app.module.ts\nimport { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { UpgradeModule } from \"@angular/upgrade/static\";\n\n@NgModule({\n imports: [BrowserModule, UpgradeModule],\n})\nexport class AppModule {\n constructor(private upgrade: UpgradeModule) {}\n\n ngDoBootstrap() {\n // Bootstrapped manually in main.ts\n }\n}\n// Before: AngularJS controller\nangular\n .module(\"myApp\")\n .controller(\"UserController\", function ($scope, UserService) {\n $scope.user = {};\n\n $scope.loadUser = function (id) {\n UserService.getUser(id).then(function (user) {\n $scope.user = user;\n });\n };\n\n $scope.saveUser = function () {\n UserService.saveUser($scope.user);\n };\n });\n// After: Angular component\nimport { Component, OnInit } from \"@angular/core\";\nimport { UserService } from \"./user.service\";\n\n@Component({\n selector: \"app-user\",\n template: `\n <div>\n <h2>{{ user.name }}</h2>\n <button (click)=\"saveUser()\">Save</button>\n </div>\n `,\n})\nexport class UserComponent implements OnInit {\n user: any = {};\n\n constructor(private userService: UserService) {}\n\n ngOnInit() {\n this.loadUser(1);\n }\n\n loadUser(id: number) {\n this.userService.getUser(id).subscribe((user) => {\n this.user = user;\n });\n }\n\n saveUser() {\n this.userService.saveUser(this.user);\n }\n}\n// Before: AngularJS directive\nangular.module(\"myApp\").directive(\"userCard\", function () {\n return {\n restrict: \"E\",\n scope: {\n user: \"=\",\n onDelete: \"&\",\n },\n template: `\n <div class=\"card\">\n <h3>{{ user.name }}</h3>\n <button ng-click=\"onDelete()\">Delete</button>\n </div>\n `,\n };\n});\n// After: Angular component\nimport { Component, Input, Output, EventEmitter } from \"@angular/core\";\n\n@Component({\n selector: \"app-user-card\",\n template: `\n <div class=\"card\">\n <h3>{{ user.name }}</h3>\n <button (click)=\"delete.emit()\">Delete</button>\n </div>\n `,\n})\nexport class UserCardComponent {\n @Input() user: any;\n @Output() delete = new EventEmitter<void>();\n}\n\n// Usage: <app-user-card [user]=\"user\" (delete)=\"handleDelete()\"></app-user-card>\n// Before: AngularJS service\nangular.module(\"myApp\").factory(\"UserService\", function ($http) {\n return {\n getUser: function (id) {\n return $http.get(\"/api/users/\" + id);\n },\n saveUser: function (user) {\n return $http.post(\"/api/users\", user);\n },\n };\n});\n// After: Angular service\nimport { Injectable } from \"@angular/core\";\nimport { HttpClient } from \"@angular/common/http\";\nimport { Observable } from \"rxjs\";\n\n@Injectable({\n providedIn: \"root\",\n})\nexport class UserService {\n constructor(private http: HttpClient) {}\n\n getUser(id: number): Observable<any> {\n return this.http.get(`/api/users/${id}`);\n }\n\n saveUser(user: any): Observable<any> {\n return this.http.post(\"/api/users\", user);\n }\n}\n// Angular service\nimport { Injectable } from \"@angular/core\";\n\n@Injectable({ providedIn: \"root\" })\nexport class NewService {\n getData() {\n return \"data from Angular\";\n }\n}\n\n// Make available to AngularJS\nimport { downgradeInjectable } from \"@angular/upgrade/static\";\n\nangular.module(\"myApp\").factory(\"newService\", downgradeInjectable(NewService));\n\n// Use in AngularJS\nangular.module(\"myApp\").controller(\"OldController\", function (newService) {\n console.log(newService.getData());\n});\n// AngularJS service\nangular.module('myApp').factory('oldService', function() {\n return {\n getData: function() {\n return 'data from AngularJS';\n }\n };\n});\n\n// Make available to Angular\nimport { InjectionToken } from '@angular/core';\n\nexport const OLD_SERVICE = new InjectionToken<any>('oldService');\n\n@NgModule({\n providers: [\n {\n provide: OLD_SERVICE,\n useFactory: (i: any) => i.get('oldService'),\n deps: ['$injector']\n }\n ]\n})\n\n// Use in Angular\n@Component({...})\nexport class NewComponent {\n constructor(@Inject(OLD_SERVICE) private oldService: any) {\n console.log(this.oldService.getData());\n }\n}\n// Before: AngularJS routing\nangular.module(\"myApp\").config(function ($routeProvider) {\n $routeProvider\n .when(\"/users\", {\n template: \"<user-list></user-list>\",\n })\n .when(\"/users/:id\", {\n template: \"<user-detail></user-detail>\",\n });\n});\n// After: Angular routing\nimport { NgModule } from \"@angular/core\";\nimport { RouterModule, Routes } from \"@angular/router\";\n\nconst routes: Routes = [\n { path: \"users\", component: UserListComponent },\n { path: \"users/:id\", component: UserDetailComponent },\n];\n\n@NgModule({\n imports: [RouterModule.forRoot(routes)],\n exports: [RouterModule],\n})\nexport class AppRoutingModule {}\nMore detailed templates and worked examples live in references/details.md. Read that file for the full pattern library.