Angular checkup

orientdbstudio

AngularJS and Angular hybrid · Angular 4.4.6 · 141 TypeScript files, 35 JavaScript files · 254 templates · 22 992 lines of code

Generated 2026-10-23

38/100

Overview

PoorAngularJS migrationHybrid AngularJS 1.5.9 and Angular 4: 35% of components on Angular, 115 AngularJS components left. PoorAngular version & toolingAngular 4.4.6, 18 majors behind 22. GoodDeprecated APIsNothing deprecated as of Angular 4 is in use; APIs deprecated in later versions surface at each upgrade step. PoorThird-party compatibility6 packages depend on Angular: 1 blocking the upgrade to 22, 4 not accepting the current version. PoorChange detection & zoneless readinessRuns on zone.js; 0% of 61 components use OnPush. PoorComponents & templates61 components: 0% standalone, 0% signal inputs, 0% built-in control flow. InfoState managementNo state-management library or signal usage found. FairArchitectureNo routes found, 3 files over 500 lines, 66 classes with constructor injection. PoorTestingKarma, 0 spec files, 0% of components and services with a spec. PoorType safetystrictNullChecks off, strictTemplates off, 201 explicit any. PoorSecurityNo sanitizer bypasses, direct DOM HTML writes or eval in 141 files; 3 sanitized [innerHTML] bindings; 62 known vulnerabilities in dependencies. GoodCircular dependenciesNo import cycles between application files. InfoBundle sizeNo build stats found, so the bundle size is not part of this report.

Top priorities

  1. HighAngularJS 1.5.9 is end of life since January 2022 AngularJS migration
  2. HighAngular 4 is 18 majors behind 22 and out of support Angular version & tooling
  3. High@angular/http is end of life Angular version & tooling
  4. Highangular2-tag-input 1.2.3 does not accept Angular 4 Third-party compatibility
  5. Highng2-bs3-modal 0.10.4 does not accept Angular 4 Third-party compatibility

Migration plan: AngularJS 1.5.9 → Angular 22

4 phases, each shipping on its own, in the order of the Angular upgrade guide: prepare on AngularJS, run both frameworks side by side, move the code bottom up, remove AngularJS.

  1. 1Prepare on AngularJS

    The AngularJS code is made of components and services, written the way Angular expects them; it still ships on AngularJS alone.

    • Upgrade AngularJS to 1.8.3npm install angular@1.8.3 angular-animate@1.8.3 angular-resource@1.8.3 angular-route@1.8.3 angular-sanitize@1.8.3

      The last release; read the migration notes of each minor on the way.

    • Bring TypeScript into the AngularJS code 35

      Rename the files to .ts, add @types/angular, and tighten types file by file. Services written in TypeScript move to Angular almost unchanged.

    • Turn controllers into components 88

      Explicit bindings instead of an inherited scope, and no more ng-controller in templates (83). Only components cross the border between the two frameworks.

    • Reshape directives that use compile, replace or terminal 5

      UpgradeComponent cannot wrap them.

    • Move state off $scope 20

      controllerAs and bindToController, so the controller is the component class it will become.

    • Replace scope events with services 64

      A service with an RxJS Subject instead of $broadcast/$emit; it later carries the messages across the border.

    • Turn ng-include templates into components 27
  2. 2Hybrid setup

    Both frameworks run on one page, and new features are written in Angular.

    • Bring the Angular side up to 22 18

      New code should be written on a current Angular. The upgrade plan below lists each ng update step; @angular/upgrade moves with @angular/core.

    • Let the two routers share the URL 25

      ngRoute keeps the AngularJS routes, the Angular Router takes over route by route; setUpLocationSync from @angular/router/upgrade keeps both in step.

  3. 3Move piece by piece, bottom up

    Every service, component and template is Angular code; each step ships on its own.

    • Move services to Angular, oldest dependencies first 33

      Each becomes an @Injectable and stays available to AngularJS through downgradeInjectable until its last AngularJS user is gone.

    • Turn filters into pipes 16
    • Move components and directives, leaves first 115

      A rewritten component is used from AngularJS through downgradeComponent; an AngularJS component still needed inside Angular is wrapped with UpgradeComponent for the time being.

    • Rewrite the templates in Angular syntax 178

      ng-repeat becomes @for, ng-if becomes @if, ng-model becomes a form control or a model input, ng-click an event binding.

    • Replace runtime $compile with dynamic components 4
    • Replace $watch with signals 85

      computed for derived values, effect or an input for reactions.

    • Replace angular-route

      With the Angular Router.

    • Replace angular-resource

      With HttpClient.

    • Replace angular-animate

      With CSS transitions, or @angular/animations.

    • Replace angular-sanitize

      With Angular's built-in sanitization.

    • Replace angular-translate

      With @ngx-translate/core, or @angular/localize.

    • Replace angular-strap

      With @ng-bootstrap/ng-bootstrap or ngx-bootstrap.

  4. 4Remove AngularJS

    One framework, one build, one change detection.

    • Move the last routes to the Angular router 25
    • Remove the downgrade and upgrade wrappers 30

      Nothing on the AngularJS side uses them any more.

    • Bootstrap Angular alone and uninstall AngularJSnpm uninstall angular @angular/upgrade angular-animate angular-resource angular-route angular-sanitize angular-translate angular-strap

      Drop UpgradeModule and the AngularJS bootstrap; the bundle loses AngularJS and the second change detection.

