Compartilhamento de código com Angular, NativeScript e Nx

“JavaScript oferece oportunidades de escalabilidade imensa se arquitetado corretamente”, diz NativeScript.

Parece bom, mas como você realmente cria um “monorepo integrado” para seus aplicativos Angular (web) e Angular NativeScript (Android, iOS)? Os documentos do NativeScript sugerem o uso de Nrwl Nx DevTools com @nativescript/nx , e é incrível.

# 0. Install NPM LTS globally
$ nvm install --lts

# 1. Install Angular CLI globally
$ npm install -g @angular/cli

# 2. Install NativeScript CLI globally
$ npm install -g nativescript

# 3. Install Nrwl Nx CLI globally
$ npm install -g nx

# 4. Generate a new Nx workspace with an empty integrated monorepo
$ npx create-nx-workspace@latest angular-nativescript-workspace

# 5. Navigate to the Nx-workspace directory
$ cd angular-nativescript-workspace

# 6. Install NativeScript and Angular plugins
$ npm install --save-dev @nativescript/nx @nativescript/angular @nativescript/android @nativescript/ios @nrwl/angular

# 7. Generate a new Angular web app with SCSS, routing enabled, and no Standalone Components
$ nx generate @nrwl/angular:application --name=web-app

# 8. Generate a new NativeScript mobile app with Angular as the front end
$ nx generate @nativescript/nx:application --name=mobile-app

# 9. Generate a new shared library with Jest and TSC
$ nx generate @nrwl/js:lib --name=shared

# 10. Generate shared TypeScript model classes for User, Game, and Item
$ touch libs/shared/src/lib/user.ts
$ touch libs/shared/src/lib/game.ts
$ touch libs/shared/src/lib/item.ts

# 11. Run the web app
$ nx serve web-app

# 12. Run the mobile app on an Android device or emulator
$ nx run nativescript-mobile-app:android

# 13. Run the mobile app on an iOS device or simulator
$ nx run nativescript-mobile-app:ios

export class User {
    constructor(public id: number, public name: string) {}
}
export class Game {
    constructor(public id: number, public title: string) {}
}
export class Item {
    constructor(public id: number, public description: string) {}
}

export * from './lib/user';
export * from './lib/game';
export * from './lib/item';

import {Component} from '@angular/core';
import {User, Game, Item} from '@angular-nativescript-workspace/shared';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent {
    user = new User(1, 'John Doe');
    game = new Game(1, 'Example Game');
    item = new Item(1, 'Example Item');
}