Angular CLI & Project Structure

Q: What is the Angular CLI and how do you create a new project with it?

The Angular CLI is a command line tool that helps you create, build, test, and manage an Angular project without setting up complicated build tools yourself. Running a single command generates a fully working starter project with a sensible folder structure already in place.

Q: What is the purpose of the angular.json file in an Angular project?

The angular.json file holds the configuration for how your project is built, tested, and served, including things like which files to include in the build, environment specific settings, and build output locations. The CLI reads this file whenever you run commands like ng build or ng serve.

Q: How would you generate a new component, service, or module using Angular CLI commands?

The CLI provides generate commands, often shortened to g, that create new files following Angular's recommended structure and naming conventions automatically, saving you from manually creating and wiring up each file by hand.

Q: What is the typical folder structure of a modern Angular project, and what does each main folder contain?

The src folder contains your actual application code, with an app folder holding your components, services, and other feature code. An assets folder holds images and static files, and an environments folder holds configuration values that differ between development and production builds.

Q: How would you use Angular CLI commands to build your project for production and analyze the resulting bundle size?

Running ng build with the production configuration creates an optimized version of your app with smaller file sizes, and tools like the source-map-explorer package let you visualize exactly which parts of your code are taking up the most space in the final bundle, helping you find opportunities to reduce it.

5 questions found

What is the Angular CLI and how do you create a new project with it?

Beginner

The Angular CLI is a command line tool that helps you create, build, test, and manage an Angular project without setting up complicated build tools yourself. Running a single command generates a fully working starter project with a sensible folder structure already in place.

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve

Real-world example A developer starting a brand new project runs ng new and has a fully working Angular app, complete with routing and testing set up, running in the browser within a couple of minutes.

Common follow-ups: What questions does the CLI ask you when creating a new project, and what do they control?;How do you update the Angular CLI itself to the latest version?

Build Environments & Deployment;Angular Schematics & Custom Builders

What is the purpose of the angular.json file in an Angular project?

Beginner

The angular.json file holds the configuration for how your project is built, tested, and served, including things like which files to include in the build, environment specific settings, and build output locations. The CLI reads this file whenever you run commands like ng build or ng serve.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": { "options": { "outputPath": "dist/my-app" } }
      }
    }
  }
}

Real-world example A team changes their build output folder by editing a single value inside angular.json, without needing to touch any actual build tool configuration files directly.

Common follow-ups: What happens if you manually edit angular.json incorrectly?;How does angular.json differ from package.json?

Build Environments & Deployment;Standalone Components

How would you generate a new component, service, or module using Angular CLI commands?

Intermediate

The CLI provides generate commands, often shortened to g, that create new files following Angular's recommended structure and naming conventions automatically, saving you from manually creating and wiring up each file by hand.

ng generate component user-profile
// shorthand version
ng g c user-profile

ng generate service auth
ng g s auth

Real-world example A developer adding a new feature generates a component and its matching service using two quick CLI commands, instantly getting properly named and structured files instead of manually creating them from scratch.

Common follow-ups: What files does generating a new component actually create?;How would you generate a component without an accompanying test file?

Components & Templates;Services & Dependency Injection

What is the typical folder structure of a modern Angular project, and what does each main folder contain?

Intermediate

The src folder contains your actual application code, with an app folder holding your components, services, and other feature code. An assets folder holds images and static files, and an environments folder holds configuration values that differ between development and production builds.

src/
  app/
    components/
    services/
    app.component.ts
  assets/
    logo.png
  environments/
    environment.ts
    environment.prod.ts

Real-world example A growing project organizes its components and services into clearly separated folders inside the app directory, making it easy for new team members to quickly find the code they need to work on.

Common follow-ups: How should a very large project organize its code differently from a small one?;What is the purpose of having a separate environment.prod.ts file?

Build Environments & Deployment;Standalone Components

How would you use Angular CLI commands to build your project for production and analyze the resulting bundle size?

Advanced

Running ng build with the production configuration creates an optimized version of your app with smaller file sizes, and tools like the source-map-explorer package let you visualize exactly which parts of your code are taking up the most space in the final bundle, helping you find opportunities to reduce it.

ng build --configuration production

npx source-map-explorer dist/my-app/*.js
// opens a visual chart showing which packages take up the most space

Real-world example A team discovers a large unused charting library was accidentally being included in their main bundle, using source-map-explorer to visualize the bundle after a production build, and removes it to significantly reduce load time.

Common follow-ups: What specific optimizations does the production build configuration apply automatically?;How would you set a bundle size budget that fails the build if exceeded?

Performance & Lazy Loading;Build Environments & Deployment