Add @nrwl/angular:elements

[xmlking]

Is there any difference how code is generated when using preset=angular vs preset=web-components ?

ng new myspace --collection=@nrwl/workspace --preset=angular 

ng new myspace --collection=@nrwl/workspace --preset=web-components

It would be nice to be able to add web-components micro-app to existing workspace e.g.,

ng g @nrwl/angular:web-components chatApp 

[FrozenPandaz]

--preset web-components does not use Angular or any framework at all. The way I imagine this would work in the future is you can do ng g @nrwl/web:component fancy-button (it's not there yet). Then you would be able to use that within an Angular or React app.

[xmlking]

creating a web-component a.k.a MicroApp using Angular Elements in nx workspace could be complex multi-step process... Ref: @manfredsteyer https://www.softwarearchitekt.at/post/2018/05/04/microservice-clients-with-web-components-using-angular-elements-dreams-of-the-near-future.aspx

would be nice, if we provide @nrwl/angular:elements schematics to make this process easy for nx community.

generic ng g @nrwl/web:component fancy-button could be used for user to add their prefered framework later (svelte, vue , react or angular)

[alejandrogkl]

HI, i was looking for tutorials of how to re-architect an angular SPA that is getting bigger.

One of the possibilities is a Shell App that load multiple micro apps or micro frontends

The SPA is currently using NX ( Excellent work by the way @vsavkin and team ) and the potential micro apps are in separated micro-app libraries with a lot of internally lazy loaded modules

I found a lot of recommendations, but one in particular

https://www.softwarearchitekt.at/aktuelles/6-steps-to-your-angular-based-microfrontend-shell/

I think is the continuation of the one you @xmlking mention, but i still have a couple of questions that maybe you can help me answer

1 - How could be possible to load the micro apps in chunks ( like a normal SPA with lazy load ) and not in a single file? ( since is a multiple step process a micro app could be big enough for a single file )

2 - During development running the entire app (Which is very usual) how to reload the browser when a micro app change?

The concern about the app getting big enough are:

• the test/build/deploy process (just one frontend app, even when we change something is one of the micro apps libraries we have to re-test , re-build, re-deploy the entire frontend app). I think this new feature will help a lot in this area Distributed Caching in Nx

• the development process (Sometimes we want to run just a portion of the app)

Any recommendation will be really appreciated

[arjunasuresh3]

+1

[FrozenPandaz]

Hi, sorry about this.

This was mislabeled as stale. We are testing ways to mark not reproducible issues as stale so that we can focus on actionable items but our initial experiment was too broad and unintentionally labeled this issue as stale.

[LPCmedia]

Are there any plans for an implementation for angular elements ?

[brandonroberts]

Circling back on this and I'm a little unclear to the request ... What is the intended goal?

[LPCmedia]

I guess would be nice to have a builder for angular elements. Something similar to ngx-build-plus but that can compile a lib to one or more elements.

[mehrad-rafigh]

Any news on this? Can the community tackle this @brandonroberts?

[brandonroberts]

No news as of yet. If someone wants to look at creating a community Nx Plugin for it, that would be a good start

[mehrad-rafigh]

@xmlking @LPCmedia should we start a new nx-plugin 🤓?

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[kasius]

any news regarding this?

[aitorllj93]

maybe this can help https://angular-extensions.github.io/elements/#/home

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.