Angular 6 → Angular 21 modernization bridge¶
Use this page when the adaptive diagnostic shows that an older Angular model is interfering with current behavior. Do not study it by default if you can already predict the Angular 21 runtime consequences.
The former basics-components app mixed Angular 6 runtime packages with Angular CLI/compiler 8. A clean rebuild is safer for this tiny instructional repository than preserving its obsolete build graph; that is not a default production migration recommendation.
| 2018 sample | Angular 21 course | Why it changed |
|---|---|---|
AppModule + platformBrowserDynamic |
standalone bootstrapApplication |
Less framework ceremony; dependencies are local and explicit. |
declarations arrays |
component imports |
Standalone declarables compose directly. |
*ngIf, *ngFor |
@if, @for, @switch |
Built-in control flow is clearer and needs no directive import. |
| mutable component fields | signal and computed |
Explicit reactive reads and derived state. |
@angular/http |
provideHttpClient |
The old package was removed; interceptors can be functional. |
| broad NgModule providers | route/component/root providers | Scope is an architectural decision, not a default bucket. |
| Karma + Jasmine | Angular CLI Vitest runner | Faster modern default for new Angular 21 projects. |
| Protractor | focused unit/integration tests; modern E2E tool if added | Protractor was discontinued. |
| TSLint | strict TypeScript and optional ESLint | TSLint was deprecated. |
target: es5 and core-js |
modern ES2022 output | Current browsers and CLI handle output transforms. |
| Bootstrap 4 global CSS | purpose-built accessible CSS | Removes an unnecessary dependency and exposes layout practice. |
Concepts that still matter¶
Components, templates, dependency injection, forms, routing, HTTP, RxJS, and testability remain fundamental. Modern syntax changes how they are expressed, not the underlying engineering questions: who owns state, when does work happen, how does data cross a boundary, and how is behavior verified?
Migration decision challenge¶
You own a business-critical Angular 6 application. Would you rebuild it as done here?
A strong answer says not automatically. This repository is tiny and instructional. A production migration needs dependency inventory, supported stepwise Angular updates, test coverage, incremental route/feature migration, telemetry, rollback, and stakeholder risk management. Rebuilds can silently lose business rules and accessibility behavior.