Angular CLI and MCP Server Essentials Quiz: Frontend Development Fundamentals Quiz

Assess your foundational knowledge of Angular CLI commands, configuration files, and the essentials of working with an MCP server in frontend development. This quiz offers practical questions to help reinforce best practices and essential workflows for Angular-based environments.

1. Angular CLI Purpose

   What is the primary purpose of the Angular CLI in frontend development projects?

   1. To automate the creation, building, and management of Angular applications
   2. To store images and other static files
   3. To connect directly to a backend database
   4. To deploy code directly onto live servers with one command

   Explanation: The Angular CLI helps developers quickly generate, build, and maintain Angular projects through simple commands. It does not function as a storage solution for assets or images. Although it streamlines many deployment-related tasks, it does not cover direct and automatic deployment to live servers in a single command. It is not used for direct database connections.

2. Generating a Component

   Which Angular CLI command should you use to generate a new component named 'dashboard'?

   1. ng generate component dashboard
   2. ng build dashboard
   3. ng serve dashboard
   4. ng init dashboard

   Explanation: 'ng generate component dashboard' creates a new component named 'dashboard' with the necessary files and updates. 'ng build dashboard' would attempt to build a project but not create a component. 'ng serve dashboard' tries to start a development server, but doesn't generate components. 'ng init dashboard' is not a valid CLI command.

3. Running the Development Server

   If you want to preview your Angular application in a browser with live-reloading enabled, which command should you use?

   1. ng serve
   2. ng preview
   3. ng start-app
   4. ng compile

   Explanation: 'ng serve' starts the development server and enables live-reloading. 'ng preview' and 'ng start-app' are not official CLI commands, and 'ng compile' is not used for this purpose. Only 'ng serve' correctly launches the development server for interactive testing.

4. Default Configuration File

   Which file in an Angular workspace manages default project settings such as build configurations and assets, including when working with an MCP server?

   1. angular.json
   2. config.js
   3. index.html
   4. main.ts

   Explanation: The 'angular.json' file contains settings for the Angular project, such as build options, file paths, assets, and environment details. 'config.js' isn't a standard Angular file. 'index.html' is the application's entry point for rendering, and 'main.ts' is the main TypeScript bootstrap file.

5. Using MCP Server in Development

   How does an MCP server commonly support Angular application development?

   1. By handling API requests through a proxy during local development to avoid cross-origin issues
   2. By writing TypeScript code automatically
   3. By designing the user interface with drag-and-drop tools
   4. By directly compiling Angular templates to HTML

   Explanation: An MCP server often proxies API requests in development, helping to avoid cross-origin errors and making local testing easier. It does not write code automatically, design UIs, or compile templates. Its main role relates to middleware and request routing support.

6. Building an Angular Project

   What does the 'ng build' command accomplish in an Angular CLI project?

   1. Compiles application code and assets into an output folder for deployment
   2. Uploads the application directly to a production server
   3. Starts the development server with live reload
   4. Deletes the project and its dependencies

   Explanation: 'ng build' compiles application source code and places output in a directory, often 'dist', ready for deployment elsewhere. It does not deploy the app, start the server, or delete anything. The other options either do not exist or have unrelated functionality.

7. Adding a Service

   Which Angular CLI command properly creates a new service file named 'user'?

   1. ng generate service user
   2. ng start service user
   3. ng create module user
   4. ng make service user

   Explanation: 'ng generate service user' is the correct command to scaffold a new service called 'user'. There is no CLI command 'ng start service', 'ng make service', nor does 'ng create module' create a service; it creates a module instead.

8. Configuration for API Proxy

   Where should the proxy configuration file be referenced when using an MCP server to forward API calls in Angular development?

   1. In the 'angular.json' file within the 'serve' options
   2. Inside styles.css
   3. Within main.ts import statements
   4. In package-lock.json

   Explanation: Proxy settings are referenced in 'angular.json' under the 'serve' target, allowing the development server to use a proxy configuration for API calls. 'styles.css' is for styles, 'main.ts' is for bootstrapping, and 'package-lock.json' manages dependencies, not server proxies.

9. Environment-Specific Settings

   How does the Angular CLI support different environment configurations, such as development or production?

   1. By using separate files like environment.ts and environment.prod.ts
   2. By modifying app.component.html directly
   3. By changing the CLI version prior to build
   4. By updating README files with the target environment

   Explanation: Angular handles environments through distinct files, with 'environment.ts' for development and 'environment.prod.ts' for production, ensuring appropriate settings. Modifying HTML, CLI versions, or README files does not affect runtime environment configurations.

10. MCP Server Role

    In the context of frontend development, what is the main role of an MCP server when working with an Angular app?

    1. To simulate backend APIs and manage mock data during local development
    2. To process user interface logic directly
    3. To write CSS files for the developer
    4. To compile Angular TypeScript files

    Explanation: The MCP server's main function is to simulate API responses, enabling the frontend to be tested without a real backend. It does not manipulate UI logic, style files, or compile TypeScript. Other tasks are outside its typical development scope.

11. Adding a New Module

    Which Angular CLI command will generate a new feature module named 'reports'?

    1. ng generate module reports
    2. ng build module reports
    3. ng create reports component
    4. ng deploy reports

    Explanation: 'ng generate module reports' creates a new module called 'reports' as part of Angular CLI's scaffolding. 'ng build module reports' and 'ng deploy reports' are not valid commands, and 'ng create reports component' would attempt to generate a component, not a module.

12. Serving on a Custom Port

    How do you run an Angular development server on a different port, for example, port 4300?

    1. ng serve --port 4300
    2. ng build --port 4300
    3. ng server 4300
    4. ng init --port 4300

    Explanation: The correct way to specify a custom port is with 'ng serve --port 4300'. The 'ng build' command does not accept port settings, 'ng server' is not a CLI command, and 'ng init' is unrelated to running servers or specifying ports.

13. Creating a Class File

    Which command helps you quickly scaffold a new class file named 'Person' using Angular CLI?

    1. ng generate class Person
    2. ng create service Person
    3. ng build class Person
    4. ng make Person class

    Explanation: 'ng generate class Person' creates a class file for 'Person'. Creating a service, building a class, or making a class are either unrelated or unsupported commands in this context. Only 'ng generate class Person' serves the intended purpose.

14. Output Directory for Builds

    What is the default output directory created by Angular CLI after running a successful project build?

    1. dist
    2. src
    3. node_modules
    4. output

    Explanation: By default, Angular CLI outputs build files to the 'dist' directory. 'src' contains application source files, 'node_modules' is for dependencies, and 'output' is not used by default in this context.

15. Adding External Libraries

    Which command would be used to install an external library dependency when developing with Angular CLI?

    1. npm install library-name
    2. ng add library-name.js
    3. ng install library-name
    4. npm generate library-name

    Explanation: 'npm install library-name' is the standard command for adding dependencies. 'ng add' is used with some Angular-specific packages, but not all libraries support it and the syntax provided is incorrect. 'ng install' and 'npm generate' are not valid commands for installing libraries.

16. Verifying Installed CLI Version

    How can you check the currently installed version of Angular CLI on your system?

    1. ng version
    2. ng check-version
    3. ng cli-info
    4. ng show-version

    Explanation: 'ng version' displays the version of Angular CLI in use as well as other dependencies. The other command options are either invalid, do not exist, or would lead to errors if used in a terminal.