Angular Best Practices

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will Implement Angular Reactive Forms . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here For Code Editor its VS Code with Remote Container. If you want to develop inside Container - Check This Out Reactive Forms In Every Angular Application, there will be at least Form to Fill by End User. There are always two ways to implement Forms, Form . Reactive Forms . Its Benefits are Ability to create Dynamic Forms. Helps to set Validator initially while creating form via Form Group. Easy Validation Options. Implementation: Step 1: Add Dependencies Add ReactiveFormsModule in app.module.ts & respective Module File. import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ ... imports: [ ... ReactiveFormsModule, ... ] }) Step 2: Add Reactive Form Builder and Form Add ...

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will Develop Angular App inside Container . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here Install Docker - Click Here VS Code - Click Here Remote - Containers Click Here Once Install Docker & Node.JS install Angular CLI via NPM Package Manager. Implementation: Step 1: Setup Docker For Dev. To Setup Docker for Angular App for Development, Please refer the below, Blog - Click Here Video - Click Here As small Setups, Copy the DockerFile.dev via URL Set Start Script as below json "start": "ng serve --host 0.0.0.0" To Build run below command, powershell docker build -t <appN-name>:dev -f Dockerfile.Dev . Run the Container use below command, powershell docker run -it --rm -p 9001:4200 -v ${PWD}/src:/usr/src/app/src --name <container-name> <app-name>:dev Step 2: Setup Remote ...

Hi Friends, This is Lakshman here. Welcome back to the Series Angular Best Practices Today, We will Dockerize your angular app for Development . Now as days, we develop application with multiple developers. Each one have there own Node.JS Environment. To Solve this issue we can containerize your application to run inside Docker. Pre-requisites: The pre-requisites are Install Docker - Click Here Node.JS - Click Here Angular CLI - Click Here Once Install Docker & Node.JS install Angular CLI via NPM Package Manager. Implementation: On your Existing Angular Application, Create a File Called Dockerfile.Dev Dev indicates for Development Docker File. Inside that Dockerfile.Dev, Copy the below code # Create a new image from the base nodejs 12.7 image. FROM node:12.7-alpine # Create the target directory in the image RUN mkdir -p /usr/src/app # Set the created directory as the working directory WORKDIR /usr/src/app # Copy the package.json inside the working directory COPY...

Hi Friends, This is Lakshman here. Welcome back to the Series Angular Best Practices Today, We will try to solve the some development dependencies issues. Now as days, we develop application with multiple developers. Each one have there own Node.JS Environment. So They run into dev-environment issues, such as below, npm install command not completed. Unable to build Unable to run application locally. Now we will address the issues one by one, Command npm install not completed: This will happen based on certain situation, Node.js is not properly installed. App created node.js is different from running node.js version If you app style type is scss , it occur because of node-sass issue. To Solve the Issue, Dockerize the application with Dev-Environment on code. Document the App's development procedure. If you are able to solve this issue the Unable to Build or Run App will solve automatically. On-road head, we will discuss a lot of things. Looking forward ...

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will go through Practices to followed on Handling Multi-Environment for Angular App. In all command, request to use Angular CLI installed in App's Dev Dependencies. In package.json "scripts": { "ng" : "ng" , ... } , "devDependencies": { ... "@angular/cli" : "~10.0.6" , ... } , ... Angular Environments As Default, The Angular creates environment.ts & environment.prod.ts files to Handle Environments. Usual Environment variables are, Production Flag. API Url, etc., If we have more than Two Environments such as QA, UAT, we usually create environment.qa.ts & environment.uat.ts and configure variables. The Current problems were, We are needed to create each file per environment, which drives to rebuild application per environment. Can't able to Change variables While App...