Developing Cross-Platform Applications with Angular and NativeScript

Title: Developing Cross-Platform Applications with Angular and NativeScript
Description: Techniques for using Angular alongside NativeScript to create applications that run seamlessly on web and mobile platforms.
Category: Angular Cursor Rules

## 1. Project Setup

- **Install NativeScript CLI**: Ensure NativeScript is installed globally.
  
  npm install -g @nativescript/cli
  ```

- **Create a New Project**: Initialize a project integrating Angular with NativeScript.
  
  ns create my-shared-app --template @nativescript/template-hello-world-ng
  ```

  This sets up a project with directories for shared Angular code (`src/app`) and NativeScript-specific code (`src/app-mobile`).

## 2. Code Organization

- **Shared Code**: Place common components, services, and business logic in the `src/app` directory to maximize code reuse across platforms.
- **Platform-Specific Code**: For components unique to web or mobile, use separate directories (`src/app-web` and `src/app-mobile`) and conditionally import or lazy-load them as needed.

## 3. Component and Layout Management

- **Platform-Specific Templates**: Create `.html` files for web components and `.tns.html` files for NativeScript components to handle platform-specific layouts.
- **NativeScript Layouts**: Utilize NativeScript's UI components like `StackLayout` and `GridLayout` for mobile interfaces, ensuring a native look and feel.

## 4. Service and Dependency Injection

- **Shared Services**: Leverage Angular's dependency injection to create services that function across both web and mobile platforms, such as data retrieval and authentication services.

## 5. Performance Optimization

- **Native APIs**: Use NativeScript's direct access to native APIs to enhance performance on mobile platforms.
- **Code Reusability**: Maintain a modular code structure to facilitate code reuse and improve maintainability.

## 6. Testing and Deployment

- **Web Testing**: Run the Angular application for web testing.
  
  ng serve
  ```

- **Mobile Testing**: Use NativeScript commands to test on mobile devices.
  
  ns run android
  ns run ios
  ```

- **Continuous Integration/Continuous Deployment (CI/CD)**: Implement a CI/CD pipeline to automate building, testing, and deployment processes, ensuring consistent quality across platforms.

## 7. User Experience Considerations

- **Platform Consistency**: Design interfaces that respect the unique paradigms of each platform, such as navigation patterns and UI components, to provide a seamless user experience.

## 8. TypeScript Best Practices

- **Strict Typing**: Enable strict TypeScript compiler options to catch errors at build time and enhance code reliability.
  
  {
    "compilerOptions": {
      "strict": true,
      "noImplicitAny": true,
      "strictNullChecks": true,
      "strictFunctionTypes": true,
      "strictBindCallApply": true,
      "strictPropertyInitialization": true,
      "noImplicitThis": true,
      "alwaysStrict": true,
      "noUncheckedIndexedAccess": true,
      "exactOptionalPropertyTypes": true
    }
  }
  ```

- **Type Guards and Generics**: Avoid using `any`; instead, use type guards with `instanceof` or custom type predicates, and apply generics where appropriate to maintain type safety.

## 9. Security Practices

- **Input Validation**: Implement thorough input validation to prevent security vulnerabilities.
- **Secure Storage**: Use secure storage mechanisms for sensitive data, especially on mobile platforms.

## 10. Documentation and Community Standards

- **README and CONTRIBUTING Files**: Include comprehensive `README.md` and `CONTRIBUTING.md` files to guide developers and encourage community contributions.
- **License and Code of Conduct**: Provide a `LICENSE` file and a `CODE_OF_CONDUCT.md` to establish project guidelines and expectations.