DEV Community: Balaji

⚡️Understanding angular dynamic forms with JSON data

Balaji — Fri, 17 Nov 2023 05:08:11 +0000

Angular is a powerful and popular front-end framework that allows developers to build dynamic and interactive web applications. One of Angular's key features is its ability to seamlessly process modules. In this blog post, we will explore the concept of dynamic forms in Angular and explore how JSON can be utilized to create dynamic and flexible forms.

What are Dynamic Forms?

Dynamic forms in Angular are forms that are generated dynamically at runtime based on certain conditions or data. Unlike static forms, where the structure is predefined in the HTML, dynamic forms are more flexible and can adapt to changing requirements. This is particularly useful in scenarios where the form structure needs to be determined dynamically based on user input, API responses, or other dynamic data sources.

Creating a Simple Dynamic Form

Let's walk through a basic example of creating a dynamic form using Angular and JSON.

Step 1: Set Up Your Angular Project
Assuming you have Angular CLI installed, create a new Angular project:



ng new dynamic-forms
cd dynamic-forms

Step 2: Install Required Dependencies
Install the Angular Reactive Forms module, which will be used to create and manage dynamic forms:



ng generate module dynamic-form

Step 3: Define interface
Create a file named form.interface.ts to define the structure of your dynamic form interface:



export interface IFormStructure {
  type: string;
  label: string;
  name: string;
  value: string | number | boolean;
  options?: { label: string; value: number | string | boolean }[];
  validations?: {
    name: string;
    validator: string;
    message: string;
  }[];
}

Step 4: Define Form Structure in JSON
Create a file named form-config.ts to define the structure of your dynamic form:



import { IFormStructure } from './form.interface';

export const formConfig: IFormStructure[] = [
  {
    type: 'text',
    label: 'Name',
    name: 'name',
    value: '',
    validations: [
      {
        name: 'required',
        validator: 'required',
        message: 'Name is required',
      },
    ],
  },
  {
    type: 'textarea',
    label: 'Description',
    name: 'description',
    value: '',
    validations: [
      {
        name: 'required',
        validator: 'required',
        message: 'Description is required',
      },
    ],
  },
  {
    type: 'number',
    label: 'Age',
    name: 'age',
    value: '',
    validations: [],
  },
  {
    type: 'radio',
    label: 'Gender',
    name: 'gender',
    value: true,
    options: [
      { label: 'Male', value: true },
      { label: 'Female', value: false },
    ],
    validations: [],
  },
  {
    type: 'select',
    label: 'Country',
    name: 'country',
    value: 1,
    options: [
      { label: 'India', value: 1 },
      { label: 'USA', value: 2 },
      { label: 'Canada', value: 3 },
    ],
    validations: [
      {
        name: 'required',
        validator: 'required',
        message: 'Address is required',
      },
    ],
  },
];

Step 5: Create Dynamic Form Component
Generate a new component to handle the dynamic form:



ng generate component dynamic-form

Step 6: Dynamically Generate Form
Update the dynamic-form.component.ts file to dynamically generate the form based on the JSON configuration:



import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { IFormStructure } from './form.interface';
import { formConfig } from './form-config';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.scss'],
})
export class DynamicFormComponent implements OnInit {
  formStructure: IFormStructure[] = formConfig;

  dynamicForm: FormGroup = this.fb.group({});

  constructor(private fb: FormBuilder) {
    let formGroup: Record<string, any> = {};
    this.formStructure.forEach((control) => {
      let controlValidators: Validators[] = [];

      if (control.validations) {
        ``;
        control.validations.forEach(
          (validation: {
            name: string;
            validator: string;
            message: string;
          }) => {
            if (validation.validator === 'required')
              controlValidators.push(Validators.required);
            if (validation.validator === 'email')
              controlValidators.push(Validators.email);
            // Add more built-in validators as needed
          }
        );
      }

      formGroup[control.name] = [control.value || '', controlValidators];
    });

    this.dynamicForm = this.fb.group(formGroup);
  }

