An issue was encountered while running a production version of an Ionic 2 Android app, as the ngfactory module could not be located

We encountered an error while running an Ionic2 app using the --prod flag.

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

After the splashscreen loads, the screen turns white.

The command we executed is:

ionic run android --prod

We are deploying on a Nexus 5x device (emulators also exhibit the same behavior).

Here is our ionic info:

apache cordova 6.4.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.2.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.5.0
Xcode version: Not installed

Cordova plugins being used:

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

Below are the dependencies listed in our package.json file:

"dependencies": {
"@angular/common": "2.1.1",
 ...  
"zone.js": "0.6.26"
}

And here are our devDependencies:

"devDependencies": {
 "@ionic/app-scripts": "^1.2.2",
 ...
"typescript": "^2.0.9"
}

Contents of tsconfig.json:

{
  "compilerOptions": {
    ...
  },
  ...
}

Despite updating the ionic-script to the latest version, the issue persists.

When using the stack and @ionic/app-scripts version 1.2.0, ngfactory files are generated but runtime errors occur:

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

For more details, check out these links:

Forum Link

Github Issue

We are troubleshooting why the ngfactory files are not being included in the bundle with these versions.

Your assistance is greatly appreciated as we strive to optimize our app for production. Thank you for your invaluable support.

Best regards

androidcordovaangulartypescriptionic2

Answer №1

Take out the "^" symbol in front of the "typescript" and "@ionic/app-scripts" dependencies listed in package.json. The updated entries should appear as follows: 

"typescript": "2.0.9",
"@ionic/app-scripts": "1.2.2"

After making this change, execute npm install and give it another try.

Answer №2

We encountered and successfully resolved the issue by taking a couple of specific actions:

1) Updated package.json with the following dependencies:

  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic/storage": "1.1.6",
    "ionic-angular": "2.3.0",
    "ionic-native": "2.5.1",
    "ionicons": "3.0.0",
    "localforage": "1.4.3",
    "localforage-cordovasqlitedriver": "1.5.0",
    "angular2-google-maps": "0.16.0",
    "saml2-js": "1.11.0",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.2.2",
    "typescript": "2.0.9",
    "tslint": "4.0.0"
  },

2) Eliminated the specified configuration from our package.json file:

"config": {
    "ionic_bundler": "webpack",
    "ionic_source_map_type": "#inline-source-map"
  }

Since Ionic 2 already utilizes webpack by default, it was redundant to specify it again. The only downside is that removing this particular line:

"ionic_source_map_type": "#inline-source-map"

affects our ability to debug using TypeScript directly in the browser; however, we will adjust our configuration based on the environment.

The positive outcomes include our app now running on an Android Nexus 5X within 3 seconds as opposed to 12, with the JavaScript bundle size reduced from 14Mb to 2Mb – definitely a significant improvement! Kudos to the Ionic 2 team for their exceptional framework and scripts. The application performs admirably on a mid-range mobile device, making it feel almost native. Developed within just 3 months for iOS (pending testing) and Android, we are extremely pleased with the end result.

We hope this post proves beneficial to someone out there!

Wishing you all a fantastic day ahead!

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

Tips for troubleshooting using an Android device with Air and captive runtime

My previous experience has been with iOS devices, and I am new to deploying apps on Android. It appears that you cannot run or debug an app with captive runtime directly on the device, unlike in iOS. After clicking on run/debug to install the app on my de ...

androiddebuggingintellij-ideaair

Angular library ngx-markdown translates markdown content into plain text, ensuring markdown formatting is lost in

In my Angular project, I encountered an issue while attempting to use markdown for rendering content on a webpage. I decided to try out ngx-markdown after ensuring that everything was imported correctly and directives were used appropriately. However, the ...

angularangularjsmarkdown

Fetching Data from Response Headers in Angular 4.3.3 HttpClient

(Text Editor: Visual Studio Code; TypeScript Version: 2.2.1) The main objective here is to fetch the headers of the response from a request Let's consider a scenario where we make a POST request using HttpClient within a service: import { Injec ...

javascriptangulartypescriptrequesttypescript2.0

Angular's vast selection of custom CSS styles allows developers to create unique

