What are the differences between a @nrwl/js library and a @nrwl/workspace library?

Question

I have created both in a testing environment but am still having trouble to differentiate between the use cases of the two. They both have the same file structure, slightly different tsconfig.json file, @nrwl/js library is stricter by 2 extra props. Otherwise they seem to be the same. On the official site there is no info regarding the differences between the two.

Any help is appreciated.

Vachil

wondering the same thing myself – Stringendo

Same. Would really appreciate it if someone from nrwl could comment! – Fulgurite

Answer 1

@nrwl/js:library

Use to generate a generic typescript library.

npx nx g @nrwl/js:library --name myLibrary --directory common --buildable # creates libs/common/my-library

@nrwl/workspace:library

Use to generate a UI focused typescript library.

npx nx g @nrwl/workspace:library --name myLibrary --directory common --buildable # creates libs/common/my-library

Differences

1. @nrwl/workspace:library has a .babelrc file that is not present in @nrwl/js:library
2. @nrwl/workspace:library has a jest.config.ts that supports .tsx files while @nrwl/js:library only supports .ts files
3. The tsconfig files are different

How I found the differences

I created a library using each generator

npx nx g @nrwl/js:library --name library --directory common/nrwljs --buildable
npx nx g @nrwl/workspace:library --name library --directory common/nrwlworkspace --buildable

Then I compared the files of each

diff -rq libs/common/nrwljs/library libs/common/nrwlworkspace/
Only in libs/common/nrwlworkspace/library: .babelrc
Files libs/common/nrwljs/library/README.md and libs/common/nrwlworkspace/library/README.md differ
Files libs/common/nrwljs/library/jest.config.ts and libs/common/nrwlworkspace/library/jest.config.ts differ
Files libs/common/nrwljs/library/package.json and libs/common/nrwlworkspace/library/package.json differ
Files libs/common/nrwljs/library/project.json and libs/common/nrwlworkspace/library/project.json differ
Files libs/common/nrwljs/library/src/index.ts and libs/common/nrwlworkspace/library/src/index.ts differ
Only in libs/common/nrwljs/library/src/lib: common-nrwljs-library.spec.ts
Only in libs/common/nrwljs/library/src/lib: common-nrwljs-library.ts
Only in libs/common/nrwlworkspace/library/src/lib: common-nrwlworkspace-library.spec.ts
Only in libs/common/nrwlworkspace/library/src/lib: common-nrwlworkspace-library.ts
Files libs/common/nrwljs/library/tsconfig.json and libs/common/nrwlworkspace/library/tsconfig.json differ
Files libs/common/nrwljs/library/tsconfig.lib.json and libs/common/nrwlworkspace/library/tsconfig.lib.json differ
Files libs/common/nrwljs/library/tsconfig.spec.json and libs/common/nrwlworkspace/library/tsconfig.spec.json differ

Mindy

Also according to docs, @nrwl/workspace:library is now deprecated and would be removed in Nx v16. – Mg

👍🏽 for "How I found the differences". The best way to learn about NX is comparing generated code (besides digging into the code) – Euphemize

Answer 2

It's about the options you can use for each generator. Here are the documentation of the generators:

• https://nx.dev/packages/workspace/generators/library
• https://nx.dev/packages/angular/generators/library

Angular generator has some specific options, eg to include routing or lazy behaviours.

Trimurti