Migration von ANGULARJS zu Angular: Vollständiger leitfaden, strategie und Best practices

AngularJS hat längst das Ende seiner Lebensdauer erreicht: keine Sicherheitspatches, keine Abhängigkeitsaktualisierungen und ein stetig kleiner werdender Pool an Entwicklern, die es kennen. Wenn Sie eine AngularJS-Anwendung weiterhin in Produktion halten, häufen sich Sicherheitsrisiken, technische Schulden und Einstellungskosten. Dieser Leitfaden deckt den gesamten Weg zum modernen Angular ab: Legacy-Code-Audit, Wahl zwischen Big Bang und inkrementeller Strangler-Pattern-Migration, Hybrid-Bootstrap mit ngUpgrade, direkte Konzeptzuordnung (Controller, Direktive, $http, Routing, Authentifizierung), Tests, Leistung und ein 30/60/90-Tage-Betriebsplan mit messbaren KPIs.

Warum von AngularJS zu Angular migrieren

Der Sprung von AngularJS zu Angular ist kein einfaches Versions-Upgrade: Es ist ein Paradigmenwechsel, von einem Framework, das auf durchdringender bidirektionaler Datenbindung und $scope basiert, zu einem Komponenten-Modell mit typisierter Abhängigkeitsinjektion, Änderung Optimierte Erkennung und AOT-Zusammenstellung. Die Vorteile sind messbar – kleinere Bundles dank Tree-Shaking, End-to-End-TypeScript, ein aktiv gepflegtes Ökosystem –, müssen aber gegen das tatsächliche Risiko einer schlecht geplanten Migration abgewogen werden: funktionale Rückschritte, monatelanges Stillstand des Teams, eingefrorene Feature-Releases.

Vorteile und Risiken auf einen Blick

Erste Bewertung: AngularJS-Code-Audit

Bevor Sie eine Angular-Zeile schreiben, müssen Sie genau planen, was Sie migrieren. Eine oberflächliche Prüfung ist die häufigste Ursache für schlechte Schätzungen und Migrationen, die auf halbem Weg stecken bleiben. Das Audit muss drei Fragen beantworten: Wie groß ist der Code, wie intern gekoppelt ist er und welche externen Abhängigkeiten sind beteiligt.

Checkliste für Betriebsprüfungen

• Modulinventar: Listet jedes AngularJS-Modul (angular.module(...)) und seine deklarierten Abhängigkeiten auf.
• Controller-/Anweisungs-/Dienstanzahl: Verwenden Sie grep -rn "\.controller(\|\.directive(\|\.factory(\|\.service(" src/) für eine schnelle und objektive Zählung.
• Karte gemeinsam genutzter $scopes – Identifizieren Sie die Verwendung von $rootScope nach globalem Status – fast immer der optimale Zeitpunkt für die Migration zu Angular-Diensten.
• AngularJS-spezifische Abhängigkeiten: angular-ui-router, angular-translate, restangular haben kein direktes Äquivalent und müssen es sein ersetzt, nicht zeilenweise übersetzt.
• Bestehende Testabdeckung: Ohne Tests ist jeder Refactor ein Sprung ins Ungewisse; Messen Sie vor dem Start die aktuelle Abdeckung.
• Klassifizierung nach Kritikalität: Unterteilen Sie die Funktionen in „Kerngeschäft“ (hohes Risiko, Migration zuletzt, mit mehr Tests) und „Peripherie“ (guter Ausgangspunkt).

Migrationsstrategie: Urknall vs. inkrementell (Würgermuster)

Es gibt zwei Hauptansätze. Der Urknall schreibt die gesamte Anwendung in Angular neu, bevor etwas veröffentlicht wird: riskant bei großen Anwendungen, aber leichter zu überdenken bei kleinen Projekten. Das strangler-Muster (inkrementell) ermöglicht die Koexistenz von AngularJS und Angular in derselben Anwendung über ngUpgrade, wobei jeweils eine Funktion migriert und kontinuierlich veröffentlicht wird: Kurzfristig langsamer, aber das Risiko drastisch reduziert und ermöglicht, dass das Unternehmen während der Migration weiterhin Mehrwert erhält.

So wählen Sie den richtigen Ansatz

Für die meisten realen Unternehmensanwendungen ist das Würgermuster die richtige Wahl: Es ermöglicht Ihnen, jedes in die Produktion migrierte Modul zu validieren, bevor Sie mit dem nächsten fortfahren.

