8. Share UI with web components - Nx Workspaces Course, by Nrwl
This course introduces you to the essential features of https://nx.dev, created by https://nrwl.io. Get the Advanced NX Workspaces Course at https://nxplaybook.com.
Main Ideas in this module:
Create a web components library
Use web components in Angular and React code
Delete an unused library
Transcript of this module:
This tile UI is used on both the review site and the store site. Let's share this UI between the two apps using web components.
We'll create a new web library called ui-tile in the shared directory. Then we'll add a few simple custom elements. Then add some types so these custom elements will work correctly in a *.tsx file. We'll add a separate file to inject the tile styles into the page. We'll create a style tag, set it's text content then append that element to the body. Finally, we'll make sure to import that styles file in the main file.
Now we'll update our Angular component to use the web component and make sure to import the custom component library in the Typescript file. Now we don't need these styles and we need to remember to add the CUSTOM_ELEMENTS_SCHEMA in our module.
Now let's update the React component. We can ignore these imports, import our custom component library and then update the jsx. We no longer need the review-ui-tile library, so we'll delete that folder and delete all references to it in the tsconfig.json file, in the nx.json file and the workspace.json file.
Now let's make sure our sites still work. The Review site is rendering correctly and so is the Store site.
Let's take a look at the dependency graph. Here's our shared-ui-tile library that is being used by an Angular store-feature-list library and the React review-feature-list library.