

Let's look a new generator to create custom elements from any Angular components in your workspace to use in another framework like React.
Whether you work in a large enterprise among diverse development teams using different technology stacks or just a startup wanting to make the right decision on how to build out your company's technology from square one, Nx provides peace of mind.
npm i -g @nrwl/schematics
create-nx-workspace mycompany
// At the prompts:
// "Which stylesheet format would you like to use?": Choose "SCSS" for this example.
// "What is the npm scope you would like to use for your Nx Workspace?": Type "mycompany"
// "What to create in the new workspace": Choose "empty"
cd mycompany
ng add @nstudio/schematics --prefix=foo --platforms=web
ng g app myapp --routing=true --style=scss
// At the prompts:
// "In which directory should the application be generated?": Just hit Enter key on keyboard to accept default "apps" directory.
// "Which Unit Test Runner would you like to use for the application?": Choose any you prefer.
// "Which E2E Test Runner would you like to use for the application?": Choose any you prefer.
// "Which tags would you like to add to the application?": Just hit Enter for this example.
// "What framework would you like to use for the application?": Choose "Angular"
ng g component menu --platforms=web
ng g component footer --platforms=web
Nx
An open source toolkit for enterprise Angular applications. Nx is designed to
help you create and build enterprise grade Angular applications. It provides
an opinionated approach to application project structure and patterns.
Quick Start & Documentation
Watch a 5-minute video on how to get started with Nx.
{{ 'welcome' | translate }}!
Try things out
Learn more about xplat.
>
ng g elements ui-kit --barrel=@mycompany/web --components=menu,footer
import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';
import { MenuComponent, FooterComponent } from '@mycompany/web';
@NgModule({
imports: [BrowserModule],
entryComponents: [MenuComponent, FooterComponent]
})
export class UiKitModule {
constructor(private injector: Injector) {}
ngDoBootstrap() {
let component;
component = createCustomElement(MenuComponent, { injector: this.injector });
customElements.define('foo-menu', component);
component = createCustomElement(FooterComponent, {
injector: this.injector
});
customElements.define('foo-footer', component);
}
}
npm install
npm run build.web.elements
npm run preview.web.elements
ng g component dropdown --platforms=web
ng g component link --platforms=web
ng g elements widgets --barrel=@mycompany/web --components=dropdown,link
npm run build.web.elements
npm run preview.web.elements
ng g elements --builderModule=ui-kit
ng g app reactapp --framework=react
// At the prompts:
// "In which directory should the application be generated?": Just hit Enter key on keyboard to accept default "apps" directory.
// "Which Unit Test Runner would you like to use for the application?": Choose any you prefer.
// "Which E2E Test Runner would you like to use for the application?": Choose any you prefer.
// "Which tags would you like to add to the application?": Just hit Enter for this example.
declare namespace JSX {
interface IntrinsicElements {
[elemName: string]: any;
}
}
"web-reactapp": {
"root": "apps/web-reactapp/",
...,
"architect": {
"build": {
"builder": "@nrwl/builders:web-build",
"options": {
...,
"scripts": [
"dist/ngelements/polyfills.js",
"dist/ngelements/main.js"
]
},