Einrichtung der Entwicklungsumgebung

Bevor Sie mit dem Refactor beginnen, müssen die richtigen Tools installiert und korrekt konfiguriert werden, einschließlich des Pakets @angular/upgrade, das die Interoperabilität zwischen den beiden Frameworks ermöglicht.

Checkliste für notwendige Werkzeuge

# Verifica versioni installate
node -v      # Node 20.x LTS o superiore
npm -v

# Installa Angular CLI globalmente
npm install -g @angular/cli

# Crea il progetto Angular che ospiterà il bootstrap ibrido
ng new my-app --routing --style=scss

cd my-app

# Installa il modulo di interoperabilità con AngularJS
npm install @angular/upgrade

# Installa AngularJS stesso come dipendenza (per il periodo ibrido)
npm install angular@1.8.3

Refaktor- und Konzeptzuordnung: von AngularJS zu Angular

Der heikelste Teil der Migration ist die korrekte Übersetzung der Architekturkonzepte. Jedes AngularJS-Konstrukt hat ein konzeptionell ähnliches Angular-Äquivalent, jedoch mit unterschiedlicher Semantik und unterschiedlichem Lebenszyklus.

Konzeptzuordnungstabelle

Snippet 1–2: Controller → Komponente

// AngularJS — controller
angular.module('app').controller('UserListController', function($scope, UserService) {
  $scope.users = [];
  $scope.loading = false;

  $scope.loadUsers = function() {
    $scope.loading = true;
    UserService.getAll().then(function(res) {
      $scope.users = res.data;
      $scope.loading = false;
    });
  };

  $scope.loadUsers();
});

// Angular — component equivalente
@Component({
  selector: 'app-user-list',
  standalone: true,
  templateUrl: './user-list.component.html',
})
export class UserListComponent implements OnInit {
  users: User[] = [];
  loading = false;

  constructor(private userService: UserService) {}

  ngOnInit(): void {
    this.loadUsers();
  }

  loadUsers(): void {
    this.loading = true;
    this.userService.getAll().subscribe((users) => {
      this.users = users;
      this.loading = false;
    });
  }
}

Snippet 3–4: Komplexe Direktive → Komponente

// AngularJS — directive con isolate scope
angular.module('app').directive('userCard', function() {
  return {
    restrict: 'E',
    scope: { user: '=', onSelect: '&' },
    template: '<div class="card" ng-click="onSelect({user: user})">{{user.name}}</div>',
  };
});

// Angular — component con Input/Output
@Component({
  selector: 'app-user-card',
  standalone: true,
  template: `<div class="card" (click)="select.emit(user)">{{ user.name }}</div>`,
})
export class UserCardComponent {
  @Input({ required: true }) user!: User;
  @Output() select = new EventEmitter<User>();
}

Snippet 5–6: Service AngularJS → Service Angular mit DI

// AngularJS — factory
angular.module('app').factory('UserService', function($http) {
  return {
    getAll: function() {
      return $http.get('/api/users');
    },
  };
});

// Angular — servizio con HttpClient e DI
@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}

  getAll(): Observable<User[]> {
    return this.http.get<User[]>('/api/users');
  }
}

Snippet 7–8: Routing und HTTP-Aufrufe

// AngularJS — ui-router
$stateProvider.state('users.detail', {
  url: '/users/:id',
  template: '<user-detail user-id="$resolve.userId"></user-detail>',
  resolve: {
    userId: ['$stateParams', function($stateParams) { return $stateParams.id; }],
  },
});

// Angular — Router standalone con lazy loading
export const routes: Routes = [
  {
    path: 'users/:id',
    loadComponent: () =>
      import('./user-detail/user-detail.component').then((m) => m.UserDetailComponent),
  },
];

// Nel component: lettura del parametro via ActivatedRoute
export class UserDetailComponent implements OnInit {
  userId = signal<string | null>(null);

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.userId.set(this.route.snapshot.paramMap.get('id'));
  }
}

Authentifizierung und Statusverwaltung

Der Authentifizierungsablauf muss neu überdacht und nicht nur übersetzt werden. In AngularJS ist es üblich, das Token bei $rootScope mit einem Interceptor bei $http zu verarbeiten; In Angular ist das richtige Muster ein zentralisierter AuthService mit reaktivem Zustand (BehaviorSubject oder Signal) und einem funktionalen HttpInterceptorFn.