Upgrade plan: Angular 4 → 22

18 steps, one major at a time, as ng update requires. Requirements come from each version's published package metadata.

FirstBefore you start
  • Fix angular2-tag-input: version 1.2.3 does not accept Angular 4

    It declares @angular/core 2.2.4.

  • Fix ng2-bs3-modal: version 0.10.4 does not accept Angular 4npm install ng2-bs3-modal@0.11.5

    Version 0.11.5 does.

  • Fix ng2-select2: version 1.0.0-beta.10 does not accept Angular 4

    It declares @angular/core ^2.2.0.

  • Fix ng2-tag-input: version 0.8.8 does not accept Angular 4npm install ng2-tag-input@1.0.2

    Version 1.0.2 does.

  1. → 5Angular 5.2.11
    ng update @angular/core@5 @angular/cli@5

    TypeScript >=2.4.2 <2.7RxJS ^5.5.0zone.js ^0.8.4 (now 0.7.8)

    • ng2-codemirror has no release for Angular 5

      Replace it before this step, or stop the upgrade at the last major it supports.

  2. → 6Angular 6.1.10
    ng update @angular/core@6 @angular/cli@6

    TypeScript >=2.7.2 <2.10 (now 2.5.3)RxJS ^6.0.0 (now 5.5.2)zone.js ~0.8.26

  3. → 7Angular 7.2.15
    ng update @angular/core@7 @angular/cli@7

    TypeScript >=3.1.1 <3.3RxJS ^6.0.0zone.js ~0.8.26

  4. → 8Angular 8.2.14
    ng update @angular/core@8 @angular/cli@8

    TypeScript >=3.4 <3.6RxJS ^6.4.0zone.js ~0.9.1

  5. → 9Angular 9.1.13
    ng update @angular/core@9 @angular/cli@9

    TypeScript >=3.6 <3.9RxJS ^6.5.3zone.js ~0.10.3

  6. → 10Angular 10.2.5
    ng update @angular/core@10 @angular/cli@10

    TypeScript >=3.9 <4.1RxJS ^6.5.3zone.js ~0.10.3

  7. → 11Angular 11.2.14
    ng update @angular/core@11 @angular/cli@11

    TypeScript >=4.0 <4.2RxJS ^6.5.3zone.js ^0.10.2 || ^0.11.3

  8. → 12Angular 12.2.17
    ng update @angular/core@12 @angular/cli@12

    Node.js ^12.14.1 || >=14.0.0TypeScript >=4.2.3 <4.4RxJS ^6.5.3 || ^7.0.0zone.js ~0.11.4

  9. → 13Angular 13.4.0
    ng update @angular/core@13 @angular/cli@13

    Node.js ^12.20.0 || ^14.15.0 || >=16.10.0TypeScript >=4.4.2 <4.7RxJS ^6.5.3 || ^7.4.0zone.js ~0.11.4

  10. → 14Angular 14.3.0
    ng update @angular/core@14 @angular/cli@14

    Node.js ^14.15.0 || >=16.10.0TypeScript >=4.6.2 <4.9RxJS ^6.5.3 || ^7.4.0zone.js ~0.11.4 || ~0.12.0

  11. → 15Angular 15.2.10
    ng update @angular/core@15 @angular/cli@15

    Node.js ^14.20.0 || ^16.13.0 || >=18.10.0TypeScript >=4.8.2 <5.0RxJS ^6.5.3 || ^7.4.0zone.js ~0.11.4 || ~0.12.0 || ~0.13.0

  12. → 16Angular 16.2.12
    ng update @angular/core@16 @angular/cli@16

    Node.js ^16.14.0 || >=18.10.0TypeScript >=4.9.3 <5.2RxJS ^6.5.3 || ^7.4.0zone.js ~0.13.0

    • Convert NgModule components to standalone 61ng generate @angular/core:standalone

      Three passes: convert declarations, remove unneeded NgModules, switch to standalone bootstrap.

  13. → 17Angular 17.3.12
    ng update @angular/core@17 @angular/cli@17

    Node.js ^18.13.0 || >=20.9.0TypeScript >=5.2 <5.5RxJS ^6.5.3 || ^7.4.0zone.js ~0.14.0

    • Move templates to built-in control flow 249ng generate @angular/core:control-flow
  14. → 18Angular 18.2.14
    ng update @angular/core@18 @angular/cli@18

    Node.js ^18.19.1 || ^20.11.1 || >=22.0.0TypeScript >=5.4 <5.6RxJS ^6.5.3 || ^7.4.0zone.js ~0.14.10

  15. → 19Angular 19.2.25
    ng update @angular/core@19 @angular/cli@19

    Node.js ^18.19.1 || ^20.11.1 || >=22.0.0TypeScript >=5.5 <5.9RxJS ^6.5.3 || ^7.4.0zone.js ~0.15.0

    • Convert @Input() and @Output() to signal inputs and outputs 103ng generate @angular/core:signal-input-migration && ng generate @angular/core:output-migration
  16. → 20Angular 20.3.34
    ng update @angular/core@20 @angular/cli@20

    Node.js ^20.19.0 || ^22.12.0 || >=24.0.0TypeScript >=5.8 <6.0RxJS ^6.5.3 || ^7.4.0zone.js ~0.15.0

  17. → 21Angular 21.2.25
    ng update @angular/core@21 @angular/cli@21

    Node.js ^20.19.0 || ^22.12.0 || >=24.0.0TypeScript >=5.9 <6.1RxJS ^6.5.3 || ^7.4.0zone.js ~0.15.0 || ~0.16.0

    • Move unit tests from Karma to Vitest

      Vitest is the Angular CLI default from 21 (@angular/build:unit-test). Jasmine-specific calls (spyOn, jasmine.*) need rewriting.

    • Prepare for zoneless: move components to OnPush, then drop zone.js 61

      Upgraded apps keep zone.js through provideZoneChangeDetection() until it is removed.

  18. → 22Angular 22.2.3
    ng update @angular/core@22 @angular/cli@22

    Node.js ^22.22.3 || ^24.15.0 || >=26.0.0TypeScript >=6.0 <6.1RxJS ^6.5.3 || ^7.4.0zone.js ~0.15.0 || ~0.16.0

