Angular NX

[roblevintennis]

Re-factor to use an X which gives us an app project in /app and a library in /libname

This way we can npm link to test our library from the test app using the usual npm pack'd version of the ng built dist/ files in lib and verify library package is working properly before publishing to NPM.

Storybook

It took me a while to get the common.min.css to show up for the storybook configuration. It looks like in the angular.json, you have to include the global CSS from your "default project" (see issue. I would have preferred to have this in the lib project, but it needed to be in the app project:

            "styles": [
              "libs/ui/styles/common.min.css"
            ],

NX Cheat sheet

Reminder on how I'll likely get this started for the agnostic angular -- I should probably generate a new nx-based angular project and then just port over the files I already have in agnosticui-angular...

---

Experiment

I did a spike and have something locally at:
~workspace/opensource/nxlib/README.md

Basically, what I did:

npm install -g @nrwl/schematics
npx create-nx-workspace --preset=angular
cd nxlib/
npx nx generate @nrwl/angular:lib shared-button
npx nx generate @nrwl/angular:storybook-configuration shared-button
ng g component button --project=shared-button --export
yarn start

Otherwise, it was basically a matter of adding the SharedButtonModule to the application's app.module.ts and then
using the component in the app.component.html:

<main>
  <nxlib-button></nxlib-button>
</main>

UPDATE

Turns out I should have used --publishable with:

npx nx generate @nrwl/angular:lib shared-button --publishable

So planning to do this and then utilize nx remove:

nx g --dry-run @nrwl/angular:lib ag --publishable --importPath agnosticui-angular

Storybook + Package Scripts

Running npx nx help is pretty useful:

  nx run
  [project][:target][:configuration]        Run a target for a project
  [options, ...]                            (e.g., nx run
                                            myapp:serve:production).

                                            You can also use the infix notation
                                            to run a target:
                                            (e.g., nx serve myapp
                                            --configuration=production)

And these map exactly to how the angular.json structure is. For example, mylib:storybook or myapp:serve:production.

References

https://www.thisdot.co/blog/angular-libraries-with-nx-for-enterprise-apps
https://nx.dev/l/a/getting-started/nx-cli
https://nx.dev/l/a/tutorial/08-create-libs

I wrote a hashnode about this:
https://roblevin.hashnode.dev/adventures-in-creating-an-npm-library-with-nrwlnx