Migration des Authentifizierungsflusses

// auth.service.ts
@Injectable({ providedIn: 'root' })
export class AuthService {
  private tokenSignal = signal<string | null>(localStorage.getItem('access_token'));
  readonly isAuthenticated = computed(() => !!this.tokenSignal());

  constructor(private http: HttpClient) {}

  login(credentials: LoginPayload): Observable<AuthTokens> {
    return this.http.post<AuthTokens>('/api/auth/login', credentials).pipe(
      tap((tokens) => this.setTokens(tokens)),
    );
  }

  refresh(): Observable<AuthTokens> {
    return this.http.post<AuthTokens>('/api/auth/refresh', {}).pipe(
      tap((tokens) => this.setTokens(tokens)),
    );
  }

  private setTokens(tokens: AuthTokens): void {
    localStorage.setItem('access_token', tokens.accessToken);
    this.tokenSignal.set(tokens.accessToken);
  }
}

// auth.interceptor.ts — funzione, non più basata su $http config
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('access_token');
  const cloned = token ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }) : req;
  return next(cloned);
};

Für eine umfassendere Statusverwaltung (nicht nur Authentifizierung) ist es bei komplexen Unternehmensanwendungen besser, NgRx zu evaluieren, das einen vorhersehbaren zentralen Speicher bietet; In den meisten Fällen sind jedoch Dienste mit BehaviorSubject oder Signal ausreichend und viel einfacher zu warten als die Einführung eines gesamten Redux-ähnlichen Musters.

Progressive Integration mit ngUpgrade

ngUpgrade ist das offizielle Paket, das es einer AngularJS- und einer Angular-Anwendung ermöglicht, auf derselben Seite und zur gleichen Zeit auszuführen, Dienste gemeinsam zu nutzen und zwischen Komponenten zu kommunizieren. Es ist das technische Herzstück des Strangler-Musters.

Hybrid-Bootstrap: Praxisbeispiel

// main.ts — bootstrap ibrido con downgradeModule
import { setUpLocationSync } from '@angular/upgrade/static';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
  imports: [BrowserModule, UpgradeModule, AppRoutingModule],
  declarations: [UserCardComponent],
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}

  ngDoBootstrap(): void {
    this.upgrade.bootstrap(document.body, ['legacyApp']);
    setUpLocationSync(this.upgrade);
  }
}

// Espone il component Angular come directive AngularJS,
// utilizzabile nei template AngularJS esistenti senza riscriverli
angular
  .module('legacyApp')
  .directive('appUserCard', downgradeComponent({ component: UserCardComponent }));

// Espone un servizio AngularJS ad Angular, per riuso durante la transizione
angular.module('legacyApp').factory('legacyUserService', downgradeInjectable(UserService));

Mit diesem Setup kann eine vorhandene AngularJS-Vorlage ohne Änderung verwenden, während neue Angular-Komponenten über upgradeInjectable ältere AngularJS-Dienste injizieren können, bis diese ebenfalls migriert werden.

Testen während der Migration

Hybridcode ist von Natur aus anfälliger für Tests: zwei Frameworks, zwei Digest-/Änderungserkennungszyklen, zwei verschiedene Testläufer koexistieren über Monate hinweg. Die richtige Strategie besteht darin, Karma/Jasmine im noch nicht migrierten AngularJS-Code beizubehalten, Jest für jede neue Angular-Komponente einzuführen (schneller, besserer Überwachungsmodus) und Protractor schrittweise durch (veraltet) zu ersetzen. Cypress für E2E, das nicht vom zugrunde liegenden Framework abhängt und die Anwendung so testet, wie der Benutzer sie sieht.

Checklistentests

• Entfernen Sie vorhandene AngularJS-Tests erst, wenn das entsprechende Modul vollständig migriert ist.
• Jede neue Angular-Komponente erfordert Komponententests bevor sie über ngUpgrade verknüpft wird, nicht danach.
• Cypress E2Es müssen kritische Abläufe durchgängig abdecken und während der Hybridphase sowohl AngularJS- als auch Angular-Seiten durchlaufen.
• Überwachen Sie die Gesamtabdeckung bei jedem Sprint: Sie sollte niemals unter das Niveau vor der Migration fallen.

