You have unlimited access as a PRO member
You are receiving a free preview of 3 lessons
Your free preview as expired - please upgrade to PRO
- 1. New
- 2. Serve
- 3. Generate
- 4. Add
- 5. Test
- 6. Build
- 7. Additional Tricks
- The End
- Object Oriented Programming With TypeScript
- Angular Elements Advanced Techniques
- TypeScript - the Basics
- Cloud Scheduler for Firebase Functions
- Testing Firestore Security Rules With the Emulator
- How to Use Git and Github
- Infinite Virtual Scroll With the Angular CDK
- Build a Group Chat With Firestore
- Async Await Pro Tips
Angular CLI Basics GuideEpisode 104 written by Jeff Delaney
This lesson will take you through the most common and useful commands of the Angular CLI, but it’s really only the tip of the iceberg. Refer to the Angular CLI docs for a comprehensive breakdown of every option discussed below.
Get started by installing the CLI globally on your system.
npm install -g @angular/[email protected]
Then make sure that it’s installed on your system and prints out version 6.0 or greater.
The first thing you’ll need to do is generate a new app.
ng new myApp
This command will create your app and install the dependencies.
The CLI configuration options can be found in the
angular.json file in the root of the project. It is possible to have multiple apps and libraries in a single CLI workspace. If necessary, you can edit values in this file to change the behavior of the CLI, but that’s usually only required for more advanced use cases.
You can use a popular CSS preprocessor, such as
less. The CLI will automatically install the dependencies needed to compile the styles to plain CSS at build time.
ng new myApp --style scss
Most single page applications will take advantage of the Angular router. Can you automatically generate the router code by passing in the routing flag.
ng new myApp --routing
Let’s make sure the app works in the browser.
ng serve -o
-o flag will automatically pull up a browser window with localhost:4200 serving your app.
The generate command is the most powerful feature of the CLI and you will use it to quickly scaffold boilerplate code. In addition, it will update your NgModule with the TypeScript import and declaration.
ng generate component hello
Here are a few of my favorite ways to customize the generate process
ng g component hello --spec false
Export the Component
ng g component hello --export
Inline Template and Stylesheet
ng g component hello -t -s
In many cases, you will want to add your components and services to a feature module.
First, generate the module.
ng g module guitar
This will create a /guitar directory. We can add components to our module by (1) placing them inside this directory:
ng g component guitar/strings
Or (2) adding the
-m flag when generating the file.
ng g component strings --module guitar
In the CLI v6, we can now add libraries. For more details, see my NgPackagr tutorial.
ng g library useful-stuff
The CLI can also generate an Angular Universal app for server-side rendering. For more details, see my Angular Universal with Firebase tutorial.
ng g universal --client-project myApp
In Angular 6, we were introduced to a powerful new add command. It allows 3rd party packages to be wired into your app with zero setup. It will install the package via NPM, take care of the imports in the NgModule, and generate any other necessary boilerplate files - so nice!
In past lessons, I have shown you how to build a progressive web app from scratch in Angular. Thanks to the new
ng add command, we can create all the of PWA resources much faster.
ng add @angular/pwa
Any third-party library can create schematics for their their boilerplate code. For example, you can instantly add NgBootstrap to your app. This will install the NPM dependencies and update the NgModule imports.
ng add @ngbootstrap/schematics
The angular CLI creates code to perform test-driven development (TDD) each time you run the generate command. You can run all of your tests in the background with a single command.
Angular also creates end-to-end tests that you can run with
After your app has been developed and all tests pass, you will need to compile it to a format that can be deployed.
ng build --prod
Again, the configuration options for your production build are best managed in the
angular.json file. By default, the compiled app will be built in the
The CLI still has a ton of tricks up its sleeve. Here are a few clever commands that you can use to further boost your productivity.
Also new in Angular 6, we can now update the Angular, RxJS, and TypeScript packages in our app with a single command.
Stuck on something? Just run the doc command with the search term and it will automatically direct you to the the official Angular documentation for that term.
ng doc viewChild
The Angular CLI has additional functionality beyond this article, but we covered the most common use cases. When used effectively this tool will save you many, many hours of development time.