AngularJS migration

Poor

Hybrid AngularJS 1.5.9 and Angular 4: 35% of components on Angular, 115 AngularJS components left.

AngularJS
1.5.9
node_modules or lockfile
Mode
Hybrid (UpgradeModule)
Components left
115
4 components, 23 directives, 88 controllers
Services left
33
and 16 filters
Templates
178
with AngularJS syntax
Migrated
35%
61 of 176 components on Angular

Angular version & tooling

Poor

Angular 4.4.6, 18 majors behind 22.

Installed
4.4.6
package-lock.json
Latest
22
npm registry
Majors behind
18
Build system
unknown

Deprecated APIs

Good

Nothing deprecated as of Angular 4 is in use; APIs deprecated in later versions surface at each upgrade step.

Deprecated symbols
0
Files affected
0
Legacy template directives
249
not deprecated in this version

Third-party compatibility

Poor

6 packages depend on Angular: 1 blocking the upgrade to 22, 4 not accepting the current version.

Depend on Angular
6
third-party packages
Block the upgrade
1
to Angular 22
Peer mismatches
4
with Angular 4
Deprecated on npm
2

Change detection & zoneless readiness

Poor

Runs on zone.js; 0% of 61 components use OnPush.

Mode
zone.js
OnPush
0%
0 of 61 components
Files injecting NgZone
28
Zone test helpers
0

Components & templates

Poor

61 components: 0% standalone, 0% signal inputs, 0% built-in control flow.

Components
61
Standalone
0%
1 NgModules
Signal inputs
0%
0 of 90
Signal outputs
0%
0 of 13
Built-in control flow
0%
0 of 249 blocks
@defer blocks
0

State management

Info

No state-management library or signal usage found.

Classic NgRx files
0
Signal store files
0
signal() / computed()
0
0 toSignal()
BehaviorSubject services
0

Architecture

Fair

No routes found, 3 files over 500 lines, 66 classes with constructor injection.

Lazy routes
0%
0 of 0
Large files
3
over 500 lines
Constructor injection
66
classes; 0 inject() calls
Class guards
0
and interceptors
Hotspots
-
shallow clone: no history (fetch-depth: 0)

Testing

Poor

Karma, 0 spec files, 0% of components and services with a spec.

Unit-test runner
Karma
Spec files
0
With a spec
0%
0 of 80 component/service files
End-to-end
none

Type safety

Poor

strictNullChecks off, strictTemplates off, 201 explicit any.

strictNullChecks
off
strictTemplates
off
default in Angular 4
noImplicitAny
off
default in TypeScript 2
Explicit any
201
20.1 per 1 000 lines
Non-null assertions
0

Security

Poor

No sanitizer bypasses, direct DOM HTML writes or eval in 141 files; 3 sanitized [innerHTML] bindings; 62 known vulnerabilities in dependencies.

Direct DOM HTML writes
0
innerHTML =, insertAdjacentHTML
Sanitizer bypasses
0
bypassSecurityTrust*
eval / new Function
0
[innerHTML] bindings
3
sanitized by Angular
Known vulnerabilities
62
in 92 direct dependencies checked

Circular dependencies

Good

No import cycles between application files.

Tangles
0
groups of files in a loop
Files involved
0
Largest tangle
0
files

Bundle size

Info

No build stats found, so the bundle size is not part of this report.