Leistungs- und Bundle-Optimierung

Während der Hybridphase wächst das Bundle zwangsläufig, da es sowohl AngularJS als auch Angular enthält. Es ist wichtig, dieses Wachstum zu überwachen und die Entfernung von AngularJS zu planen, sobald das letzte Modul migriert ist.

Leistungscheckliste

• Lazy Loading aggressiv auf jeder Angular-Route mit loadComponent/loadChildren, um nicht den gesamten neuen Code vorzeitig zu laden.
• AOT-Kompilierung immer in der Produktion aktiv (ng build verwendet es standardmäßig von der modernen CLI).
• Bundle-Analysator wird bei jedem Migrationsmeilenstein ausgeführt, um zu überprüfen, ob AngularJS am Ende der Reise tatsächlich entfernt wird und nicht „tot“ im Bundle bleibt.
• Differenzielles Laden: Angular CLI generiert bei Bedarf automatisch differenzierte Bundles für moderne/ältere Browser.
• Entfernen Sie angular (1.x) aus package.json und aus jedem Import, sobald das letzte AngularJS-Modul migriert wurde – das ist der Schritt, der am häufigsten vergessen wird.

Bereitstellungs-, CI/CD- und Rollback-Strategie

Jedes migrierte Modul muss hinter einem Feature-Flag freigegeben werden, um im Falle einer kritischen Regression sofort zur AngularJS-Version zurückkehren zu können, ohne dass es zu einem vollständigen Rollback der Bereitstellung kommt.

Feature-Flags und Rollback: Beispiel

// Semplice feature flag basato su configurazione remota
if (this.featureFlags.isEnabled('new-user-list-angular')) {
  this.router.navigate(['/users']); // route Angular
} else {
  window.location.href = '/legacy/users'; // route AngularJS esistente
}

Die CI/CD-Pipeline muss für jede Pull-Anfrage funktionieren: Produktions-Build, Jest/Karma-Suite, Cypress-Suite bei kritischen Flows und eine automatische Bundle-Größenprüfung mit maximalem Schwellenwert – eine abnormale Bundle-Zunahme ist oft das erste Anzeichen einer vergessenen AngularJS-Abhängigkeit.

5 praktische Mini-Guides, bereit zur Veröffentlichung

Kurzanleitung 1 – Konvertieren eines AngularJS-Controllers in eine Angular-Komponente

H1: Vom AngularJS-Controller zur Angular-Komponente: Schritt-für-Schritt-Anleitung

Einführung: Der Controller ist der erste Baustein, der in jedem Modul migriert: Die Umwandlung in eine Komponente folgt immer dem gleichen wiederholbaren Muster.

Snippet (40-60 Wörter): Ein AngularJS-Controller mit $scope wird zu einer Angular-Komponentenklasse: Die Eigenschaften auf $scope werden zu Eigenschaften der Klasse, die Methoden bleiben Methoden und die Initialisierung erfolgt am Ende Controller bewegt sich zu ngOnInit(). Über Funktionsparameter eingefügte Abhängigkeiten werden zu typisierten Konstruktorparametern.

Struktur: H2 „Den Umfang des Controllers identifizieren“ → H3 „Eigenschaften und Methoden auflisten“; H2 „Komponentenklasse erstellen“ → H3 „Initialisierungslogik verschieben“; H2 „Vorlage aktualisieren“.

Kurze FAQ: „Müssen Sie die Vorlage zusammen mit dem Controller migrieren?“ → „Ja, immer zusammen: verbindliche Syntaxänderungen (ng-click → (click)).“ · „Kann ich $scope vorübergehend verlassen?“ → „Nein, es existiert nicht in Angular: Es muss kontextbezogen entfernt werden.“

Kurzanleitung 2 – Eine komplexe Direktive in eine Angular-Komponente migrieren

H1: Migrieren Sie eine AngularJS-Direktive mit isoliertem Geltungsbereich zur Angular-Komponente

Intro: Die Direktiven mit isoliertem Geltungsbereich und Bindung =/@/& sind der häufigste Fall und bilden nahezu 1:1 ab Eingabe/Ausgabe.

Snippet (40-60 Wörter): Eine Bindung = (bidirektional) wird zu einem @Input(), ggf. kombiniert mit @Output() um den Elternteil zu benachrichtigen; Eine &-Bindung (Funktion) wird direkt zu einem @Output() mit EventEmitter. Das Inline-template der Direktive wird zum template/templateUrl der neuen Angular-Komponente.

