Building Angular and React Applications Together With Nx

Large companies often use multiple frontend frameworks to build their products. One product can be built with Angular, another one with React. These products, even though are built by different teams using different stacks, often share components and utilities.

Setting this up traditionally is challenging. Companies put a lot of effort in making sure teams can collaborate and use each other's work. Nx drastically simplifies this.

To show how Nx does it, let's build two applications (one in Angular, and one in React) that will use a library of shared web components.

Creating a New Nx Workspace

Let's start by creating a new Nx workspace. The easiest way to do this is to use npx.

npx --ignore-existing create-nx-workspace happynrwl --preset=empty

Add Angular Capabilities

An empty workspace does not have any capabilities to create applications. Add capabilities for Angular development via:

ng add @nrwl/angular

Creating an Angular Application

An empty workspace has no application or libraries: nothing to run and nothing to test. Let's add an Angular application into it via:

ng g @nrwl/angular:app angularapp

The result should look like this:

happynrwl/
├── apps/
│   ├── angularapp/
│   │   ├── src/
│   │   │   ├── app/
│   │   │   │   ├── app.components.css
│   │   │   │   ├── app.components.html
│   │   │   │   ├── app.components.spec.ts
│   │   │   │   ├── app.components.ts
│   │   │   │   └── app.module.ts
│   │   │   ├── assets/
│   │   │   ├── environments/
│   │   │   ├── favicon.ico
│   │   │   ├── index.html
│   │   │   ├── main.ts
│   │   │   ├── polyfills.ts
│   │   │   ├── styles.scss
│   │   │   └── test.ts
│   │   ├── jest.conf.js
│   │   ├── tsconfig.app.json
│   │   ├── browserslist
│   │   ├── tsconfig.json
│   │   ├── tsconfig.spec.json
│   │   └── tslint.json
│   └── angularapp-e2e/
│       ├── src/
│       │   ├── integrations/
│       │   │   └── app.spec.ts
│       │   ├── fixtures/
│       │   ├── plugins/
│       │   └── support/
│       ├── cypress.json
│       ├── tsconfig.e2e.json
│       └── tslint.json
├── libs/
├── README.md
├── angular.json
├── nx.json
├── package.json
├── tools/
├── tsconfig.json
└── tslint.json

The generated main.ts, will look as follows:

1import { enableProdMode } from '@angular/core';
2
3import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
4import { AppModule } from './app/app.module';
5
6import { environment } from './environments/environment';
7
8if (environment.production) {
9  enableProdMode();
10}
11
12platformBrowserDynamic()
13  .bootstrapModule(AppModule)
14  .catch((err) => console.error(err));

And the template of the generated component will look as follows:

1<div style="text-align:center">
2  Welcome to {{title}}!
3  <img
4    width="300"
5    src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png"
6  />
7</div>
8
9<p>This is an Angular app built with <a href="https://nx.dev">Nx</a>.</p>

Adding React Capabilities

Generating a React application is just as easy. First, add capabilities for React development via:

ng add @nrwl/react

Creating a React Application

Create a React application via:

ng g @nrwl/react:app reactapp and this is what we will see:

happynrwl/
├── apps/
│   ├── angularapp/
│   ├── angularapp-e2e/
│   ├── reactapp/
│   │   ├── src/
│   │   │   ├── app/
│   │   │   │   ├── app.css
│   │   │   │   ├── app.spec.tsx
│   │   │   │   └── app.tsx
│   │   │   ├── assets/
│   │   │   ├── environments/
│   │   │   ├── favicon.ico
│   │   │   ├── index.html
│   │   │   ├── main.ts
│   │   │   ├── polyfills.ts
│   │   │   ├── styles.scss
│   │   │   └── test.ts
│   │   ├── browserslist
│   │   ├── jest.conf.js
│   │   ├── tsconfig.app.json
│   │   ├── tsconfig.json
│   │   ├── tsconfig.spec.json
│   │   └── tslint.json
│   └── reactapp-e2e/
│       ├── src/
│       │   ├── integrations/
│       │   │   └── app.spec.ts
│       │   ├── fixtures/
│       │   ├── plugins/
│       │   └── support/
│       ├── cypress.json
│       ├── tsconfig.e2e.json
│       └── tslint.json
├── libs/
├── README.md
├── angular.json
├── nx.json
├── package.json
├── tools/
├── tsconfig.json
└── tslint.json

