如何在Angular 2中生成UUID？

Question

我正在使用Angular 2制作一个注册表单：名字、姓氏、电子邮件和密码。

提交后，通过API调用将数据存储在数据库中（nodeJs和mongo），并生成一个JWT Token发送回客户端。

现在我应该添加/生成UUID（通用唯一标识符）。由于我以前从未做过这种功能，所以我需要一种方法和想法/解决方案来实现这一点...... JWT Token是否是UUID的替代品？如果是，这就足够了。

否则，我希望避免对表单或其功能进行任何重大更改。

我一直在搜索，但没有找到有用的解决方案。我尝试了npm包angular2-uuid，但安装为依赖关系后，ng build -prod会抛出一个不清楚的错误。

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

错误：

在./~/@angular/flex-layout/@angular/flex-layout.es5.js模块中构建失败： 错误：ENOENT：没有这样的文件或目录，打开 '/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

有什么想法或提示吗？

- k.vincent

---

抛出了一个不清楚的错误... 请问有什么想法或提示吗？提示：错误信息是什么？ - StudioTime

@DarrenSweeney：是的，你说得对。抱歉。这里是错误信息：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 实际上，这个错误与安装的“UUID”无关。当我卸载它时，错误就消失了。 - k.vincent

Answer 1

它作为Angular的依赖项之一下载，使用方法如下：

import { v4 as uuid } from 'uuid';

@Component(..)
export class AppComponent {

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

- Zolcsi

---

谢谢，它起作用了！我已经在这里创建了一个演示，供未来的读者参考。不确定它是否是Angular的一部分，我认为使用了这个uuid包。 - cyberpirate92

在执行之前，请确保运行 npm install --save @types/uuid。 - Menelaos Kotsollaris

@MenelaosKotsollaris 你是指 --save-dev 或 -D，所以应该是 npm install --save-dev @types/uuid 或者如果你喜欢缩写格式的话，可以使用 npm i -D @types/uuid。 - Al-Mothafar

Answer 2

适用于 Angular 11+

1. npm i uuid
2. 在你的组件中，在导入模块的顶部添加 import { v4 as uuidv4 } from 'uuid';
3. 测试方法如下：

ngOnInit() {
  console.log('new uid: ', uuidv4());
}

- New-Way

Answer 3

问题已解决。 解决方案：我发现当我通过命令行安装angular2-uuid包时，它会自动存储在 package.json 中，在@angular/flex-layout包之前/覆盖它。

由于错误不是很清楚，我只是将其从package.json中移除到其他位置，然后错误消失了。 一切都正常工作。

- k.vincent

---

angular2-uuid 未经维护，请使用 uuid 包代替。 - Vishnudev Krishnadas

@Vishnudev：2年过去了，你现在这么大声喧哗有点过啦！简短明了的评论反而更好。我不知道为什么会有人踩你的评论！我觉得某些用户只是想要制造噪音和互动罢了！ - k.vincent

如果我的评论有任何冒犯之处，请接受我的道歉。我只是为了让那些仍然来到这篇帖子的人不会得到错误的答案而添加了评论。如果您更新了答案，我会点赞的 :) - Vishnudev Krishnadas

Answer 4

尝试这个 (https://github.com/wulfsolter/angular2-uuid)

正如文档所说：

import { UuidService } from 'angular2-uuid';

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

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

希望能对你有所帮助！正如你所看到的，它与此处报告的略有不同（https://www.npmjs.com/package/angular2-uuid）。

- federico scamuzzi