Struktur: H2 „Direktivenbindungen analysieren“ → H3 „Map =, @, & to Input/Output“; H2 „Komponente erstellen“ → H3 „Handle-Einschränkung: ‚E‘ vs ‚A‘“; H2 „Verwendungen in Vorlagen aktualisieren“.

Kurze FAQ: „Was passiert mit der Einschränkung: ‚A‘ (Attributanweisung)?“ → „Werden Sie ein @Directive() Angular ohne Vorlage.“ · „Werden bidirektionale Bindungen weiterhin unterstützt?“ → „Ja, über Konvention [(Wert)] mit gekoppeltem Input+Output.“

Kurzanleitung 3 – Integration von ngUpgrade für einen Hybrid-Bootstrap

H1: AngularJS + Angular Hybrid Bootstrap mit ngUpgrade

Intro: Der Hybrid-Bootstrap ist der entscheidende Schritt für die gesamte inkrementelle Strategie: Ohne ihn ist jede Migration zwangsweise ein Urknall.

Snippet (40-60 Wörter): UpgradeModule.bootstrap() startet beide Frameworks auf derselben Seite; downgradeComponent macht eine Angular-Komponente in AngularJS-Vorlagen nutzbar, upgradeComponent bewirkt das Gegenteil. downgradeInjectable/upgradeInjectable Teilen Sie Dienste zwischen den beiden Welten und ermöglichen Sie so eine sofortige Wiederverwendung ohne Duplizierung der Logik.

Struktur: H2 „Install @angular/upgrade“ → H3 „Configure ngDoBootstrap“; H2 „Angular-Komponenten für AngularJS verfügbar machen“ → H3 „DowngradeComponent in der Praxis“; H2 „Dienste zwischen den beiden Frameworks teilen“.

Kurze FAQ: „Verlangsamt ngUpgrade die Anwendung?“ → „Ein wenig, zur Erkennung doppelter Änderungen: Es handelt sich um vorübergehende Kosten, nicht um dauerhafte.“ · „Wie lange kann die Hybridphase dauern?“ → „Einige Wochen bis viele Monate, abhängig von der Größe der App.“

Kurzanleitung 4 – Routing vom UI-Router zum Angular Router migrieren

H1: Vom UI-Router zum Angular Router: Routing-Migrationsleitfaden

Einführung: Routing ist oft der letzte Teil, der migriert wird, da es sich auf die gesamte Navigationsstruktur der Anwendung auswirkt.

Snippet (40-60 Wörter): Jeder Zustand des UI-Routers wird zu einer Route Angular: URL wird path, template/controller werden zu component (oder loadComponent für verzögertes Laden) und die resolve wird zu resolve Angular Service-basiert mit Resolve oder einfach über ActivatedRoute.

Struktur: H2 „Vorhandene Zustände zuordnen“ → H3 „URL → Pfad, auflösen → auflösen“; H2 „Routen mit Lazy Loading konfigurieren“ → H3 „loadComponent vs LoadChildren“; H2 „Koexistenz mit setUpLocationSync verwalten“.

Kurze FAQ: „Können die beiden Router koexistieren?“ → „Ja, vorübergehend, mit setUpLocationSync zum Synchronisieren der URL.“ · „Was verwende ich anstelle der verschachtelten UI-Router-Zustände?“ → „Winkelrouten verschachtelt mit untergeordneten Routen und .“

Kurzanleitung 5 – JWT-Authentifizierung und Aktualisierungstoken während der Migration implementieren

H1: JWT-Authentifizierung mit Aktualisierungstoken während der AngularJS-Migration → Angular

Intro: Der Authentifizierungsablauf muss sowohl auf noch AngularJS-Seiten als auch auf bereits vorhandenen Angular-Seiten identisch funktionieren und dasselbe Token verwenden.

Snippet (40-60 Wörter): Zentralisiert das Token in localStorage (oder httpOnly-Cookie, aus Sicherheitsgründen vorzuziehen), gelesen sowohl vom $http AngularJS-Interceptor als auch von HttpInterceptorFn Angular. Ein AuthService Angular, das AngularJS über downgradeInjectable zugänglich gemacht wird, vermeidet die Duplizierung der Anmelde-/Aktualisierungslogik in den beiden Frameworks während der Hybridphase.

