DEV Community

Phalgun Vaddepalli
Phalgun Vaddepalli

Posted on

3 Ways to Check the Angular Version in Your Browser (Even in Prod)

#angular #webdev

When debugging an Angular application in the browser, verifying the exact version of the framework running under the hood is often the first step in troubleshooting.

While you could always check your package.json, sometimes you don't have access to the source code, or you need to confirm that the deployed build matches your expectations.

Here are three ways to extract the Angular version directly from the browser, ranging from the absolute fastest methods to digging into optimized Webpack bundles.

1. The Quickest Way: Inspect the DOM

When Angular bootstraps an application, it automatically stamps the root component with the exact framework version. This is the fastest, most reliable method if the application has successfully rendered.

How to do it:

  1. Open your browser's Developer Tools (F12 or right-click -> Inspect).
  2. Go to the Elements tab.
  3. Locate the root application tag (usually <app-root>).
  4. Look for the ng-version attribute.

You’ll see something like this: <app-root ng-version="21.2.14"></app-root>. That's it!

2. The Console Approach: Querying the Version

If you prefer keeping your hands on the keyboard and out of the Elements tree, you can use a quick JavaScript snippet in the console to pull the exact same attribute.

How to do it:

  1. Open the Console tab in your Developer Tools.
  2. Run the following command: 
document.querySelector('[ng-version]').getAttribute('ng-version');
Enter fullscreen mode Exit fullscreen mode

The console will return the version string, such as "21.2.14".

3. The Deep Dive: Searching the Webpack Bundles

Sometimes, you might need to inspect the actual JavaScript bundles—perhaps the app is failing to bootstrap, and the <app-root> tag hasn't been stamped yet.

Older tutorials will tell you to look for a vendor.js file and search for new Version(. However, in modern Angular configurations, this advice is often misleading.

If your angular.json has vendorChunk set to false, or if you are dealing with a build where optimization and output hashing are enabled, Angular doesn't split third-party libraries into a separate vendor file. Instead, everything is bundled into a hashed main file, and the code is minified.

How to find the version in optimized Webpack builds:

  1. Open the Developer Tools and navigate to the Sources tab (or check the Network tab for loaded JS).
  2. Look for your main application bundle. It will typically be named something like main.[hash].js (e.g., main.3b878c28634a75c9.js).
  3. Open this file and press Ctrl + F (or Cmd + F) to open the in-file search.
  4. Because the code is minified, the Version class has likely been aliased to a single letter (like l or e). Instead of searching for the full declaration, search for a partial match:

  5. Type .Version(" or Version(" into the search bar.

  6. You will find a minified snippet that looks something like this:

new l.Version("21.2.14")
Enter fullscreen mode Exit fullscreen mode

The string inside the quotes is your Angular version.

Summary

Whether you are dealing with local development environments or heavily optimized production builds, knowing how to navigate the DOM and your Webpack bundles is a handy debugging skill. For quick checks, rely on the ng-version attribute. For deeper bundle analysis, just remember to adjust your search terms to account for minification!

Top comments (0)