  getErrorMessage(control: any) {
    const formControl = this.dynamicForm.get(control.name);

    if (!formControl) {
      return '';
    }

    for (let validation of control.validations) {
      if (formControl.hasError(validation.name)) {
        return validation.message;
      }
    }

    return '';
  }

  onSubmit() {
    if (!this.dynamicForm.valid) {
      this.dynamicForm.markAllAsTouched();
      return;
    }
    console.log(this.dynamicForm.value);
  }
}
```

Step 7: Import `bootstrap.css` in `style.css/scss` file

```css
@import "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css";
```

**Step 8: Display the Form in the Template**
Update the `dynamic-form.component.html` file to display the dynamic form:

```html
<div class="card">
  <div class="card-body">
    <form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
      <div class="row">
        <div *ngFor="let control of formStructure" class="col-3">
          <!-- Text, Textarea & Number -->
          <div
            class="mb-3"
            *ngIf="['text', 'number', 'textarea'].includes(control.type)"
          >
            <label for="exampleFormControlInput1" class="form-label">
              {{ control.label }}
            </label>
            <input
              [type]="control.type"
              class="form-control"
              [formControlName]="control.name"
              *ngIf="control.type !== 'textarea'"
            />
            <textarea
              class="form-control"
              [formControlName]="control.name"
              *ngIf="control.type === 'textarea'"
            >
            </textarea>
            <span
              class="error"
              *ngIf="
                dynamicForm.controls[control.name]?.invalid &&
                dynamicForm.controls[control.name]?.touched
              "
            >
              {{ getErrorMessage(control) }}
            </span>
          </div>

          <!-- Radio Button -->
          <div class="mb-3" *ngIf="['radio'].includes(control.type)">
            <div>
              <label for="exampleFormControlInput1" class="form-label">
                {{ control.label }}
              </label>
            </div>
            <div
              class="form-check form-check-inline"
              *ngFor="let option of control.options"
            >
              <input
                class="form-check-input"
                type="radio"
                [formControlName]="control.name"
                id="inlineRadio1"
                [value]="option.value"
              />
              <label class="form-check-label" for="inlineRadio1">
                {{ option.label }}</label
              >
            </div>
          </div>

          <!-- Select  -->
          <div class="mb-3" *ngIf="['select'].includes(control.type)">
            <label for="exampleFormControlInput1" class="form-label">
              {{ control.label }}
            </label>
            <select
              class="form-select"
              aria-label="Default select example"
              [formControlName]="control.name"
            >
              <option selected>-Select-</option>
              <option
                *ngFor="let option of control.options"
                [value]="option.value"
              >
                {{ option.label }}
              </option>
            </select>
            <span
              class="error"
              *ngIf="
                dynamicForm.controls[control.name]?.invalid &&
                dynamicForm.controls[control.name]?.touched
              "
            >
              {{ getErrorMessage(control) }}
            </span>
          </div>
        </div>
      </div>

      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</div>

```
**Step 9: Integrate the Dynamic Form Component**
Integrate the DynamicFormComponent into your main application by adding it to the `app.component.html` file or any other desired location.

```html
<app-dynamic-form></app-dynamic-form>
```
**Step 10: Run Your Angular Application**
Run your Angular application to see the dynamically generated form in action:

```bash
ng serve
```
Visit `http://localhost:4200/` in your browser to interact with the dynamic form.

**Output**

![dynamicform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1omp4qvsvw5023f4omg7.png)




## Conclusion
In this blog post, we explored the concept of dynamic forms in Angular and how JSON can be leveraged to define the structure of these forms. By using Angular Reactive Forms and dynamically generating form controls based on JSON configuration, developers can create flexible and adaptive forms that cater to diverse requirements. This approach enhances maintainability and makes it easier to handle dynamic form scenarios in Angular applications.

Tips for optimizing the build process of an Angular application.

Balaji — Mon, 30 Oct 2023 17:26:52 +0000

