Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Short answer: install Angular DevTools, open your browser’s developer tools, select the Angular panel, and read the version in the information popover. That works when the page is an Angular development build. A production-optimized Angular 2+ site may remove the debugging hooks DevTools needs, so there is no dependable browser-only trick that reveals the exact framework version on every live site. If you control the project, ng version is the authoritative cross-check; if application code exposes Angular’s VERSION API, you can inspect that package value directly.
Which method should you use?
The right check depends on what you can access. A visitor with only a browser can try Angular DevTools, but it is designed for development builds rather than optimized production deployments. A developer with the source tree should use the Angular CLI. Code that imports Angular packages can read the exported VERSION constant, although Angular does not document that constant as a universal global on arbitrary websites.
| Approach | What you need | Production-optimized page | What the result represents |
|---|---|---|---|
| Angular DevTools information popover | Browser access and a compatible development build | Not supported; the extension reports a production configuration when optimization is detected | The Angular version running in that page |
ng version (or ng v) |
Access to the project directory and its CLI environment | Yes, because it checks the project rather than a remote page | CLI details plus installed Angular package versions; distinguish the CLI version from framework packages |
VERSION package API |
Application code that can import @angular/core or @angular/platform-browser |
Only if the application exposes or logs the value; not guaranteed as a browser global | The package’s exported version constant |
If you are trying to identify a stranger’s production website, treat any result as conditional. Angular’s official documentation does not establish a universal browser-console command for extracting an exact Angular 2+ version from every optimized deployment.
Method 1: Read the version with Angular DevTools
Angular DevTools is the quickest supported route when the page was built for development. Its information popover displays the Angular version detected on the page, alongside the extension’s component-inspection and profiling features.
#1 Best Overall
Install and open the extension
- Install Angular DevTools for your browser from the Chrome Web Store or Firefox Add-ons.
- Open the Angular page you want to inspect.
- Open the browser developer tools. In Chromium-based browsers, use
F12,Ctrl+Shift+Ion Windows/Linux, orCmd+Option+Ion macOS. Firefox usesF12orCtrl+Shift+I/Cmd+Option+I. - Select the Angular tab in the developer-tools panel. If the tab is hidden, use the panel’s overflow menu to find it.
- Open the information popover at the top right of the Angular panel. The popover lists the Angular version running on the page.
Record the complete value, including major, minor and patch components. A value such as 17.3.8 is more useful than recording only “Angular 17,” because dependency compatibility and security fixes can differ between patch releases.
What happens on a production build?
Angular DevTools supports development builds only. Production optimization removes the debugging features that let the extension communicate with the application. When the extension detects an optimized application, it reports that it found a production configuration instead of providing the normal inspection experience.
This is not a setting you can fix from the visitor side. Angular’s guidance is to disable optimization when you need DevTools on a deployed build, then rebuild and redeploy the application. That changes the application’s build configuration; opening a different browser tab, clearing cache, or typing a console command cannot restore debug metadata that was removed during compilation.
When the Angular tab is missing
- Confirm that the extension is installed and enabled for the current browser profile.
- Reload the page after opening developer tools. A page loaded before the extension became active may not establish a connection.
- Check whether the page is a development build. A production-configuration message means the limitation is expected, not that the extension is malfunctioning.
- If you own the app, create a development build or disable production optimization for a controlled diagnostic deployment. Do not expose an unoptimized diagnostic build as a public production site.
Method 2: Run ng version in the project directory
When you have the source code, Angular’s documented project-level check is the Angular CLI command ng version. The shorthand ng v produces the same type of report.
Run the command
- Open a terminal.
- Change to the Angular workspace directory, the folder containing the project configuration and package manifest.
- Run
ng version. You can also runng v. - Read the output lines for the Angular CLI and the installed framework packages. Save the output with the project or build record if you need an auditable version check.
The command reports CLI information as well as package data. Do not quote the CLI line as though it were automatically the framework version. In a typical workspace, the framework packages share a version family, while the CLI can be globally installed, locally installed, or otherwise managed at a different version. For an application-version statement, identify the relevant packages, such as @angular/core, rather than relying on the first number printed.
Why this is stronger than inspecting a remote site
ng version reads the environment that builds and runs the project. It does not send a probe to a website and cannot identify an app for which you have no project access. If a public site was built from a different commit, uses a separately deployed bundle, or has several applications, the version in your local checkout may not match what is currently online. For a site you control, compare the CLI output with the deployment artifact and release record.
Method 3: Inspect Angular’s exported VERSION constant
Angular documents a stable VERSION constant in both @angular/core and @angular/platform-browser. This is a package API that application code can import. It is not a promise that every Angular page places a variable named VERSION, angular, or ng on the browser’s global object.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteCheck it in application code
In a TypeScript file that belongs to the project, import the constant and log or display its value:
Rank #3
import { VERSION } from '@angular/core';
console.log('Angular:', VERSION.full);
If your code already depends on the platform-browser package, the documented export can be imported there as well:
import { VERSION } from '@angular/platform-browser';
console.log(VERSION.full);
The exact property used for the complete semantic version is determined by the package’s API shape; verify the value in the version of Angular installed by the project. Keep this diagnostic code out of a public build unless exposing the framework version is an intentional decision.
Why typing VERSION in the console often fails
Bundlers scope imported symbols to the modules that use them. An import in one application file does not automatically create a global console variable. Minification, tree-shaking and production optimization can also change or remove diagnostic code. Therefore, a console error such as “VERSION is not defined” does not prove that Angular is absent; it only proves that the symbol is not exposed in that page’s global scope.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Do not confuse modern Angular with AngularJS
AngularJS and modern Angular are different framework generations. AngularJS refers to the 1.x line, while Angular 2 and later use the modern Angular platform and package-based APIs.
AngularJS officially documents a global angular.version object. Its fields include full, major, minor and dot. On an AngularJS 1.x page, this can be useful:
angular.version.fullDo not use that expression as a general test for Angular 2+. Modern Angular applications do not promise the same global. AngularJS support ended in January 2022, so finding this object usually identifies a legacy application rather than a current Angular release.
How to interpret the version number
Angular uses semantic versioning in major.minor.patch form. The documentation’s example, 7.2.11, contains major version 7, minor version 2 and patch version 11.
- Major: a release line that can require update work and may include breaking changes.
- Minor: a backward-compatible feature release within the major line.
- Patch: a lower-risk bug-fix release.
Use the complete value when comparing an application with its lockfile, support policy or vulnerability advisory. Saying only “Angular 7” omits the minor and patch information that can determine whether a particular fix is present.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Can you find the exact Angular version of any production website?
No reliable universal method is established for every Angular 2+ production page. A production bundle may contain recognizable Angular code, but code fingerprints, chunk names, source maps and DOM attributes are not documented version-reporting interfaces. They can be absent, transformed or shared across versions, so they should not be presented as proof.
The practical decision tree is:
- You control the source: run
ng version, then identify the installed framework package versions. - You control a diagnostic deployment: use a development build with Angular DevTools enabled and read the information popover.
- You can change application code: import the documented
VERSIONconstant and record its value during a controlled diagnostic run. - You only have a public optimized page: try Angular DevTools, but accept that it may report a production configuration and no exact version.
If a security, support or compatibility decision depends on the number, ask the site owner for the build metadata rather than treating an inferred bundle pattern as confirmation.
Troubleshooting common results
DevTools says the page uses a production configuration
The application was optimized for production, so the debug hooks required by Angular DevTools are unavailable. Use the project-level CLI check or request a diagnostic development build. There is no visitor-side switch that reverses this optimization.
ng version says the command is unavailable
You are probably outside an Angular workspace, the CLI is not installed in the active environment, or the terminal is using a different Node project than expected. Change into the project directory and use the project’s package-manager script or local CLI installation according to the project’s setup. The command cannot inspect a remote URL.
The console has no angular or ng variable
That is normal for many modern Angular applications. Imported package symbols are module-scoped, and production builds commonly avoid exposing framework internals globally. Only rely on a global when the application explicitly created one or when you are checking a legacy AngularJS page.
The number differs between tools
First check what each tool measured. Angular DevTools reports the framework version detected in a development page; ng version reports the project’s CLI and package environment; a VERSION import reports the package from which it was imported. A mismatched CLI, framework package or deployed build can produce different numbers without any tool being wrong.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minute
