Angular CLI

Angular CLI Interview with follow-up questions

1. What is Angular CLI and why is it used?

The Angular CLI is the official command-line tool for scaffolding, developing, building, and maintaining Angular apps. It encodes best practices so teams get a consistent, production-ready setup without hand-configuring the build.

What it does for you:

  • Scaffold projects and code: ng new, ng generate component|service|directive|pipe.
  • Run a dev server with hot reload: ng serve.
  • Build optimized bundles: ng build (AOT, tree-shaking, minification).
  • Test: ng test, ng e2e.
  • Maintain: ng update (automated version migrations via schematics) and ng add (install + configure libraries).

The current detail that signals up-to-date knowledge: the CLI's build system is now the fast esbuild/Vite-based application builder (@angular/build, default since v17), ng serve uses Vite for near-instant reloads, and as of v21 new projects are scaffolded with Vitest for testing. ng update's schematics are also what make Angular's major-version upgrades largely automatic.

↑ Back to top

Follow-up 1

Can you explain some of the commands used in Angular CLI?

Sure! Here are some commonly used commands in Angular CLI:

  • ng new: Creates a new Angular project.
  • ng serve: Builds and serves the application locally for development.
  • ng generate component: Generates a new component.
  • ng generate service: Generates a new service.
  • ng test: Runs unit tests.
  • ng build: Builds the application for production.

These are just a few examples, and Angular CLI provides many more commands to help with various development tasks.

Follow-up 2

How do you generate a new component using Angular CLI?

To generate a new component using Angular CLI, you can use the ng generate component command. For example, to generate a component named 'my-component', you would run the following command:

ng generate component my-component

This command will create a new folder for the component, along with the necessary files (HTML, CSS, TypeScript, and a test file) and update the necessary files to include the new component in the application.

Follow-up 3

What is the command to create a new Angular project using CLI?

To create a new Angular project using Angular CLI, you can use the ng new command. For example, to create a project named 'my-app', you would run the following command:

ng new my-app

This command will create a new folder named 'my-app' and generate the basic structure and files for an Angular project inside that folder. It will also install the necessary dependencies defined in the project's package.json file.

2. How do you install Angular CLI?

The CLI is an npm package that requires Node.js and npm (use an Angular-supported, active-LTS Node version). Install it globally:

npm install -g @angular/cli

Then verify and scaffold:

ng version          # check the installed version
ng new my-app       # create a new workspace

A current, practical note interviewers appreciate: a global install isn't strictly required anymore — you can run the CLI on demand with npx @angular/cli@latest new my-app, which avoids a stale global version. Either way, keep the global CLI in sync with your project's Angular version to avoid mismatches, and use ng update @angular/cli @angular/core to upgrade existing projects rather than reinstalling manually.

↑ Back to top

Follow-up 1

What are the prerequisites for installing Angular CLI?

