Angular – Getting Started (CLI)

When I get started with an Angular project, I always begin with the Angular CLI. As with many modern web dev tools, you will need Node and npm. I have my Angular CLI installed globally with the following command…

npm install -g @angular/cli

Once you have the CLI installed, there are several commands that you can use to get things up and running quickly.

// Create/generate a piece of the application
ng generate component
// The component can be replaced with any schematic you are trying to create such as interface or module
// instead of typing out the entire word generate, you can also just use the 'g' shortcut.
ng g component

There are also several options you can use with the generate command. The most useful (to me) is dry-run.

// Runs through the steps and generates CLI output on what it would create without creating it
--dryRun
// You can also use the shortcut alias
-d
// I use this prior to actually running generate to see what is going to be created to ensure it is creating what I want.

You can also use the CLI to compile your code.

// There are a bunch of options with this also.
ng build nameOfMyProject

You can also serve up your project via the CLI.

ng serve nameOfMyProject

The aforementioned CLI commands are the tip of the tip of the iceberg. The Angular CLI is very powerful. Because of the depth of the CLI, I don’t memorize the commands, but rely upon two other commands to ‘think’ for me.

// Opens the Angular documentation
ng doc
// Opens the CLI help
ng help

One other helpful tip…I do not typically run the ng commands directly. I configure my package.json with the commands along with all of the options I want in the scripts area of the package.json file. This allows me to run a CLI command with npm. So if I wish to compile and serve up my Angular locally while I am building, I put the necessary ng serve command with options in the start script. Then I just have to type…

npm start

Side note…you can add your own script commands for npm to run in the scripts area of package.json. When you run them, you add the run option…like this…

npm run myCustomScript

Like I said before, the Angular CLI is robust and I encourage you to explore the commands. It will save you some development time and keep you adhering to DRY, not WET.

Happy Coding!