Introduction

Angular is a popular and powerful framework for building web applications, but as your project grows, it can become challenging to maintain optimal performance. In this blog, we will explore strategies to optimize Angular applications, and we'll provide real-world examples to illustrate these concepts. Let's dive in!

1. Lazy Loading Modules

Lazy loading is a fundamental technique for optimizing Angular applications. It allows you to load modules and components only when they are needed, reducing the initial loading time and improving user experience.

Example: Suppose you have a large e-commerce site with multiple feature modules like product listing, cart, and checkout. By lazy loading these modules, you can ensure that only the necessary code is loaded when a user visits a specific page.



const routes: Routes = [
  { path: 'products', loadChildren: () => import('./product/product.module').then(m => m.ProductModule) },
  { path: 'cart', loadChildren: () => import('./cart/cart.module').then(m => m.CartModule) },
  { path: 'checkout', loadChildren: () => import('./checkout/checkout.module').then(m => m.CheckoutModule) },
];

2. Tree Shaking

Tree shaking is a technique to eliminate unused code from your application. In Angular, this can be achieved by configuring your build tools and using ES6 modules effectively.

Example: When you import third-party libraries or modules, only import the parts of the library that you actually use. For example:



// Bad practice - importing the entire library
import * as moment from 'moment';

// Good practice - importing only what you need
import { format, parse } from 'moment';

3. Minify and Compress

Minifying your JavaScript code and enabling compression can significantly reduce the size of your application bundles, leading to faster loading times.

Example: Use tools like UglifyJS for minification and enable Gzip or Brotli compression on your web server to serve compressed assets. You can configure this in your server settings or use a CDN that offers compression.

4. Lazy Loading Images

Lazy-loading images can dramatically improve initial page load times. Images outside the viewport are only loaded when the user scrolls down, reducing the initial page weight.

Example: In your HTML, use the loading="lazy" attribute for images to enable native browser lazy loading:



<img src="image.jpg" alt="Lazy-loaded image" loading="lazy">

5. Service Workers for Offline Support

Service workers can cache your application assets, allowing your Angular app to work offline or in low-network conditions. This improves user experience and reduces the load on your server.

Example: Implement a service worker using libraries like @angular/service-worker or Workbox to cache your app's assets. This allows users to access your application even when they are offline.

6. Route Guards

Route guards can prevent unnecessary loading of modules and components. By using guards, you can control access to specific routes based on user roles or other criteria.

Example: Create an authentication guard to protect routes that require authentication. This ensures that unauthorized users don't load unnecessary components or data.



import { CanActivate } from '@angular/router';

export class AuthGuard implements CanActivate {
  canActivate(): boolean {
    // Check if the user is authenticated
    return true; // Or implement your logic here
  }
}

7. Minify and Bundle CSS and JavaScript

Minifying and bundling CSS and JavaScript files can reduce the number of requests made to the server, improving load times.

Example: You can configure the Angular CLI to extract styles into separate CSS files, minify them, and generate source maps for debugging using the --extract-css and --source-map options when building your application:



ng build --extract-css --source-map

8. Optimize Bundle Splitting

Bundle splitting is crucial for efficient loading. Angular CLI allows you to configure and optimize your application's bundle splitting strategy.

Example: In your Angular CLI configuration (angular.json), you can customize your build options. For example, you can configure the optimization.splitChunks section to fine-tune how your application's code is split into chunks.



"optimization": {
  "splitChunks": {
    "chunks": "all",
    // Add more options as needed
  }
}

Conclusion

Optimizing Angular applications is essential for delivering a fast, responsive, and user-friendly web experience. By implementing techniques like lazy loading, tree shaking, minification, lazy loading images, service workers, and route guards, Minify and Bundle CSS and JavaScript, Optimize Bundle Splitting you can significantly enhance the performance of your Angular app. These optimizations not only benefit your users but also reduce your server load and hosting costs. Start applying these strategies today to make your Angular application shine.

