Wednesday, 15 February 2023

Nodejs - How to switch Nodejs version between projects [Windows]

Step 1: Install Node Version Manager (NVM)

Instead of using npm to install and uninstall Node versions for your different projects, you can use nvm, which helps you effectively manage your node versions for each project.

  • Download nvm from the below link 

https://github.com/coreybutler/nvm-windows/releases/download/1.1.10/nvm-setup.exe

 

Step 2: Make sure you have set the environment variables for nvm and nodejs as




Step 3: Open the terminal and run as administrator

  • Verify your current nodejs and nvm version by using the commands 
node -v and nvm -v


  • I would like to downgrade node version from v18.14.0 to v12.14.1.
  • Use the command nvm install 12.14.1 and once the installation complete, execute the command nvm use 12.14.1 which helps you to switch the node versions.



Step 4: To list all your node versions, 

use the command nvm list and it will highlight the current version as well












 



at No comments:

Node.js – Create a Basic Node.js Project Using TypeScript

Step 1: 

Initialize Node.js using the command npm init -y and then npm install.

Step 2: 

Install typescript globally using the command npm install -g typescript

This provides the typescript compiler which makes it possible to compile Typescript code into JavaScript

Step 3: 

Install the following dependencies. As you are using typescript, install all the modules using @types/ at the front in order to use import in the .ts files.

  • ts-node
  • express
  • @types/express
  • nodemon

Step 4: 

Initialize TypeScript using the command tsc -init. This would create the tsconfig.json file.

Update tsconfig.json with the following settings

{
  "compilerOptions": {
    "target": "es2016",                                  
    "module": "commonjs",                               
    "esModuleInterop": true,     
     "outDir": "./dist",                      
    "forceConsistentCasingInFileNames": true,           
    "strict": true,                                   
    "skipLibCheck": true                  
  }
}

Step 5:

Update package.json file to specify the startup.

"main": "index.js",
  "scripts": {
    "build": "npx tsc",
    "start": "node dist/index.js",
    "dev": "concurrently \"npx tsc --watch\" \"nodemon -q dist/index.js\""
  }

use npm run dev command to start the server after creating the index.ts file.

Step 6:

Create index.ts file with the basic code.

import express, { Express, Request, Response } from 'express';
import dotenv from 'dotenv';

dotenv.config();

const app: Express = express();
const port = process.env.PORT || 8081;

app.get('/', async (req: Request, res: Response) => {  
    res.send('Express + TypeScript Server');
});

app.listen(port, () => {
    console.log(`⚡️[server]: Server is running at http://localhost:${port}`);
});

Step 7:

Execute the project using the command.

npm run dev

Step 8:

Output:




at No comments:

Thursday, 12 August 2021

Custom Elements Mapping between index.html and Angular Component

Create New Angular Project:


ng new App

ng add @angular/elements

npm install document-register-element

ng generate component custom-button



Create Custom Element:

app.module.ts:

import {Injector} from '@angular/core';
import { CustomButtonComponent } from './custom-button/custom-button.component';
import { createCustomElement } from '@angular/elements';

export class AppModule{
  constructor(private injector: Injector) {
      const element = createCustomElement(CustomButtonComponent, {
        injector: this.injector
      });

      customElements.define('custom-button', element);
  }
}

angular.json
->custom-button->architect->build->scripts object we need to add:
{
   "input": "node_modules/document-register-element
            /build/document-register-element.js"
}

Run this command in terminal:

ng build --prod --output-hashing=none && 
            cat dist/App/runtime-es5.js 
            dist/App/polyfills-es5.js 
            dist/App/scripts.js 
            dist/App/main-es5.js > 
            dist/App/index.js

 index.html

<head>

<script src="./dist/custom-button/index.js"></script>

</head>

<body>
<app-root></app-root>

<custom-button label="Reset"></custom-button>

<script src="./dist/custom-button/index.js"></script>

<body>


custom-button.component.html

<p>Custom Button works!</p>
<p-button label="{{buttonLabel}}"></p-button>

custom-button.component.ts
@Input('label') buttonLabel: any;


Output:




at No comments:

Sunday, 27 September 2020

Angular - Get Hours, Minutes, meridiem (AM / PM) using moment on matInput type="time"

selected Time from Material TimePicker = '02:18 AM'

.html

<input matInput type="time" [(ngModel)]="inputTime" (ngModelChange)="changeTime()" />


.ts

inputTime: string;


changeTime() {

    const hours = moment(this.inputTime,  'HH').hours();

    const minutes = moment(this.inputTime, 'HH:mm').minutes();

    const meridiem = hours > 12 ? 'PM' : 'AM' ;

    this.inputTime = `${hours}:${minutes}` //Output : 2:18 


   // to get output with leading zero's:

    this.inputTime = `${this. setLeadingZero(hours)}:${this. setLeadingZero(minutes)}` //Output : 02:18

 

    Output:

    console.log(hours); => //Output : 2

    console.log(minutes); => //Output : 18

    console.log(meridiem); => //Output : AM

}

// function to get leading zero's:

setLeadingZero(hour: number) {

  return ('0' + hour).slice(-2)

}

at 3 comments:
Subscribe to: Posts (Atom)

Nodejs - How to switch Nodejs version between projects [Windows]

Step 1: Install Node Version Manager (NVM) Instead of using npm to install and uninstall Node versions for your different projects, you can ...