Creating a New Project with Angular CLI
Introduction
The Angular CLI is arguably the most powerful part of the Angular framework. It gives you the power to generate new projects, components, and services—it even gives you the power to completely port your project's code to the next Angular version! In this guide, you will learn how to use the Angular CLI to generate a new Angular project.
Let's get started!
Getting Started Using the Angular CLI and Angular Schematics
The Angular CLI can be downloaded onto your machine by running the following command using NPM:
1npm install -g @angular/cliYou can now use the ng command to access the CLI. To see a full listing of available commands, run ng -h.
The command that you will be learning in this guide is the ng new command. Bootstrapping an Angular app via the CLI is as simple as running:
1ng new my-appThis command will create a new Angular app within your current directory that is named my-app. In the following section, you will learn how to further customize the generation of your new Angular project via direct use of the available options.
Available Options
Apart from following the on-screen prompts, it may be useful for you to use the options directly. This is especially true when you have your own project tooling that wraps the Angular CLI. According to the Angular CLI ng-new schematic's schema.json file, the following options are available to use:
- directory: The directory name of your new Angular app
- name: The name of the new workspace and Angular project
- skipInstall: You can set this to "true" in order to avoid the automatic installing of dependencies
- skipGit: You can use this option to skip initializing a Git repo
- commit: You can use this option to specify initial Git repo information
- inlineStyle: Using this option means that styles will be included, by default, in the component's TS file
- inlineTemplate: Using this option will ensure that a component's template is included within the TS file
- viewEncapsulation: Allows you to set the view encapsulation of new components by default
- version: This lesser-known option allows you to set the version of your Angular project initially
- routing: This will initiate a routing module
- prefix: You can use this option to change or remove the "app" prefix for new component selectors
- style: You can specify the type of CSS preprocessor (if any) by using this option
- skipTests: This will stop the CLI from generating new test files for new components
- minimal: This option will create a new project without any testing frameworks and is great for testing
- strict: This will ensure that strict type checking is enabled for your project
- legacyBrowsers: This will add support for legacy browsers like Internet Explorer
- packageManager: This option is used to specify the package manager that the CLI should use for this project
These aren't even all of the options! As you can see, the Angular CLI is extremely flexible when it comes to generating new projects and gives you a lot of control and customization.
Conclusion
You have now learned how to easily generate a new Angular app via the Angular CLI. You have learned that you can use the ng new command and follow the on-screen prompts to generate your new project. Not only this, but you learned about all of the options that you can use directly with the ng new command to further customize your experience. With the help of these available options, you can be confident when it comes to generating new Angular apps!