How to Run an Angular/React/Vue Build Locally

Balaji — Wed, 03 Aug 2022 08:54:00 +0000

In this article, I will share how to test production build locally with node.js.

Create a file in main directory and provide any name along with .js extension (Example:run-build.js)
Copy below code and paste it in your file.
Provide build path along with directory name
Run this command in command prompt node run-build.js
Now your app is running in 9000 port.

const express = require('express');
const path = require('path');
const app = express();

/**
 * Instead of build provide your build directory.
 */
app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function (req, res) {
    res.sendFile(path.join(__dirname, 'build ', 'index.html'));
});

var server = app.listen(9000, () => {
    var port = server.address().port;
    console.log('App listening at http://localhost:' + port);
    require('child_process').exec(`start http://localhost:${server.address().port}`);
});

Server-side rendering (SSR) with Angular Universal

Balaji — Wed, 23 Feb 2022 07:53:46 +0000

Angular Server-side rendering(SSR) with Angular Universal

Angular Universal, a technology that renders Angular applications on the server.

In this post we will walk through Server-side rendering(SSR) with Angular Universal step by step.

Installation

Use the package manager universal to install universal.

ng add @nguniversal/express-engine

Updated Filles after installation

src/
  index.html                 app web page
  main.ts                    bootstrapper for client app
  main.server.ts             * bootstrapper for server app
  style.css                  styles for the app
  app/ ...                   application code
    app.server.module.ts     * server-side application module
server.ts                    * express web server
tsconfig.json                TypeScript base configuration
tsconfig.app.json            TypeScript browser application configuration
tsconfig.server.json         TypeScript server application configuration
tsconfig.spec.json           TypeScript tests configuration

angular.json

 "outputPath": "dist/angular-poc",
 // Replace below Command in place of above one
 "outputPath": "dist/angular-poc/browser",

Include below configuration into angular.json file

{
  "server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
      "outputPath": "dist/angular-poc/server",
      "main": "server.ts",
      "tsConfig": "tsconfig.server.json",
      "inlineStyleLanguage": "scss"
    },
    "configurations": {
      "production": {
        "outputHashing": "media",
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
          }
        ]
      },
      "development": {
        "optimization": false,
        "sourceMap": true,
        "extractLicenses": false
      }
    },
    "defaultConfiguration": "production"
  },
  "serve-ssr": {
    "builder": "@nguniversal/builders:ssr-dev-server",
    "configurations": {
      "development": {
        "browserTarget": "angular-poc:build:development",
        "serverTarget": "angular-poc:server:development"
      },
      "production": {
        "browserTarget": "angular-poc:build:production",
        "serverTarget": "angular-poc:server:production"
      }
    },
    "defaultConfiguration": "development"
  },
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "routes": ["/"]
    },
    "configurations": {
      "production": {
        "browserTarget": "angular-poc:build:production",
        "serverTarget": "angular-poc:server:production"
      },
      "development": {
        "browserTarget": "angular-poc:build:development",
        "serverTarget": "angular-poc:server:development"
      }
    },
    "defaultConfiguration": "production"
  }
}

src/app/app.module.ts

Add below code instead of BrowserModule

BrowserModule.withServerTransition({ appId: "serverApp" });

src/app/app.server.module.ts

Create a new file inside src/app folder

import { NgModule } from "@angular/core";
import { ServerModule } from "@angular/platform-server";

import { AppModule } from "./app.module";
import { AppComponent } from "./app.component";

