Angular, NativeScript 및 Nx와 코드 공유

NativeScript는 "JavaScript는 제대로 아키텍처가 구축된 경우 엄청난 확장성의 기회를 제공합니다."라고 말합니다.

그럴듯하지만 Angular(웹) 및 Angular NativeScript(Android, iOS) 앱을 위한 "통합 단일 저장소"를 실제로 어떻게 생성합니까? NativeScript의 문서는 @nativescript/nx 와 함께 Nrwl Nx DevTools를 사용할 것을 제안합니다.

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