I have been working on developing a component library for my company and I want to make sure that the components are easily customizable by users. One idea I had was to provide an input property like the following: interface ComponentStyles { root: { [cla ...

angular

Ways to eliminate blank spaces in a document

How do I remove whitespaces from a text string in my Angular application? For example: {{ someobject.name }} The value of someobject.name is "name abc" I want to achieve the result as "nameabc" (by removing all whitespaces). I have already created a ...

angulartypescriptpipetrim

The attribute 'Error' is not available for the object of type 'MovieData | ResponseError'. This attribute is also not present in objects of type 'MovieData'

Question Answered I am currently working with two interfaces, MovieData and ResponseError. export interface MovieData { Poster: string; Title: string; Plot: string; imdbID: string; } The ResponseError interface looks like this: export interface R ...

reactjstypescriptreact-typescript

HTML5 Applications with Intel XDK

I'm currently working on an HTML5 application using Intel's XDK platform for building in Android. However, I'm facing an issue where the application crashes when the keyboard pops up upon entering text. Can anyone provide assistance with thi ...

androidhtmlintel-xdk

Retrieve the content text while handling errors using RxJs

When my Node.js server encounters an error with status 401, it sends out a message: https://i.stack.imgur.com/bOOF3.png https://i.stack.imgur.com/Kcv27.png The code responsible for this is as follows: res.status(401).send('Invalid user or password & ...

node.jsangularrxjsobservable

Creating Empathetic User Experiences with Next 12 and SWC: A Guide to Harnessing import.meta.url

In my Next.js 12 App with the Rust Compiler, I am utilizing Jest and WebWorkers. In one of my files, I am using import.meta.url. to create the worker. The issue arises when Jest throws an error, stating that import.meta.url cannot be used outside of an ES ...

typescriptjestjsnext.jsweb-workerswc-compiler

Various time values within one field

<form> <p-calendar [(ngModel)]="report.incidentTime" [showTime]="true" [ngModelOptions]="{standalone: true}" [maxDate]="maxDateValue" (ngModelChange)="validateTime($event)"></p-calendar> <button type ...

typescripttypesprimeng

`Evaluating a TypeScript React component using Mocha: A thorough examination of TSX components with TypeScript

Following the transition of my React project to TypeScript and Babel7, I encountered an issue with a component named abc.tsx (previously abc.js). While the component compiles successfully on npm start and loads in the browser without any issues, running th ...

reactjstypescriptwebpackmocha.jsbabeljs

Discovering the chosen time zones in the world clock for Android 4.2: A step-by-step guide

Discover the exciting new feature introduced in Android 4.2 - the world clock! Easily keep track of time in various cities directly from your Clock app or lock screen. Curious if there is an API available to access the chosen time zones? ...

android

How can I best declare a reactive variable without a value in Vue 3 using TypeScript?

Is there a way to initialize a reactive variable without assigning it a value initially? After trying various methods, I found that using null as the initial value doesn't seem to work: const workspaceReact = reactive(null) // incorrect! Cannot pass n ...

typescriptvue.jsvuejs3vue-composition-api

Using two ListView.builder widgets within a parent ListView in Flutter

First and foremost, what I am aiming to achieve is to have two ListView.builder (with physics: NeverScrollableScrollPhysics()) nested inside a scrollable ListView. Below is the code snippet demonstrating how this can be accomplished: CODE IN ACTION!!! ...

androidiosflutterlistviewdart

What is the earliest version of npm that I can install?

There was an error encountered while trying to install a package using npm. This issue is related to permission denied when attempting to fetch a specific URL. The error code EEXIST indicates that the file already exists in the specified ...

angularionic-framework

Angular 4: Leveraging a directive as a universal constant

I am looking to develop a directive that allows me to utilize a template variable in order to access a global variable, much like $rootScope in Angular.JS. The goal is to avoid having to inject a service into every component where I need access to the vari ...

angulartypescript

npm encountered an abrupt conclusion of JSON input during parsing near "serify":"latest","cha"

After uninstalling angular-cli yesterday to update to @angular/cli, I encountered an error while trying to install @angular/cli: Received an unexpected end of JSON input while parsing near '...serify":"latest","cha' Even after attempting to c ...

angularnpmangular-cli

Issue with navigation bar overflowing when incorporating adMob into Recycleview

Every 10 cards, an ad appears that overlaps the content above the system navigation bar when scrolling. View screenshot on Android: Android screenshot Within my ItemView, there is an adView with default visibility set to "gone." The listAdapter code is a ...

androidadmob

Using putParcelableArrayList(ArrayList<int>) and getParcelableArrayList<Int>() in Android Kotlin does not seem to be functioning as expected

I'm attempting to transfer an ArrayList<Integer> from one fragment to another, and here's my code: Kotlin code companion object { fun newInstance(categoryId: Int, brandsList: ArrayList<Int>): Fragment { val fragment = Ca ...

androidarraylistkotlinparcelable

Analyzing and contrasting image button assets

I am seeking guidance on how to compare an image resource on an image button. To begin, I set up the button as follows: button1 = (ImageButton) findViewById(R.id.ib1); button1.setImageResource(R.drawable.smiley); if( currentTime%2==0 ) { button1.setI ...

androidimageresources