• Angular
• 133
• June-23-2023
• by Ahsan

Here is a list of important commands used in the Angular CLI (Command Line Interface) along with a brief explanation of each command:

1. `ng new <project-name>`: Creates a new Angular project with the specified name. It sets up the basic project structure, configuration files, and installs the necessary dependencies.

2. `ng serve`: Builds and serves the Angular application locally for development. It starts a development server and watches for changes in the source files, automatically refreshing the browser.

3. `ng generate <schematic> <name>`: Generates various elements of an Angular application such as components, services, modules, etc. The `<schematic>` can be replaced with the specific element you want to generate, and `<name>` represents the name of the generated element.

4. `ng build`: Compiles the Angular application into an output directory. It creates a production-ready build that can be deployed to a web server.

5. `ng test`: Runs unit tests for the Angular application using the configured testing framework (usually Karma). It provides feedback on the test results.

6. `ng lint`: Analyzes the code using TSLint or ESLint (depending on the configuration) to identify and report any potential errors or code style issues.

7. `ng update`: Updates the Angular dependencies and other related packages in the project to the latest compatible versions. It helps keep the project up-to-date with the latest Angular ecosystem.

8. `ng serve --prod`: Builds and serves the Angular application in production mode. It applies optimizations such as minification, tree shaking, and ahead-of-time (AOT) compilation for better performance.

9. `ng generate module <module-name>`: Generates a new Angular module with the specified name. Modules are used to organize and encapsulate related components, services, and other functionality.

10. `ng generate component <component-name>`: Generates a new Angular component with the specified name. Components are the building blocks of Angular applications and encapsulate the UI and behavior of a specific part of the application.

11. `ng generate service <service-name>`: Generates a new Angular service with the specified name. Services are used to provide shared functionality and data across different parts of the application.

12. `ng add <package-name>`: Adds a third-party package or library to the Angular project. It automatically installs and configures the package, making it ready to use in the application.

13. `ng generate directive <directive-name>`: Generates a new Angular directive with the specified name. Directives allow you to manipulate the DOM, apply behaviors, and create reusable components.

14. `ng generate pipe <pipe-name>`: Generates a new Angular pipe with the specified name. Pipes are used to transform data in templates, allowing you to format, filter, or modify the output.

15. `ng generate class <class-name>`: Generates a new TypeScript class with the specified name. Classes are commonly used for data models, business logic, or utility functions.

16. `ng generate enum <enum-name>`: Generates a new TypeScript enum with the specified name. Enums are used to define a set of named constants.

17. `ng test --code-coverage`: Runs unit tests and generates a code coverage report. It provides insights into the amount of code covered by tests, helping identify areas that need more test coverage.

18. `ng e2e`: Runs end-to-end tests for the Angular application. End-to-end tests simulate user interactions and verify the behavior of the application as a whole.

19. `ng serve --open`: Builds and serves the Angular application, automatically opening it in the default browser.

20. `ng build --prod --aot`: Builds the Angular application for production with ahead-of-time (AOT) compilation. AOT compilation improves performance and generates smaller bundle sizes.

21. `ng config`: Displays Angular CLI configuration settings for the project.

22. `ng help`: Displays the help documentation for Angular CLI, providing information on available commands, options, and usage.

23. `ng doc <keyword>`: Opens the Angular documentation website with the specified keyword. It helps to quickly access relevant documentation for Angular features and APIs.

24. `ng version`: Displays the version information of the Angular CLI and the installed Angular packages.

25. `ng update <package-name>`: Updates a specific package in the Angular project to the latest version. It allows you to selectively update individual packages instead of updating the entire project.

26. `ng config <key> <value>`: Sets or retrieves the value of a specific configuration option in the Angular project. It is used to customize various settings such as the default project, default style preprocessor, etc.

27. `ng build --watch`: Builds the Angular application and watches for changes in the source files. It automatically rebuilds the application whenever a change is detected.

28. `ng generate guard <guard-name>`: Generates a new Angular guard with the specified name. Guards are used to control access to routes based on certain conditions.

29. `ng generate interceptor <interceptor-name>`: Generates a new Angular HTTP interceptor with the specified name. Interceptors allow you to intercept and modify HTTP requests and responses.

30. `ng generate module <module-name> --routing`: Generates a new Angular module with routing configuration. It creates a module with an associated routing module for managing application routes.

31. `ng lint --fix`: Runs the linter and automatically fixes the identified code style issues where possible.

32. `ng build --prod --base-href=<base-href>`: Builds the Angular application for production with a custom base href. The base href is used for resolving the root URL of the application when it is deployed.

33. `ng test --watch`: Runs the unit tests and watches for changes in the source files. It re-runs the tests whenever a change is detected.

34. `ng serve --port <port-number>`: Builds and serves the Angular application on a specific port number. It allows you to specify a custom port for running the development server.

35. `ng xi18n`: Extracts the translation messages from the Angular application for internationalization (i18n). It generates the necessary files for translating the application into different languages.

These commands provide additional functionality and customization options for Angular development, including updating packages, configuration management, code quality, and internationalization support.