CODEWITHSUNDEEP
angularuuid
k.vincent
k.vincent

Reputation: 4143

How to generate UUID with angular 2?

I'm using Angular 2 for a signup form: first name, last name, email and password.

After submit, the data is being stored via API call in a database (nodeJs and mongo) and generates a JWT Token which is sent back to the client.

Now I should add/generate an UUID (Universal Unique Identifier). As I never have done this kind of feature before, I need an approach and idea/solution how to achieve this... would the JWT Token be a kind of alternative to UUID? If yes, this would be enough.

Otherwise I would prefer to avoid any big changes on the form or its functionality.

I Have been searching, but didn't find a useful solution. I tried the npm package angular2-uuid, but after installing it as dependency, the ng build -prod throws an error which isn't clear.

import { UUID } from 'angular2-uuid';
....
let uuid = UUID.UUID();

Error:

ERROR in ./~/@angular/flex-layout/@angular/flex-layout.es5.js Module build failed: Error: ENOENT: no such file or directory, open '/Users/username/dev/app/node_modules/@angular/flex- layout/@angular/flex-layout.es5.js' @ ./src/$$_gendir/app/app.module.ngfactory.ts 25:0-44 @ ./src/main.ts @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

Any idea or Hint please?

Upvotes: 38

Views: 48425

Answers (4)

New-Way
New-Way

Reputation: 657

For Angular 11+

  1. npm i uuid
  2. In your component, at the top where your imports are, add import { v4 as uuidv4 } from 'uuid';
  3. To test this:
ngOnInit() {
  console.log('new uid: ', uuidv4());
}

Upvotes: 2

Zolcsi
Zolcsi

Reputation: 2046

It's downloaded as a part of Angular's dependency, use it like:

import { v4 as uuid } from 'uuid';

@Component(..)
export class AppComponent {

  console.log('new uid: ', uuid());
}

Upvotes: 112

k.vincent
k.vincent

Reputation: 4143

Issue fixed. Solution: I found out that when I did install the package angular2-uuid via command-line, it was automatically stored in package.json directly before/over the package: @angular/flex-layout.

As the error was in a way not clear, I just did remove it to other position in the: package.json and the error is gone. everything works fine.

Upvotes: 0

federico scamuzzi
federico scamuzzi

Reputation: 3778

try this (https://github.com/wulfsolter/angular2-uuid)

As the doc say :

import { UuidService } from 'angular2-uuid';

constructor(private uuid: UuidService) //<-- pass it in contructor as service

const uuid = this.uuid.generate(); //<-- use it

Hope it helps you! ..as you can see it changed a little bit from what it report here (https://www.npmjs.com/package/angular2-uuid)

Upvotes: -1

Related Questions