Chia sẻ mã với Angular, NativeScript và Nx

“JavaScript cung cấp các cơ hội về khả năng mở rộng lớn nếu được kiến ​​trúc đúng cách,” NativeScript nói.

Điều đó nghe có vẻ hay, nhưng làm thế nào để bạn thực sự tạo một “monorepo tích hợp” cho các ứng dụng Angular (web) và Angular NativeScript (Android, iOS) của bạn? Tài liệu của NativeScript đề xuất sử dụng Nrwl Nx DevTools với @nativescript/nx và điều đó thật tuyệt vời.

# 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');
}