Angular Build and Deployment Quiz: CLI, Config, and Environments Quiz

Challenge your understanding of Angular build processes, CLI flags, configuration files, and environment management. This quiz targets core skills for efficient deployment and environment-specific customization in modern Angular applications.

1. Angular CLI Build Command Usage

   When preparing an Angular project for production deployment, which CLI command ensures that optimizations such as minification and Ahead-of-Time compilation are enabled by default?

   1. ng serve --prod
   2. ng start --production
   3. ng build --dev
   4. ng build --prod

   Explanation: The 'ng build --prod' command triggers production optimizations, including minification, Ahead-of-Time (AOT) compilation, and tree shaking. 'ng serve --prod' is not a valid command, as 'ng serve' is used for development servers, not builds. 'ng build --dev' does not enable production-level optimizations, and 'ng start --production' is not a recognized Angular CLI command. Only 'ng build --prod' is correct for a production-ready output.

2. Angular Environment Configuration Files

   Which file is typically modified to set environment-specific variables for a development build in an Angular project?

   1. src/environments/environment.prod.ts
   2. src/environments/environment.dev.ts
   3. angular.json
   4. package.json

   Explanation: The file 'src/environments/environment.dev.ts' is designated for development environment variables. While 'angular.json' holds build configurations, it does not store environment variables directly. 'src/environments/environment.prod.ts' is used for production, not development. 'package.json' is for npm configurations and dependencies, not environment variables. Therefore, the development environment settings should be set in 'src/environments/environment.dev.ts'.

3. Custom Build Configurations

   How can you create a custom build configuration, such as 'staging', that uses its own environment file in Angular?

   1. Modify angular.json to add a configuration and map it to a new environment file
   2. Edit package-lock.json and specify the environment property
   3. Use ng generate environment staging
   4. Add a staging entry to tsconfig.json

   Explanation: Custom build configurations are defined in 'angular.json', where you can add new configurations such as 'staging' and map them to custom environment files. Editing 'package-lock.json' does not impact build environments. 'ng generate environment staging' is not a CLI command. Adding an entry to 'tsconfig.json' affects TypeScript settings, not build configurations. Thus, angular.json is where custom build setups are managed.

4. File Replacement for Environment Files

   During a production build, how does Angular ensure that the correct environment variables are included by default?

   1. By replacing the environment.ts file with environment.prod.ts using fileReplacements in build options
   2. By hardcoding variables in the main.ts file
   3. By setting variables through the index.html page
   4. By copying variables from package.json to the compiled code

   Explanation: Angular uses the fileReplacements array in angular.json to specify that, during a production build, environment.ts is replaced with environment.prod.ts. Hardcoding variables in main.ts is not the Angular approach and reduces flexibility. Copying from package.json or setting variables in index.html are also incorrect methods for environment management. The file replacement strategy in the build options ensures the correct environment file is used per build type.

5. Angular Output Path and Artifacts

   After running a production build with the Angular CLI, in which directory are the compiled application files (HTML, CSS, JavaScript) output by default?

   1. dist/project-name
   2. build/production
   3. src/app/output
   4. public/dist

   Explanation: By default, Angular CLI outputs the compiled files to the 'dist/project-name' directory after a production build. The directory 'src/app/output' does not exist and is not used by the CLI for build artifacts. 'build/production' and 'public/dist' are not standard Angular output directories unless customized. The default behavior is to use the 'dist' folder followed by the project name for deployment-ready files.