Hello everyone we just …
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 ?
Responses:
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!