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 codeThe contents of the myorg directory after creation are as follows:
Json ├─ Angular. json ├─ Package. json ├─ TsConfig. json ├─ Tslint.json └ ─ ─ the README. MdCopy the codeCreate 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 codeThen 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 codeRun the application
ng serve todos
Copy the codeCreate 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 codeRun 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 codeRun 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 codeDefine the interface in data.ts:
export interface Todo {
title: string;
}
Copy the codeAngular uses:
import { Todo } from '@myorg/data';
Copy the codeCreate 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 codeAdd 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 codeUse 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 codeCreate 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 codeAnd export it in index.js
export * from './lib/greeting.element';
Copy the codeUsed in Angular
In the main. Js import
import '@myorg/ui'; // <-- the new library
Copy the codeRegister CUSTOM_ELEMENTS_SCHEMA with app.module and use it in Angular.
Used in React
Import from main.tsx:
import '@happynrwl/ui';
Copy the codeAdd the intrinsic.d.ts file under SRC to create the following:
declarenamespace JSX { interface IntrinsicElements { [elemName: string]: any; }}Copy the codeFor 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 codeCreate 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.