5 Useful Angular CLI Tips For Beginners
Before I start, I want to thank the Angular team for providing a very good tool which saves a lot of time on every new project..❤️ Also, Please have a look into this excellent article by Tomas Trajan for the best practices and pro-tips in angular
What are we going to learn
- Adding global styles, variables, and media query mixin
- Getting all configs before app initialization
- Skipping HTTP interceptor for HTTP calls
- Setting up JSON Server for testing
- Adding compodoc for document generation
1. Adding global styles and variables
It is a best practise to keep a global file with all your SASS variables and mixins etc in the project. And instead of importing this global file in each components, we can use ‘includePaths’ of ‘stylePreprocessorOptions’ config in angular.json to define a global path as shown below.
If you like to add bootstrap like simple media queries in your project, this code snippet will be much helpful.
2. Getting configs/settings before app initialisation
This is a common scenario in app development. While initialising the application, it may need to fetch the initial configurations like API constants or 3rd party service tokens from server. In order to achieve this, angular provides an injection token called ‘APP_INITIALISER’ in @angular/core. A function that will be executed when app is initialised.
As described below, keeping it in a separate module will be better in design perspective.
a) Create a config loader module and import it in main app module
b) Create an angular service class to fetch the config from server
c) Create factory functions which will be called by the config loader module on app initialisation. Use getters to get the value from services.
For more detailed information, please see this article by Rich
3. Skipping HTTP Interceptor
Problem: Injected interceptor in the app module is intercepting all the HTTP calls from the app. But I want to intercept the calls only in a particular module or want to skip the interception in a particular scenario.
Solution for above scenario can be done in two ways,
a) Adding a header in the request and based on this header identify the requests to skip.
b) Use HTTPClient by passing HttpBackend handler.
By injecting http backend handler in HttpClient will make http client to dispatch all the requests directly to the backend, without going through the interceptor chain, so that all HTTP calls will be skipped. (I believe, this is the easiest and cleaner way of getting this work done)
4. Setting up JSON Server for testing
This is helpful when we want to simulate a backend REST service to deliver some data in JSON format to the front-end application and make sure everything is working as expected.
We can use JSON Server package which will help us to setup Restful CRUD operations very fast. To integrate this with angular cli app, we need to create JSON server and add proxy configs as below,
a) Create a JSON server and data.json file
b) Create a proxy config file and pass as an argument in ng serve
c) Use ‘concurrently’ for running cli commands & JSON server together. Create mock-server, dev-proxy and dev scripts in package.json as below. concurrently used to run multiple npm scripts together.
// package.json
......
"scripts": {
"mock-server": "node ./src/json-server/server.js",
"dev-proxy": "ng serve --proxy-config proxy.conf.json",
"dev": "concurrently --kill-others \"npm run mock-server\"
\"npm run dev-proxy\" "}
.....
5. Setup compodoc for documentation
This tool helps you to generate the documentation of your angular project with in seconds.
// package.json
......
"scripts": {
"doc": "./node_modules/.bin/compodoc -p src/tsconfig.app.json"
}
.....Full source code is available in this repository. Enjoy Coding !!!!!!