Struktur: H2 „Token-Verwaltung zentralisieren“ → H3 „localStorage vs. httpOnly Cookies“; H2 „Teilen Sie den AuthService zwischen den beiden Frameworks“ → H3 „downgradeInjectable in der Praxis“; H2 „Automatische Aktualisierung auf 401 verwalten“.

Kurze FAQ: „Muss ich die Anmeldung in beiden Frameworks duplizieren?“ → „Nein, ein einzelner Angular AuthService, der über downgradeInjectable geteilt wird, reicht aus.“ · „Wie gehe ich mit der Abmeldung bei einem abgelaufenen Token um?“ → „401s in beiden Interceptoren abfangen und zur zentralen Anmeldung umleiten.“

Fallstudie: Migration einer Unternehmensanwendung

Ein typischer Fall: AngularJS-Verwaltungsanwendung mit 340 Controllern, 85 benutzerdefinierten Anweisungen und 6 Jahren inkrementeller Entwicklung. Mit einem Strangler-Pattern-Ansatz in Teams von 4 Entwicklern dauerte die Migration 9 Monate, mit kontinuierlichen wöchentlichen Releases während des gesamten Zeitraums. Am Ende des Projekts gemessene Ergebnisse: Reduzierung des ursprünglichen Pakets um 38 % (von 2,4 MB auf 1,5 MB gzip) nach vollständiger Entfernung von AngularJS, Verbesserung der Ladezeit (Time to Interactive) um 44 %, Testabdeckung stieg von 22 % auf 68 % dank der neuen Tests, die gleichzeitig mit jeder migrierten Komponente eingeführt wurden. Geschätzter Aufwand: ca. 1.400 Personen/Stunden insgesamt, davon 60 % auf die Kerngeschäftsmodule konzentriert, die in der zweiten Hälfte des Projekts migriert wurden.

Häufig gestellte Fragen

Wie lange dauert eine Migration von AngularJS zu Angular?

Variiert von einigen Wochen für kleine Anwendungen bis zu über einem Jahr für große Unternehmensanwendungen; Mit dem Strangler-Muster können Sie die Anstrengung auf mehrere Sprints verteilen, ohne Releases zu blockieren.

Muss ich ngUpgrade verwenden?

Nein, nur wenn Sie den inkrementellen Ansatz wählen. Beim Urknall besteht keine Notwendigkeit, da es keine Koexistenzperiode zwischen den beiden Rahmenwerken gibt.

Ist NgRx nach der Migration obligatorisch?

Nein: Für die meisten Anwendungen sind Dienste mit BehaviorSubject oder Signal ausreichend; NgRx eignet sich nur für sehr komplexe Zustände, die von vielen Features gemeinsam genutzt werden.

Kann ich nur einige Seiten migrieren und die anderen langfristig in AngularJS belassen?

Technisch ja mit ngUpgrade, aber es wird nicht als permanenter Zustand empfohlen: Es erhöht die Wartungskomplexität und das Bundle bleibt schwerer als nötig.

Wie gehe ich mit AngularJS-spezifischen Bibliotheken von Drittanbietern um?

Sie müssen durch das Angular-Äquivalent oder eine Framework-unabhängige Bibliothek ersetzt werden; Es gibt keine maschinelle Übersetzung für Bibliotheken wie restangular oder angular-translate.

Ist Protractor noch für E2E-Tests verwendbar?

Es ist vom Angular-Team veraltet: Für neue Projekte oder Migrationen empfehlen wir Cypress, das nicht vom Framework abhängig ist und die App so testet, wie es ein echter Benutzer tun würde.

Was ist der Unterschied zwischen downgradeComponent und upgradeComponent?

downgradeComponent macht eine Angular-Komponente in einer AngularJS-Vorlage verwendbar; upgradeComponent führt den umgekehrten Vorgang aus, um AngularJS-Komponenten vorübergehend in Angular wiederzuverwenden.

Wann ist es besser, den Urknall anstelle des Strangler-Musters zu wählen?

Bei kleinen bis mittleren Anwendungen, mit einem dedizierten Vollzeitteam und geschäftlicher Risikotoleranz, bei denen eine vorübergehende Blockierung von Releases akzeptabel ist.

