Angular, NativeScript ve Nx ile Kod Paylaşımı

NativeScript, "JavaScript, doğru bir şekilde yapılandırılırsa muazzam ölçeklenebilirlik fırsatları sunar" diyor.

Kulağa hoş geliyor, ancak Angular (web) ve Angular NativeScript (Android, iOS) uygulamalarınız için gerçekte nasıl bir "entegre monorepo" yaratırsınız? NativeScript belgeleri, Nrwl Nx DevTools'u @nativescript/nx ile kullanmanızı önerir ve bu harikadır.

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