@NgModule({
  imports: [AppModule, ServerModule],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

src/main.server.ts

Create a new file inside the project directory

/***************************************************************************************************
 * Initialize the server environment - for example, adding DOM built-in types to the global scope.
 *
 * NOTE:
 * This import must come before any imports (direct or transitive) that rely on DOM built-ins being
 * available, such as `@angular/elements`.
 */
import "@angular/platform-server/init";

import { enableProdMode } from "@angular/core";

import { environment } from "./environments/environment";

if (environment.production) {
  enableProdMode();
}

export { AppServerModule } from "./app/app.server.module";
export { renderModule, renderModuleFactory } from "@angular/platform-server";

src/main.ts

Add below code instead of platformBrowserDynamic().bootstrapModule(AppModule)

document.addEventListener("DOMContentLoaded", () => {
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((err) => console.error(err));
});

tsconfig.server.json

Create a new file inside main directory

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "./out-tsc/server",
    "target": "es2019",
    "types": ["node"]
  },
  "files": ["src/main.server.ts", "server.ts"],
  "angularCompilerOptions": {
    "entryModule": "./src/app/app.server.module#AppServerModule"
  }
}

server.js

Create a new file inside project directory

import 'zone.js/dist/zone-node';

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/angular-poc/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // server.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

function run(): void {
  const port = process.env.PORT || 4000;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from './src/main.server';

package.json

Use `dev:ssr` to run app locally

Use `build:ssr` to generate the production build

"scripts": {
 "dev:ssr": "ng run angular-poc:serve-ssr",
 "serve:ssr": "node dist/angular-poc/server/main.js",
 "build:ssr": "ng build && ng run angular-poc:server",
 "prerender": "ng run angular-poc:prerender"
}

 "dependencies": {
  "@angular/platform-server": "~12.2.0",
  "@nguniversal/express-engine": "^12.1.0",
  "express": "^4.15.2"
}

 "devDependencies": {
  "@nguniversal/builders": "^12.1.0",
  "@types/express": "^4.17.0"
}

Usage

npm run dev:ssr

Conclusion

In this article, you learned how to setup Server side rendering with Angular Application.

You can modify the configuration as per your needs.

Github source-code:- https://github.com/balajipatnam/angular/tree/main/ssr

Suggestions are welcome to improve this package.

Configure Prettier and TSLint with Angular

Balaji — Wed, 23 Feb 2022 07:26:01 +0000

In this post I will walk through configuring Tslint and Prettier to angular project step by step.

At some point we will need a lint tool to help us identify possible errors in our code.

In this short article I will explain a practical and quick way to configure Tslint (lint used in JavaScript) coupled with Prettier (Code formatter).

As previously mentioned, Tslint has the function of identifying possible errors and making them visible and used together with Prettier and the perfect junction because Prettier corrects the error.

Note: Lint has removed in Angular 12+ versions

Step1: Add lint architect in the angular.json file

{
  "lint": {
    "builder": "@angular-devkit/build-angular:tslint",
    "options": {
      "tsConfig": [
        "tsconfig.app.json",
        "tsconfig.spec.json",
        "e2e/tsconfig.json"
      ],
      "exclude": ["**/node_modules/**"]
    }
  }
}

Required packages to install:

tslint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters.
prettier is an opinionated code formatter with support for Javscript, Angular,React,Vue HTML, Css
tslint-config-prettier disables all conflicting rules that may cause such problems. Prettier takes care of the formatting whereas tslint takes care of all the other things.

You can read more about prettier here

Step 2: Commands to install following packages tslint , prettier and tslint-config-prettier

Npm Command

npm install --save-dev tslint tslint-config-prettier prettier

Yarn Command

yarn add --dev tslint tslint-config-prettier prettier

Step 3: Create .prettierrc file and add following code

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}

Step 4: Create .prettierignore file and add following code

package.json
package-lock.json
yarn.lock
node_modules

Step 5: Create tslint.json file and add following code