Wie verhindere ich, dass das Bündel während der Hybridphase zu stark wächst?

Überwachen Sie die Bundle-Größe bei jedem Meilenstein mit einem Bundle-Analysator und planen Sie explizit die Entfernung von AngularJS, sobald das letzte Modul migriert ist.

Müssen Sie während der Migration alle Tests neu schreiben?

Nein: Vorhandene AngularJS-Tests bleiben gültig, bis das entsprechende Modul migriert wird; Neue Jest/Cypress-Tests werden nach und nach für Angular-Code hinzugefügt.

6 schnelle Antworten für vorgestellte Snippets und KI-Assistenten

Was ist ngUpgrade?
ngUpgrade ist das offizielle Angular-Paket (@angular/upgrade), das es einer AngularJS-Anwendung und einer Angular-Anwendung ermöglicht, gleichzeitig auf derselben Seite ausgeführt zu werden und Komponenten und Dienste gemeinsam zu nutzen. Es ist das wichtigste Tool für die schrittweise Migration ohne Blockierung von Releases über downgradeComponent und upgradeComponent.

Was ist das Strangler-Muster, das auf das Frontend angewendet wird?
Das Strangler-Muster ist eine inkrementelle Migrationsstrategie, bei der die neue Anwendung (Angular) die alte Anwendung (AngularJS) nach und nach „umhüllt“ und jeweils ein Modul ersetzt, bis der alte Code vollständig entfernt ist. Reduziert das Risiko im Vergleich zu einem kompletten Neuschreiben (Big Bang).

Was ist der Hauptunterschied zwischen $scope und Angular-Komponenten?
$scope in AngularJS ist ein gemeinsam genutztes und veränderliches Objekt, das Controller und Vorlagen mit durchdringender bidirektionaler Bindung verbindet. In Angular lebt der Zustand als typisierte Eigenschaften der Komponentenklasse, mit expliziter Bindung ([Wert], (Ereignis)) und isolierter Änderungserkennung pro Komponente, was vorhersehbarer und leistungsfähiger ist.

Wie ersetzt man $http in Angular?
Mit HttpClient, injiziert über Dependency Injection in Dienste. Der Hauptunterschied besteht darin, dass HttpClient RxJSs Observable anstelle von Promise zurückgibt, was Operatoren wie retry, debounceTime und ermöglicht switchMap zur Bearbeitung komplexer Anfragen.

Wie handhaben Sie die Authentifizierung während des Hybridzeitraums?
Zentralisierung von Token und Anmeldelogik in einem einzigen AuthService Angular, das auch AngularJS über downgradeInjectable zugänglich gemacht wird. Auf diese Weise haben sowohl AngularJS- als auch Angular-Seiten denselben Authentifizierungsstatus, ohne dass Code dupliziert wird.

Wie viel kostet eine AngularJS → Angular-Migration vom Aufwand her?
Hängt von der Größe ab: Kleine Anwendungen benötigen ein paar Wochen, Unternehmensanwendungen mit Hunderten von Controllern können mehr als 1.000 Personenstunden erfordern, verteilt auf 6–12 Monate bei einem inkrementellen Ansatz, wobei neue Funktionsversionen unterwegs aktiv bleiben.

Häufige Fehler, die es zu vermeiden gilt

• Migration ohne vorherige Prüfung: Der Beginn des Schreibens von Angular-Komponenten ohne zugeordnete Abhängigkeiten und kritische Probleme führt zu falschen Schätzungen und blockiert auf halbem Weg.
• Den Urknall für eine Anwendung wählen, die zu groß ist: Veröffentlichungen werden monatelang blockiert und das Risiko von Regressionen, die nicht rechtzeitig entdeckt werden, drastisch erhöht.
• Vergessen, AngularJS am Ende der Migration zu entfernen: Das Bundle bleibt monatelang aufgebläht, weil niemand die angular-Abhängigkeit von package.json.
entfernt hat
• Gemeinsam genutzten Status (Authentifizierung, aktueller Benutzer) nicht zentralisieren: Das Duplizieren der Logik zwischen den beiden Frameworks während der Hybridphase führt zu schwer zu diagnostizierenden Synchronisierungsfehlern.
• Vernachlässigung der E2E-Tests während der Hybridphase: Gerade in diesem Stadium ist das Risiko einer Regression am höchsten, nicht danach.
• Übersetzen Sie 1:1-Anweisungen, ohne die Architektur zu überdenken.: Einige AngularJS-Anweisungen verbergen mehr Verantwortlichkeiten, die in Angular in verschiedene Komponenten aufgeteilt werden sollten.
• Unterschätzen Sie die Lernkurve des Teams: Dekorateur, typisierter DI und RxJS erfordern eine spezielle Schulung, nicht nur „Learning by Doing“ unter Termindruck.
• Bundle-Größe während der Migration nicht überwachen: Ohne automatische Überprüfung im CI bleibt ein anomaler Anstieg unbemerkt, bis er für die Produktion freigegeben wird.