Where main.ts looks like this:

1import * as React from 'react';
2import * as ReactDOM from 'react-dom';
3
4import { App } from './app/app';
5
6ReactDOM.render(<App />, document.querySelector('happynrwl-root'));

and app.tsx contains the following component:

1import * as React from 'react';
2import { Component } from 'react';
3
4import './app.css';
5
6export class App extends Component {
7  render() {
8    const title = 'reactapp';
9    return (
10      <div>
11        <div style={{ textAlign: 'center' }}>
12          <h1>Welcome to {title}!</h1>
13          <img
14            width="300"
15            src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png"
16          />
17        </div>
18        <p>
19          This is a React app built with <a href="https://nx.dev">Nx</a>.
20        </p>
21      </div>
22    );
23  }
24}

Nx provides a uniform tool for development the commands used for React development are the same as the commands used to develop Angular applications.

ng serve reactapp serves the React app
ng build reactapp builds the React app
ng test reactapp tests the React app using Jest
ng e2e reactapp-e2e tests the React app using Cypress

TypeScript support, Jest, Cypress, source maps, watch mode--all work with React out of the box. If we run ng serve reactapp, we will see the following:

serve screenshot

Creating Shared Components

Nx makes sharing code between applications easy. What used to take days or even weeks, with Nx takes minutes. Say we want to create a ui library of shared components that we will use in both the React and Angular applications.

ng g @nrwl/workspace:lib ui and this is what we will see:

happynrwl/
├── apps/
│   ├── angularapp/
│   ├── angularapp-e2e/
│   ├── reactapp/
│   └── reactapp-e2e/
├── libs/
│   └── ui
│       ├── src/
│       │   ├── lib/
│       │   └── index.ts
│       ├── jest.conf.js
│       ├── tsconfig.lib.json
│       ├── tsconfig.json
│       ├── tsconfig.spec.json
│       └── tslint.json
├── README.md
├── angular.json
├── nx.json
├── package.json
├── tools/
├── tsconfig.json
└── tslint.json

Let's create a greeting.element.ts in the lib folder:

1export class GreetingElement extends HTMLElement {
2  public static observedAttributes = ['title'];
3
4  attributeChangedCallback() {
5    this.innerHTML = `<h1>Welcome to ${this.title}!</h1>`;
6  }
7}
8
9customElements.define('happynrwl-greeting', GreetingElement);

and reexport it in the index.ts file:

1export * from './lib/greeting.element';

The updated library should look like this

happynrwl/
├── apps/
├── libs/
│   └── ui
│       ├── src/
│       │   ├── lib/
│       │   │    └── greeting.element.ts
│       │   └── index.ts
│       ├── jest.conf.js
│       ├── tsconfig.lib.json
│       ├── tsconfig.json
│       ├── tsconfig.spec.json
│       └── tslint.json
├── ...

Using the Greeting Element in our Angular App

Importing the Library

Next, let's include the new library.

1import '@happynrwl/ui'; // <-- the new library
2
3import { enableProdMode } from '@angular/core';
4
5import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
6import { AppModule } from './app/app.module';
7
8import { environment } from './environments/environment';
9
10if (environment.production) {
11  enableProdMode();
12}
13
14platformBrowserDynamic()
15  .bootstrapModule(AppModule)
16  .catch((err) => console.error(err));

Registering CUSTOM_ELEMENTS_SCHEMA

Next, let's register the CUSTOM_ELEMENTS_SCHEMA schema, which will tell the Angular compiler not to error when seeing non-standard element tags in components' templates.

1@NgModule({
2  declarations: [AppComponent],
3  imports: [BrowserModule],
4  providers: [],
5  schemas: [CUSTOM_ELEMENTS_SCHEMA],
6  bootstrap: [AppComponent],
7})
8export class AppModule {}