Before installing Angular CLI, make sure you have the following prerequisites:

  1. Node.js: Angular CLI requires Node.js version 10.13 or later. You can download and install Node.js from the official website (https://nodejs.org/).

  2. npm (Node Package Manager): npm is installed automatically with Node.js. Make sure you have the latest version of npm installed by running the following command:

npm install -g npm

Once you have Node.js and npm installed, you can proceed with installing Angular CLI.

Follow-up 2

How do you check the installed version of Angular CLI?

To check the installed version of Angular CLI, you can use the following command:

ng version

This command will display the version of Angular CLI installed on your machine.

Follow-up 3

What is the command to update Angular CLI?

To update Angular CLI to the latest version, you can use the following command:

npm update -g @angular/cli

This command will update Angular CLI to the latest version globally on your machine.

3. What is the purpose of the .angular-cli.json file?

This is a trick/outdated question: .angular-cli.json is the old CLI configuration file used up to Angular 5. Since Angular 6 it was replaced by angular.json (with a new schema), so you won't find .angular-cli.json in any modern project.

What angular.json does today: it's the workspace configuration at the project root, defining one or more projects and their build/serve/test targets and options — entry files, output paths, assets, styles/scripts, file replacements, and named configurations like production and development (budgets, optimization, source maps).

// angular.json (excerpt)
"architect": {
  "build": { "builder": "@angular/build:application", "configurations": { "production": { … } } }
}

So the right answer is: ".angular-cli.json is legacy (pre-v6); the current file is angular.json, which configures the CLI workspace, its projects, and their build/serve/test targets." Don't confuse it with package.json (dependencies) or tsconfig.json (TypeScript).

↑ Back to top

Follow-up 1

What kind of configurations can be done in the .angular-cli.json file?

The .angular-cli.json file allows you to configure various aspects of your Angular project, such as:

  • apps: This section allows you to define multiple applications within your project, each with its own configuration settings.
  • defaults: This section allows you to set default values for various options, such as the style and script file extensions.
  • e2e: This section allows you to configure options related to end-to-end testing.
  • lint: This section allows you to configure options related to linting.
  • test: This section allows you to configure options related to unit testing.
  • defaults: This section allows you to set default values for various options, such as the style and script file extensions.
  • prefix: This option allows you to set the prefix for the generated component selectors.
  • styles and scripts: These options allow you to specify additional stylesheets and scripts to be included in your project.
  • assets: This option allows you to specify additional assets to be copied to the output directory during the build process.
  • environment: This option allows you to define environment-specific configuration settings.

Follow-up 2

How does Angular CLI use the .angular-cli.json file?

Angular CLI uses the .angular-cli.json file to read the configuration settings and apply them when running various CLI commands. For example, when you run the ng build command, Angular CLI reads the configuration from the .angular-cli.json file to determine how to build your project.

The .angular-cli.json file is also used by the CLI to generate code. For example, when you run the ng generate component command, Angular CLI uses the configuration settings from the .angular-cli.json file to determine the default values for the generated component.

4. How do you generate a service using Angular CLI?

Use the generate command (shorthand g):

ng generate service user        # or: ng g s user

This creates src/app/user.service.ts (with an @Injectable({ providedIn: 'root' }) class) plus a user.service.spec.ts test file. You can target a subfolder with a path, e.g. ng g s core/services/user.

Useful points to mention: pass --skip-tests to omit the spec, --dry-run (-d) to preview without writing files, and --flat=false to place it in its own folder. A current note: modern CLI schematics already set providedIn: 'root' by default (so the service is a tree-shakable singleton without manual provider registration), and recent CLI versions generate files without the old .service type suffix in some templates — but ng g service remains the standard way to scaffold one.

↑ Back to top

Follow-up 1

What is the command to generate a service?

The command to generate a service using Angular CLI is:

ng generate service service-name

Replace 'service-name' with the desired name for your service. This command will create a new service file with the specified name in the 'src/app' directory.

Follow-up 2

How do you specify a specific module while generating a service?

By default, Angular CLI generates the service in the 'src/app' directory. If you want to specify a specific module while generating a service, you can use the '--module' flag followed by the module file path.

For example, to generate a service named 'my-service' in the 'src/app/my-module' directory, you can use the following command:

ng generate service my-service --module src/app/my-module/my-module.module.ts

This will create the service file in the specified module directory.

5. How do you build and serve an Angular application using Angular CLI?

Two core commands:

  • ng serve — builds in memory and starts a dev server with live reload at http://localhost:4200. Use it during development (add --open to launch the browser, --port to change the port). It does not write files to disk.
  • ng build — produces a deployable build in dist/. By default ng build is a production build (AOT, tree-shaking, minification, hashed filenames); deploy the contents of dist/ to any static host or CDN.
ng serve --open                 # develop
ng build                        # production build -> dist/
ng build --configuration development

Current notes interviewers like: the default builder is the fast esbuild/Vite-based application builder, and ng serve uses Vite for near-instant HMR. Production builds also enforce bundle budgets (configured in angular.json) that fail the build if bundles grow too large. For server-side rendering, ng build with SSR enabled also emits a server bundle via @angular/ssr.

↑ Back to top

Follow-up 1

What is the command to build an Angular application?

The command to build an Angular application using Angular CLI is ng build. This command compiles the TypeScript code into JavaScript and generates the necessary files in the dist folder.

Follow-up 2

What is the command to serve an Angular application?

The command to serve an Angular application using Angular CLI is ng serve. This command starts a development server and hosts your application locally.

Follow-up 3

How do you specify a different port while serving an application?

To specify a different port while serving an Angular application using Angular CLI, you can use the --port flag followed by the desired port number. For example, to serve the application on port 8080, you can use the command ng serve --port 8080.

Live mock interview

Mock interview: Angular CLI

Intermediate ~5 min Your own free AI key

Your voice and your AI key never touch our servers; the key stays in this browser and is sent only to Google. Only your round scores are saved to track progress.