{
  "extends": ["tslint:recommended", "tslint-config-prettier"],
  "rules": {
    "align": {
      "options": ["parameters", "statements"]
    },
    "array-type": false,
    "arrow-return-shorthand": true,
    "curly": true,
    "deprecation": {
      "severity": "warning"
    },
    "component-class-suffix": true,
    "contextual-lifecycle": true,
    "directive-class-suffix": true,
    "directive-selector": [true, "attribute", "app", "camelCase"],
    "component-selector": [true, "element", "app", "kebab-case"],
    "eofline": true,
    "import-blacklist": [true, "rxjs/Rx"],
    "import-spacing": true,
    "max-classes-per-file": false,
    "max-line-length": [true, 280],
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-console": "error",
    "no-unused-variable": [
      true,
      {
        "ignore-pattern": "^_"
      }
    ],
    "no-empty": false,
    "no-inferrable-types": [true, "ignore-params"],
    "no-non-null-assertion": true,
    "no-redundant-jsdoc": true,
    "no-switch-case-fall-through": true,
    "no-var-requires": false,
    "object-literal-key-quotes": [true, "as-needed"],
    "quotemark": [true, "single"],
    "semicolon": {
      "options": ["always"]
    },
    "space-before-function-paren": {
      "options": {
        "anonymous": "never",
        "asyncArrow": "always",
        "constructor": "never",
        "method": "never",
        "named": "never"
      }
    },
    "typedef-whitespace": {
      "options": [
        {
          "call-signature": "nospace",
          "index-signature": "nospace",
          "parameter": "nospace",
          "property-declaration": "nospace",
          "variable-declaration": "nospace"
        },
        {
          "call-signature": "onespace",
          "index-signature": "onespace",
          "parameter": "onespace",
          "property-declaration": "onespace",
          "variable-declaration": "onespace"
        }
      ]
    },
    "variable-name": {
      "options": ["ban-keywords", "check-format", "allow-pascal-case"]
    },
    "whitespace": {
      "options": [
        "check-branch",
        "check-decl",
        "check-operator",
        "check-separator",
        "check-type",
        "check-typecast"
      ]
    },
    "no-conflicting-lifecycle": true,
    "no-host-metadata-property": false,
    "no-input-rename": true,
    "no-inputs-metadata-property": true,
    "no-output-native": true,
    "no-output-on-prefix": true,
    "no-output-rename": true,
    "no-outputs-metadata-property": true,
    "template-banana-in-box": true,
    "template-no-negated-async": true,
    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": true
  },
  "rulesDirectory": ["codelyzer"]
}

Step 6: Add Husky and pretty-quick to run prettier in your staged files

Npm Command

npm install --save-dev husky pretty-quick

Yarn Command

yarn add --dev husky pretty-quick

Step 7: Add this code in the package.json

"husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged --check && ng lint && npm run format"
    }
  }

Step 8: Add followed two properties inside scripts in package.json

"scripts": {
   "lint": "ng lint",
   "format": "prettier --write ."
},

Usage

npm run lint

Troubleshooting

When the hooks not picking while pre-commit follow below process

rm -rf .git/hooks
npm i --save-dev husky@4.3.8

Conclusion

In this article, you learned how to setup Prettier and Tslint with Angular Application.

You can modify the configuration as per your needs.

Github source-code:- https://github.com/balajipatnam/angular/tree/main/lint

Suggestions are welcome to improve this package.

DEV Community: Balaji

⚡️Understanding angular dynamic forms with JSON data

What are Dynamic Forms?

Creating a Simple Dynamic Form

Tips for optimizing the build process of an Angular application.

Introduction

1. Lazy Loading Modules

2. Tree Shaking

3. Minify and Compress

4. Lazy Loading Images

5. Service Workers for Offline Support

6. Route Guards

7. Minify and Bundle CSS and JavaScript

8. Optimize Bundle Splitting

How to Run an Angular/React/Vue Build Locally

Server-side rendering (SSR) with Angular Universal

Angular Server-side rendering(SSR) with Angular Universal

Installation

Updated Filles after installation

angular.json

src/app/app.module.ts

src/app/app.server.module.ts

src/main.server.ts

src/main.ts

tsconfig.server.json

server.js

package.json

Use dev:ssr to run app locally

Use build:ssr to generate the production build

Usage

Conclusion

Configure Prettier and TSLint with Angular

Usage

Troubleshooting

Conclusion

Use `dev:ssr` to run app locally

Use `build:ssr` to generate the production build