Model class from another path throws error calling module in NativeScript

Question

I had a web application which worked perfectly and then migrated it with NativeScript into a mobile application. I have a model file in src/app/model, where I have inside some class model exported like this:

export class User {

  username: string;
  password: string;

}

I am trying to import that class model to a service class. My service class path is src/app/auto-generated/service. When I am importing it, the app does not work. But when I am creating the same class model in the src/app/auto-generated and then import it to my service class, it works. Why it going on with the paths? How can I fix it?

How my file is when the error comes:

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { User } from 'app/model/User';

@Injectable({
  providedIn: "root"
})
export class UserLoginService {
  user: User = new User();

  constructor() {}

  login(name: string, password: string, imTid: string): Observable<UiInfo> {
    console.log(name);
    return ;
  }

}

And the error:

System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: System.err: System.err: Error calling module function System.err: System.err: Cannot compile /data/data/org.nativescript.ngsample/files/app/bundle.js System.err: System.err: SyntaxError: Unexpected token ! System.err: File: "file:///data/data/org.nativescript.ngsample/files/app/bundle.js, line: 292, column: 24 System.err: System.err: StackTrace: System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err:
Frame: function:'', file:'file:///data/data/org.nativescript.ngsample/files/app/starter.js', line: 3, column: 1 System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err: System.err: System.err: SyntaxError: Unexpected token ! System.err: File: ", line: 1, column: 265 System.err: System.err: StackTrace: System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err:
Frame: function:'', file:'file:///data/data/org.nativescript.ngsample/files/app/starter.js', line: 3, column: 1 System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err: System.err: System.err: SyntaxError: Unexpected token ! System.err: File: ", line: 1, column: 265 System.err: System.err: StackTrace: System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err:
Frame: function:'', file:'file:///data/data/org.nativescript.ngsample/files/app/starter.js', line: 3, column: 1 System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err: System.err: at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5876) System.err: at android.app.ActivityThread.access$1100(ActivityThread.java:199) System.err: at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1650) System.err: at android.os.Handler.dispatchMessage(Handler.java:106) System.err:
at android.os.Looper.loop(Looper.java:193) System.err: at android.app.ActivityThread.main(ActivityThread.java:6669) System.err: at java.lang.reflect.Method.invoke(Native Method) System.err: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493) System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858) System.err: Caused by: com.tns.NativeScriptException: System.err: System.err: Error calling module function System.err: System.err: Cannot compile /data/data/org.nativescript.ngsample/files/app/bundle.js System.err: System.err: SyntaxError: Unexpected token ! System.err: File: "file:///data/data/org.nativescript.ngsample/files/app/bundle.js, line: 292, column: 24 System.err: System.err: StackTrace: System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err:
Frame: function:'', file:'file:///data/data/org.nativescript.ngsample/files/app/starter.js', line: 3, column: 1 System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err: System.err: System.err: SyntaxError: Unexpected token ! System.err: File: ", line: 1, column: 265 System.err: System.err: StackTrace: System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err:
Frame: function:'', file:'file:///data/data/org.nativescript.ngsample/files/app/starter.js', line: 3, column: 1 System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err: System.err: System.err: SyntaxError: Unexpected token ! System.err: File: ", line: 1, column: 265 System.err: System.err: StackTrace: System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err:
Frame: function:'', file:'file:///data/data/org.nativescript.ngsample/files/app/starter.js', line: 3, column: 1 System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err: System.err: at com.tns.Runtime.runModule(Native Method) System.err: at com.tns.Runtime.runModule(Runtime.java:624) System.err: at com.tns.Runtime.run(Runtime.java:616) System.err: at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21) System.err: at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1154) System.err: at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5871) System.err: ... 8 more Successfully synced application org.nativescript.ngsample on device emulator-5554.

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "module": "es2015"
  }
}

What you mean by it doesn't work? What error is shown exactly? Can you show your import statements too. — Manoj
Try adding "baseUrl": ".", "paths": { "~/*": [ "./src/*" ]} to your tsconfig.json and use import { User } from '~/app/model/User'; — Manoj

FrontEnd-er FrontEnd-er · Accepted Answer · 2019-07-19T06:06:29

Try to add this code:-

  import { Injectable } from "@angular/core";
  import { HttpClient, HttpHeaders } from "@angular/common/http";
  import { User } from 'app/model/User';

  @Injectable({
   providedIn: "root"
  })
  export class UserLoginService {
  public user: User;

  constructor() {
    this.user = new User();
  }

   login(name: string, password: string, imTid: string): Observable<UiInfo> {
    console.log(name);
    return ;
   }
 }

Model class from another path throws error calling module in NativeScript

2 Answers