Using NativeScript and Angular for Code Sharing Application

Recently, I followed the steps outlined in the Nativescript documentation for creating a new code sharing project here, and decided to incorporate sass into my project. I attempted both methods - one with the Nativescript theme applied, and the other without:

ng new -c=@nativescript/schematics no-theme-project --shared --no-theme

or

ng new -c=@nativescript/schematics sass-no-theme-project --shared --style=scss --no-theme

For this particular post, I opted for the No Theme option. Upon completing the creation of the new project, the folder structure looked like this:

https://i.sstatic.net/oQRYk.png

Once inside

Desktop/TestProjects/sass-no-theme-project
, I proceeded to install the necessary node modules:

npm install

Running ng serve --o successfully built and launched the application in the browser as expected. However, when attempting to run the NativeScript mobile app on an Android device (I have not yet tested on iOS), the application crashed with an error. I tried using both tns run android command line approach and through the NativeScript SideKick tool, but encountered the same issue. Local and cloud builds were also unsuccessful.

Device Information:

Physical Device: Samsung A5 (Not emulator)

Error Encountered on Mobile Device:

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to javascript.
    at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6065)
    ... (error continues)

Logs Output In Command Line and NativeScript Client:

[18-11-10 17:43:53.724] (CLI) [./main.ns.ts] 1.22 KiB {bundle} [built]
... (logs continue)

Given that Nativescript and Angular are supposed to seamlessly produce a working basic project across Web, iOS, and Android platforms, encountering these errors was unexpected.

UPDATE:

After following the troubleshooting steps provided here, such as re-installing JDK 8, the issue persisted. The app ran once, then failed, and subsequent attempts resulted in failure as well. It appears there may be configuration issues within files such as tsconfig and json. Despite checking these configurations, the problem remains unresolved.

Answer №1

When collaborating on code projects, make sure to include the --bundle flag in your commands. Therefore, your command should look like:

tns run android --bundle or tns run ios --bundle

If you tend to forget to include the --bundle flag, you can utilize the provided scripts in package.json by running: npm run android or npm run ios

Furthermore, if your project is using TypeScript 2.7, consider updating it to version 2.8

On a side note: In code-sharing projects, there's no need for moduleId, as webpack handles this automatically for you.

Answer №2

It appears that the nativescript team is facing challenges due to rapidly changing packages they rely on. A huge shoutout to @NickIliev from the nativescript team, @skopekreep, and good old debugging for helping me set up my package.json configuration. Following this setup should work smoothly for you.

However, exercise caution when updating packages in the future and always test before committing changes to your package.json file.

In addition to the main packages, it's advisable to be cautious and thoroughly test updates on the following:

typescript @types/jasmine nativescript-dev-webpack tns-core-modules

{
  "name": "myproject",
  "nativescript": {
  "id": "org.nativescript.myproject",
    "tns-android": {
    "version": "5.0.0"
   }
},
"version": "0.0.0",
... (remaining content unchanged)
}

Steps to follow:

  1. Install the latest version of Node JS

  2. Get the latest version of NPM installed

  3. Run npm i -g @angular/cli

  4. Run npm i -g @nativescript/schematics

  5. Navigate to the folder and replace the package.json file, making sure to customize name and id according to your project

  6. Execute npm install

  7. Launch tns run android --bundle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am facing an issue with the PrimeNG time picker as it is not letting me modify the selected time

Currently utilizing PrimeNG for its calendar functionalities, I have been experiencing difficulty in getting the time picker to function properly. Despite my attempts, the time selector does not allow me to make any changes. Below is the code snippet from ...

Typescript controller inheritance leading to Error: $injector:unpr Unknown Provider due to minification

LATEST UPDATE: 2019/07/16 The issue I am facing is actually a result of misusing $inject. Instead of declaring it as private $inject in api-service.ts, it should have been public static $inject = [...]. During the minification process, explicit injection ...

Steps to creating a Partial Pick attribute

I'm facing an issue with a function I have function someThing(someArg: Pick<HTMLElement, 'id' | 'style'>) {...} The problem is that I only want to apply certain styles to someArg.style, not all the styles from CSSStyleDecla ...

Trouble encountered with Angular Google Maps integration when using router-outlet