Betriebscheckliste und 30/60/90-Tagesplan

Wiederkehrende Aktivitäten: Überwachen Sie täglich alle Fehler in der Produktion bei bereits migrierten Modulen; Führen Sie jede Woche eine Prüfung der Paketgröße und des Abdeckungstests durch. Überprüfen Sie jeden Monat die Migrations-Roadmap mit dem Team und aktualisieren Sie die Kritikalitätsbewertung der verbleibenden Module.

Nützliche Tools und Ressourcen

• Angular CLI
• ngUpgrade (@angular/upgrade)
• TypeScript
• ESLint
• Hübscher
• Zypresse
• Leuchtturm
• Bundle Analyzer (Source-Map-Explorer oder Webpack-Bundle-Analyzer)

Strukturierte Daten und technisches SEO

Bei einem technischen Artikel dieser Art tragen die strukturierten Artikel- und FAQ-Seitendaten sowohl zu Ihrem Ranking bei Google als auch zur Wahrscheinlichkeit bei, von Gesprächsassistenten zitiert zu werden, die die Seite analysieren.

Beispiel für einen JSON-LD-Artikel

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Migrazione da AngularJS a Angular: guida completa, strategia e best practice",
  "description": "Guida pratica alla migrazione da AngularJS ad Angular: strategia, ngUpgrade, routing, auth, testing, checklist 30/60/90 giorni.",
  "author": { "@type": "Organization", "name": "Nome Azienda" },
  "datePublished": "2026-08-07",
  "dateModified": "2026-08-07",
  "mainEntityOfPage": "https://www.esempio.it/blog/migrazione-angularjs-angular"
}

Empfohlene Open Graph-Tags

So überprüfen Sie

• Mobiltest: Überprüfen Sie das Rendering und die Leistung der Hybridanwendung auf einem realen Gerät, nicht nur in der Emulation.
• Schemaprüfung: Validieren Sie den JSON-LD-Artikel/die FAQ-Seite mit dem Testtool für strukturierte Daten von Google.
• Bündelgröße prüfen: Vergleichen Sie die Größe des Bündels vor/nach jedem Meilenstein mit einem Bündelanalysator, um anormales Wachstum abzufangen.
• ngUpgrade-Integrationstest: Überprüfen Sie, ob zwischen AngularJS und Angular gemeinsam genutzte Komponenten und Dienste in beide Richtungen (Downgrade und Upgrade) korrekt funktionieren.
• Testabdeckung überprüfen: Die Gesamtabdeckung darf während der gesamten Reise niemals unter das Niveau vor der Migration fallen.
• Lighthouse-Leistungsaudit: Führen Sie bei jedem Meilenstein ein Lighthouse-Audit durch und vergleichen Sie Time to Interactive und Largest Contentful Paint mit der AngularJS-Basislinie.

Fazit: Wo soll ich anfangen

Die Migration von AngularJS zu Angular ist kein improvisiertes Projekt: Sie erfordert eine ehrliche Prüfung des vorhandenen Codes, eine auf der Grundlage von Größe und Risikotoleranz ausgewählte Strategie sowie Tools wie ngUpgrade, die einen inkrementellen Übergang ermöglichen, ohne das Geschäft zu blockieren. Beginnen Sie mit der Prüfung, wählen Sie das Strangler-Muster, wenn die Anwendung groß ist, und migrieren Sie als ersten konkreten Schritt ein Peripheriemodul mit geringer Kritikalität. Wenn Sie einen direkten Vergleich zu Ihrem spezifischen Fall bevorzugen, fordern Sie ein Migrationsaudit an oder laden Sie die operative Checkliste dieses Leitfadens herunter, um sofort mit der Anwendung auf Ihr Projekt zu beginnen.