The goal of this project is to showcase an nx workspace, where the main-app (main-app
) uses a web-component, which is the result of the build process of another app (wc-app
)
Run npx nx serve main-app
and npx nx serve wc-app
Playground app will run on port 4200
and wc-app will run on port 4210
.
Open http://localhost:4200
in the browser and have a look at it.
Note: main-app has to be manually refreshed in the browser if a change is made to wc-app.
The build process of the wc-app
uses an npm plugin called ngx-build-plus
to extend the default behaviour.
We use two flags of the plugin:
- singleBuild
- keepStyles
You can find both of these settings in the angular.json
file.
- Multiple Angular Apps on a single page
- ngx-build-plus
- Official Angular Elements Docs
- Building Web Components with Angular
- Routing artcile
- ngx routing plugin
- Routing within a Web Component
Did I forget something? Drop a PR or a message: marcellkiss@budacode.com