Hello everyone we just …

1 minute read

Hello everyone, we just switched our Angular Project to Nx. Now we are trying to define module bounderies. Is there a way to prevent UI libs from importing state related things from @ngrx ?


hey cool!

yeah, you can basically have your UI related stuff in one place, usually libs/shared/ui-some-cool-stuff and tag that in nx.json accordingly. Like

"ui-some-cool-stuff": { "tags": ["type:ui"] },

same thing for the ngrx state. That would live in a separate library just dealing with state and having a tag type:state (or similar)

Hey Patrick welcome! As juri said yes you can! Define your tags on your libs and then in tslint define your boundary as type:ui cannot import type:state

and then in your tslint.json there should be a nx-enforce-module-boundaries where you can specify the rules about which type of lib can depend on which other type of lib

like { "sourceTag": "type:ui", "onlyDependOnLibsWithTags": ["type:util", "type:ui"] }, ..or whatever makes sense to you :slightly_smiling_face:

Looks like juri is on it!

We have some videos that walk through these things in more detail on our https://nxplaybook.com/ course

as well as here: https://nx.dev/angular/guides/monorepo-tags

Wow, that was a quick response ! Thank you :muscle:

My question was more like: { "sourceTag": "type:ui", "prevent": ["@ngrx/store"] }

So that non of our devs imports and uses the @ngrx/store in pure UI components

now the restrictions are at the lib level atm. So you need to create a different library for the state part

> So that non of our devs imports and uses the @ngrx/store in pure UI components Yeah makes sense. We usually split them up into different libraries

I don’t believe that is possible. You would have to tag each UI lib and each state lib then prevent that. I don’t believe there is a way to prevent imports from external libs

But that’s a good idea!

which also makes sense in terms of build speed

could be a feature to think about :thinking_face:

Well actually you don’t need nx to do it. Add ngrx as a blacklist in the tslint of your lib

Then it’ll override your project tslint for just that lib

Ah, just found https://palantir.github.io/tslint/rules/import-blacklist/

That’s the one!

Cool, will try - thank you for the hint!

You are welcome!