Nrwl is a superset of Angular-CLI that extends angular-CLI schematics and builders for Monorepo-style development. You can use Both Angular and React to build front-end applications using different frameworks in your workspace, and you can include nodeJS backend applications to develop full-stack applications in the same repository.

The installation

npm install -g @nrwl/schematics

Creating an application

Creating a workspace

See Ruan Yifeng tutorial to use NPX.

npx --ignore-existing create-nx-workspace myorg

You can select a workspace type during creation:

  empty             [an empty workspace]
  angular           [a workspace with a single Angular application]
  angular-ivy       [a workspace with a single Angular application built using Ivy]
  react             [a workspace with a single React application]
  web components    [a workspace with a single app built using web components]
  full-stack        [a workspace with a full stack application (NestJS + Angular Ivy)]
Copy the code

The contents of the myorg directory after creation are as follows:

Json ├─ Angular. json ├─ Package. json ├─ TsConfig. json ├─ Tslint.json └ ─ ─ the README. MdCopy the code
Create an Angular application

First add the ability to create an Angular application:

ng add @nrwl/angular

You can also add applications with different functions:

ng add @nrwl/angular # Adds Angular capabilities
ng add @nrwl/react # Adds React capabilities
ng add @nrwl/nest # Adds Nest capabilities
ng add @nrwl/express # Adds Express capabilities
ng add @nrwl/web # Adds Web capabilities
ng add @nrwl/node # Adds Node capabilities
Copy the code

Then create the Angular application:

ng g @nrwl/angular:application todos

The contents of the directory are as follows:

Myorg / ├ ─ ─ apps / │ ├ ─ ─ todos / │ │ ├ ─ ─ SRC / │ │ │ ├ ─ ─ app / │ │ │ ├ ─ ─ assets / │ │ │ ├ ─ ─ environments / │ │ │ ├ ─ ─ The favicon. Ico │ │ │ ├ ─ ─ index. The HTML │ │ │ ├ ─ ─ main. Ts │ │ │ ├ ─ ─ polyfills. Ts │ │ │ ├ ─ ─ styles. The SCSS │ │ │ └ ─ ─ test. The ts │ │ ├ ─ ─ browserslist │ │ ├ ─ ─ jest. Conf., js │ │ ├ ─ ─ tsconfig. App. Json │ │ ├ ─ ─ tsconfig. Json │ │ ├ ─ ─ tsconfig. Spec. The json │ │ └ ─ ─ Tslint. Json │ └ ─ ─ todos-e2 e / │ ├ ─ ─ SRC / │ │ ├ ─ ─ fixtures / │ │ │ └ ─ ─ example. The json │ │ ├ ─ ─ integration / │ │ │ └ ─ ─ app. Spec. Ts │ │ ├ ─ ─ the plugins / │ │ │ └ ─ ─ index. Ts │ │ └ ─ ─ the support / │ │ ├ ─ ─ app. Po. Ts │ │ ├ ─ ─ commands. The ts │ │ └ ─ ─ but ts │ ├ ─ ─ cypress. Json │ ├ ─ ─ │ ├─ ├─ ├─ ├─ Angular. json ├── ├.exe └─ download. json ├─ └ tslint.json ├─ readme.mdCopy the code
Run the application
ng serve todos
Copy the code
Create the React application

First add the ability to create the React application:

ng add @nrwl/react

Then create the React application:

ng g @nrwl/react:app reactapp

The contents of the directory are as follows:

Happynrwl / ├── apps/ │ ├─ Todos / │ ├─ Todos-e2 e / │ ├ ─ ─ reactapp / │ │ ├ ─ ─ SRC / │ │ │ ├ ─ ─ app / │ │ │ │ ├ ─ ─ app. CSS │ │ │ │ ├ ─ ─ app. Spec. The TSX │ │ │ │ └ ─ ─ app. The TSX │ │ │ ├ ─ ─ assets / │ │ │ ├ ─ ─ environments / │ │ │ ├ ─ ─ the favicon. Ico │ │ │ ├ ─ ─ index. The HTML │ │ │ ├ ─ ─ main. Ts │ │ │ ├ ─ ─ polyfills, ts │ │ │ ├ ─ ─ styles. SCSS │ │ │ └ ─ ─ test. The ts │ │ ├ ─ ─ browserslist │ │ ├ ─ ─ jest. Conf., js │ │ ├ ─ ─ tsconfig. App. Json │ │ ├ ─ ─ │ ├─ ├─ ├─ ├─ └ └. Json │ ├─ └-e2 e / │ ├ ─ ─ SRC / │ │ ├ ─ ─ integrations / │ │ │ └ ─ ─ app. Spec. Ts │ │ ├ ─ ─ fixtures / │ │ ├ ─ ─ the plugins / │ │ └ ─ ─ the support / │ ├ ─ ─ ├─ ├─ ├─ ├.angular.json ├── ├.txt ├── ├.txt ├─ ├.txt ├─ ├.txt ├── ├.txt ├─ ├.txt └─ ├─ ├─ trash ├─ package.json ├─ Tools / ├─ tsconfig.json ├.jsonCopy the code

Run the application

ng serve reactapp

Add the Node application

Add functionality to Nest.js

ng add @nrwl/nest

Add express.js functionality

ng add @nrwl/express

Add node.js functionality

ng add @nrwl/node

Create the Nest application

ng g @nrwl/nest:app api --frontendProject=todos

FrontendProject =todos creates the proxy configuration for angular applications and apis.

The contents of the directory are as follows:

