Angular 9 is one of the most anticipated releases of Angular to date. Get ready for the release by downloading our Angular 9 cheat sheet. ASP.NET Core Basic Security Settings Cheat Sheet; ASP.NET Core Form Tag Helpers Cheat Sheet; ASP.NET Core JSON API Cheat Sheet.NET Security Cheat Sheet (OWASP).NET Framework 4 and Extensions Poster PDF Visual Studio 2017 Poster.NET CLI Cheat Sheet.NET Standard DateTime Format Strings PDF.NET Regular Expression Cheat Sheet.
Updated June 6, 2018
In this post I give an overview of the most uses Angular CLI command.
Using the CLI commands can greatly boost your productivity on Angular projects.
Create a new app
Create a new angular application with the default styling option CSS.
Create new angular project with scss styling and a routing module.
More info: https://github.com/angular/angular-cli/wiki/new
Build and start the app
Build the app and start it as a webserver.
You can reach the app at: http://localhost:4200/
Build your app and open it in the webbrowser
Serve your app on a different port and use ssl.
Your app will be here: https://localhost:4444/
Build using Ahead of Time compilation.
This is useful to test aot, which will be used when you compile for production.
Serve your app inside a base url
This will run the app below the url /my-app.
Your app will be here: http://localhost:4200/my-app/
This is useful when you are deploying later to a similar URL and want to develop with this URL too.
More info on ng serve : https://github.com/angular/angular-cli/wiki/serve
Build the app
Default build
Compiles the application into an output directory.
The build artifacts will be stored in the dist/ directory.
Production build
Productie build for a app with a base url: /my-app/
Environment test Build for a app with a base url: /my-app/
Build dev environment with all production elements enabled
Provide an output path for the compiled code.
Useful when automating your workflow. Drivers kme.
More info on build: https://github.com/angular/angular-cli/wiki/build
Update the app
Updates the current application to latest versions.
See the update without making changes.
Run through without making any changes.
Will list all files that would have been created when running ng update.
More info: https://github.com/angular/angular-cli/wiki/update
Generate
Generates the specified blueprint.
You can also use the shorter notation: ng g
I will use the short notations in the examples below.
For the full notation see the official documentation.
Generate a module
Generate a module with a routing module
This is handy when creating a lazy loading module.
Generate a component
Generate a component without a spec file
Generate a interface
Generate an interface with a “type”
This will create an interface with the file name: my-interface.green.ts.
Generate a class
Generate an enumeration
Generate a service
Angular 9 Cheat Sheet Free
Generate a guard
Generate a pipe
Generate a directive
Simulating a generate command.
Add the option –dry-run (-d) to run generate without making any changes.
It will list all files that would have been created when running ng generate.
More information on generate: https://github.com/angular/angular-cli/wiki/generate
Angular 9 Cheat Sheet Pdf Download
Best practises.
For each feature of your app create a module and create your other components inside this module.
This will make it easy to eager or lazy load this feature of your app.
See also Angular style guid: https://angular.io/guide/styleguide#feature-modules
Example cars feature
- Create a module cars with the routing module
- Next create components inside this module
Create interfaces, classes and services inside a shared folder of this module.
- Create a interface (model) for the cars in a shared folder inside this module
- Create a service to fetch data in the shared folder inside this module.
This results in the following directory structure
Angular 9 Cheat Sheet Pdf
Read more about the Angular CLI: https://github.com/angular/angular-cli/wiki
Angular 9 Cheat Sheet
Learn more about Angular’s best practices on the official Angular style guide: https://angular.io/guide/styleguide