Currently, I am in the process of developing an application that features a map as its header (providing a global view) and another map positioned in the center of the page to showcase detailed views. To demonstrate this setup, I have shared a working exam ...

Generate Angular 9 HTML-formatted output with a return function statement

I am currently working on displaying a table using ngFor. I have encountered an issue with one particular column where a string needs to be displayed as two separate lines. I attempted to split the string into two array values using a function, but when re ...

Exploring the differences in object shapes using TypeScript

I'm currently working on defining an object that has the ability to hold either data or an error. export type ResultContainer = { data: any; } | { error: any; }; function exampleFunction():ResultContainer { return { data: 3 } } ...

The React TypeScript variable does not get updated promptly

I have a textfield that contains text and a button which will process the text. The Button should only be clickable if the textfield is not empty. Here's the code I used to achieve this functionality: const [text, setText] = useState(""); const [activ ...

How can I extract JSON data within the Ionic2 framework?

After making an AJAX post call to an API, I successfully received a JSON response. Here is the response: JSON Response: { "s": true, "m": { "i": 10, "n": "Apple Watch", "p": "14000" }} While testing my TypeScript code, I used an alert to display the J ...

Updating a value from a provider in Angular: A step-by-step guide

I have an AppModule provider that provides a specific class. Is it possible to change the provided value dynamically at runtime? {provide: MatDatepickerIntl, useClass: SomeClass} How can I switch from using SomeClass to AnotherClass on the fly (for examp ...

An issue has arisen regarding the type definition for the random-string module

I am currently working on creating a .d.ts file for random-string. Here is the code I have so far: declare module "random-string" { export function randomString(opts?: Object): string; } When I try to import the module using: import randomString = ...

typescript create a type from a schema

Recently, I received an auto-generated GraphQL schema mapping that looks like this: export const generatedSchema = { query: { __typename: { __type: 'String!' }, account_sample: { __type: '[account_sample!]!', __arg ...

The Shell Application is not refreshing React HtmlElement Micro Front end

I am currently facing an issue when trying to inject the following React MFE into another Angular shell application. The MFE loads successfully the first time, but if it is hidden or removed from the DOM and then reloaded, it fails to load. Could you plea ...

Can you please clarify the purpose and functionality of @HostBinding(hostPropertyName)?

The @HostBinding() decorator requires an argument called 'hostPropertyName'. Are you familiar with this host and how can we discover its available properties? ...

Issue with Safe Navigation Operator in Angular 2 not functioning properly when used in template property binding

Ng: 13.3.11 TS: 4.6.4 When using the safe navigator in an Ng template, an error is encountered in IntelliJ Idea with the following expression: [innerHTML]="foo.bar.baz[v1].foobar[v2]?[v3]?[v4]?[v5]" error: Parser Error: Conditional expression. ...

Unable to successfully navigate Angular route when passing 2 parameters

This is my routing file: import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomepageComponent } from './app/homepage/homepage.component'; import { SearchpageComponent } ...

How to Retrieve Properties from Child Elements in NativeScript ngFor Directive

Working with a dynamically generated checklist in Angular/Nativescript: <StackLayout *ngIf="assessment"> <StackLayout *ngFor="let instance_item of assessment.exam_instance_items; let i= index"> <ns-examitem [attr.id] ...

How can ngModel be connected to an Input Element when the same component is utilized for both Add and Edit functionalities?

In this scenario, there are two main components: one for adding states and another for viewing a list of states which are clickable and redirect to the "Add" component. The goal is to use the same "Add" component for both adding and editing state informat ...

The MUI Theming feature with primary color set to light seems to be causing confusion with the light color property

Trying to grasp the concept of MUI theming. There is a section dedicated to theming where it mentions the ability to change the theme. My query is: Within the primary color, there are three colors that can be defined: main, dark, and light. I'm unsur ...

NativeScript does not acknowledge the permission "android.Manifest.permission.READ_CONTACTS"

Hi there! I am a beginner in mobile development and currently learning Angular 2. I am facing an issue with requesting permission for reading contacts in NativeScript. It seems that "android" is not being recognized. For instance, when trying to execute t ...

Tips on downloading a dynamically created XML file using ServiceStack and Angular

Although the code below is theoretically functional, it lacks proper error handling. The issue arises when the XML file starts downloading upon opening a new window with the URL generated by the service stack. In case of a server-side error, you are left o ...