angulartypescriptnativescriptnativescript-angularnativescript-plugin

NativeScript 8.2 : Cannot read property 'portrait' of undefined

I am using NativeScript-Orientation-Free Plugin in my NativeScript version 8.2 Application.

My app is compiling fine with "tns run ios" but I am getting below Error on the run time and my app crashes When I am trying to set the orientation

Component

import { Component, OnInit } from '@angular/core';
import * as devOrientation from 'nativescript-orientation-free';

import { Item } from './item'
import { ItemService } from './item.service'

@Component({
  selector: 'ns-items',
  templateUrl: './items.component.html',
})
export class ItemsComponent implements OnInit {
  items: Array<Item>

  constructor(private itemService: ItemService) {}

  ngOnInit(): void {
    this.items = this.itemService.getItems();
    devOrientation.setOrientation("portrait");
  }
}

Error

enter image description here

Package.json

{
  "name": "poc",
  "main": "./src/main.ts",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~13.2.0",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "@nativescript/angular": "^13.0.0",
    "@nativescript/core": "~8.2.0",
    "@nativescript/theme": "~3.0.2",
    "nativescript-orientation-free": "2.2.5",
    "rxjs": "~7.5.0",
    "zone.js": "~0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.0",
    "@angular/compiler-cli": "~13.2.0",
    "@nativescript/ios": "8.2.1",
    "@nativescript/types": "~8.2.0",
    "@nativescript/webpack": "~5.0.6",
    "@ngtools/webpack": "~13.2.0",
    "typescript": "~4.5.5"
  }
}

Webpack.config.js

const webpack = require("@nativescript/webpack");

module.exports = (env) => {
    webpack.init(env);

    webpack.chainWebpack(config=>{
        config.resolve.alias.set('tns-core-modules/application','@nativescript/core/application');
        config.resolve.alias.set('tns-core-modules/ui/core/view-base','@nativescript/core/ui/core/view-base');    
        config.resolve.alias.set('tns-core-modules/ui/core/view','@nativescript/core/ui/core/view');
        config.resolve.alias.set('tns-core-modules/ui/page','@nativescript/core/ui/page'); 
        config.resolve.alias.set('tns-core-modules/ui/frame','@nativescript/core/ui/frame');
        config.resolve.alias.set('tns-core-modules/ui/page','@nativescript/core/ui/page');
        config.resolve.alias.set('tns-core-modules/ui/enums','@nativescript/core/ui/enums');
      });


    return webpack.resolveConfig();
};

tsConfig.json

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es2017",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noEmitHelpers": true,
    "noEmitOnError": true,
    "skipLibCheck": true,
    "lib": ["es2017", "dom"],
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"],
      "@/*": ["src/*"]
    }
  },
  "include": ["src/tests/**/*.ts", "src/**/*.ios.ts", "src/**/*.android.ts"],
  "files": ["./src/main.ts", "./references.d.ts", "./src/polyfills.ts"],
  "exclude": ["node_modules", "platforms", "e2e"]
}

i do not want to use this paid version NativeScript-Orientation. can anyone tell me how can I fix or what i am missing or do we have any alternate to set the orientation?

Solution

  • i removed the third party plugins for orientation and setting it like this

    UIDevice.currentDevice.setValueForKey(currentOrientation, "orientation");