Myorg / ├── apps/ │ ├─ Todos / │ ├─ Todos-e2 e / │ └ ─ ─ the API / │ ├ ─ ─ jest. Conf., js │ ├ ─ ─ proxy. Conf. Json │ ├ ─ ─ SRC / │ │ ├ ─ ─ app / │ │ │ ├ ─ ─ app. The controller. The ts │ │ │ ├ ─ ─ App. Controller. Spec. Ts │ │ │ ├ ─ ─ app. The module. The ts │ │ │ ├ ─ ─ app. Service. The ts │ │ │ └ ─ ─ app. Service. Spec. Ts │ │ ├ ─ ─ assets / │ │ ├ ─ ─ environments / │ │ │ ├ ─ ─ the environment. The ts │ │ │ └ ─ ─ environment. Prod. Ts │ │ └ ─ ─ main. Ts │ ├ ─ ─ tsconfig. App. Json │ ├ ─ ─ Tsconfig. Json │ ├ ─ ─ tsconfig. Spec. Json │ └ ─ ─ tslint. Json ├ ─ ─ libs / ├ ─ ─ nx. The json ├ ─ ─ package. The json ├ ─ ─ the tools / ├ ─ ─ Tsconfig. Json └ ─ ─ tslint. JsonCopy the code
Run the application

ng serve api

Create a shared code base

Create the Angular and Nest public interface

ng g @nrwl/workspace:lib data

The contents of the directory are as follows:

Myorg / ├── apps/ │ ├─ Todos / │ ├─ Todos-e2 e / │ └ ─ ─ the API / ├ ─ ─ libs / │ └ ─ ─ data / │ ├ ─ ─ jest. Conf., js │ ├ ─ ─ SRC / │ │ ├ ─ ─ lib / │ │ │ └ ─ ─ data. The ts │ │ └ ─ ─ index. The ts │ ├ ─ ─ Tsconfig. App. Json │ ├ ─ ─ tsconfig. Json │ ├ ─ ─ tsconfig. Spec. The json │ └ ─ ─ tslint. Json ├ ─ ─ nx. The json ├ ─ ─ package. The json ├ ─ ─ Tools / ├─ ├─ tslint.jsonCopy the code

Define the interface in data.ts:

export interface Todo {
  title: string;
}

Copy the code

Angular uses:

import { Todo } from '@myorg/data';

Copy the code
Create the Angular component library

ng g @nrwl/angular:lib ui

The contents of the directory are as follows:

Myorg / ├── apps/ │ ├─ Todos / │ ├─ Todos-e2 e / │ └ ─ ─ the API / ├ ─ ─ libs / │ ├ ─ ─ data / │ └ ─ ─ the UI / │ ├ ─ ─ jest. Conf., js │ ├ ─ ─ SRC / │ │ ├ ─ ─ lib / │ │ │ ├ ─ ─ the UI. The module. The spec. Ts │ │ │ └ ─ ─ the UI. The module. Ts │ │ └ ─ ─ but ts │ ├ ─ ─ tsconfig. App. Json │ ├ ─ ─ tsconfig. Json │ ├ ─ ─ tsconfig. Spec. The json │ └ ─ ─ ├── ├.json ├─ Package. json ├─ Tools/ExercisesCopy the code

Add the component

ng g component todos --project=ui --export

Register the CUSTOM_ELEMENTS_SCHEMA schema, which tells the Angular compiler to see nonstandard element labels in component templates without error.

//app.module
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  ...
})
export class AppModule {}

Copy the code

Use the same method as the angular-CLI created lib.

Create angular and React shared component libraries

ng g @nrwl/workspace:lib ui

Myorg / ├── apps/ │ ├─ Todos / │ ├─ Todos-e├─ ├─ ├─ ├─ ├─ ├─ ├─-e2 e / ├ ─ ─ libs / │ └ ─ ─ the UI │ ├ ─ ─ SRC / │ │ ├ ─ ─ lib / │ │ └ ─ ─ but ts │ ├ ─ ─ jest. Conf., js │ ├ ─ ─ tsconfig. Lib. Json │ ├ ─ ─ Tsconfig. Json │ ├ ─ ─ tsconfig. Spec. Json │ └ ─ ─ tslint. Json ├ ─ ─ the README. Md ├ ─ ─ presents. The json ├ ─ ─ nx. The json ├ ─ ─ package. The json ├ ─ ─ Tools / ├─ ├─ tslint.jsonCopy the code

Create the greeting.element.ts component under the lib:

export class GreetingElement extends HTMLElement {
  public static observedAttributes = ['title'];

  attributeChangedCallback() {
    this.innerHTML = `<h1>Welcome to ${this.title}! </h1>`; } } customElements.define('happynrwl-greeting', GreetingElement);

Copy the code

And export it in index.js

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

Copy the code
Used in Angular

In the main. Js import

import '@myorg/ui'; // <-- the new library

Copy the code

Register CUSTOM_ELEMENTS_SCHEMA with app.module and use it in Angular.

Used in React

Import from main.tsx:

import '@happynrwl/ui';

Copy the code

Add the intrinsic.d.ts file under SRC to create the following:

declarenamespace JSX { interface IntrinsicElements { [elemName: string]: any; }}Copy the code

For use in app.tsx:

import * as React from 'react';
import { Component } from 'react';

import './app.css';

export class App extends Component {
  render() {
    const title = 'reactapp';
    return(... <happynrwl-greeting title={title} /> ... ) ; }}Copy the code

Create a project dependency diagram

The Nx workspace can contain dozens of applications and libraries, and as the code base grows, you can use the NPM run dep-graph command to output a workspace dependency graph in the browser.