Using the Greeting Element

Finally, we can update app.component.html to use our shared web component.

1<div style="text-align:center">
2  <happynrwl-greeting [title]="title"></happynrwl-greeting>
3  <img
4    width="300"
5    src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png"
6  />
7</div>
8
9<p>This is an Angular app built with <a href="https://nx.dev">Nx</a>.</p>

Using the Greeting Element in our React App

Using Greeting in the react app requires similar steps.

Importing Library

Next, let's include the new library in main.ts.

1import '@happynrwl/ui';
2
3import * as React from 'react';
4import * as ReactDOM from 'react-dom';
5
6import { App } from './app/app';
7
8ReactDOM.render(<App />, document.querySelector('happynrwl-root'));

Adding Intrinsic Types

Instead of registering CUSTOM_ELEMENTS_SCHEMA, let's add intrinsic.d.ts file, which serves a similar purpose to CUSTOM_ELEMENTS_SCHEMA, next to main.tsx.

1declare namespace JSX {
2  interface IntrinsicElements {
3    [elemName: string]: any;
4  }
5}

Using the Greeting Element

Finally, we can update app.tsx to use our shared web component.

1import * as React from 'react';
2import { Component } from 'react';
3
4import './app.css';
5
6export class App extends Component {
7  render() {
8    const title = 'reactapp';
9    return (
10      <div>
11        <div style={{ textAlign: 'center' }}>
12          <happynrwl-greeting title={title} />
13          <img
14            width="300"
15            src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png"
16          />
17        </div>
18        <p>
19          This is a React app built with <a href="https://nx.dev">Nx</a>.
20        </p>
21      </div>
22    );
23  }
24}

Nx Intelligence

What we have shown is already quite remarkable. We built two applications in two different framework using a shared library of web components. We can use same commands to serve, build, test the applications.

But Nx can do a lot more than that.

If we run yarn dep-graph, we will see the following:

serve screenshot

Nx understands how our applications and libraries depend on each other. This is extremely important! To really improve the collaboration between teams and make sure that they can use each other's work, the following two things must be true:

If the Angular team makes a change to the Angular app itself. Only the Angular app has to be rebuilt and retested. Same is true for the React team. Any tool that requires us to rebuild and retest everything on every PR won't scale beyond a small repository.
If any of the teams changes the ui library, both the Angular and the React applications should be rebuilt and retested before the PR gets merged into master. This is the only way to guarantee that the PR is safe to merge.

To see how Nx helps with this, let's commit the changes we have made so far.

git add .
git commit -am 'great commit'

Next, let's create a new branch git checkout -b angularchange. In this branch, let's introduce any change to app.component.html and run yarn affected:dep-graph.

serve screenshot

As you can see, Nx knows that this change only affects the angularapp and nothing else. Nx can use this information to rebuild and retest only the angularapp:

yarn affected:test # only tests angularapp
yarn affected:build # only builds angularapp

Now, let's introduce a change to greeting.element.ts and run yarn affected:dep-graph.

serve screenshot

Both angularapp and reactapp are affected by this change because they both depend on the greeting component.

yarn affected:test # tests ui, angularapp, reactapp
yarn affected:build # only builds angularapp, reactapp

This is what we just saw:

If we only touch our code, we only have to retest and rebuild our code.
If we touch something that affects other teams, we'll have to rebuild and retest their applications as well.

Because this is a simple example, the impact is easily deductible. But a real workspace can have a dozen applications and hundred of libraries. Ad-hoc solutions do not work at such scale--we need tools like Nx, that can help us manage those workspaces.

Summary

With Nx, we can build multiple applications using different frontend frameworks in the same workspace. These applications can share components, services, utilities. In this example we looked at a library of web components that we used in Angular and React applications. But we could go further: we could build the shared component using Angular Elements and then use it in the React application. Nx also allows us to build the backend next to our frontend and share code between them.

Nx analyses the code base to figure out how libraries and applications depend on each other. This analysis happens across frameworks and across client-server boundaries.

Example App

You can find the example application here.