Nx: 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



md5-d951c875a59cb1d0bbbe599ce4426722



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?