Failure to trigger the before-prepareJSApp hook in nativescript-dev-webpack

I am currently facing some challenges while trying to bundle my Nativescript app using webpack.

The first issue arises when I run the following command:

 tns build android --bundle

After running this command, it seems like webpack is not doing anything. The output I see is as follows:

 Executing before-prepare hook from F:\workspace\myproject\hooks\before-
 prepare\nativescript-dev-sass.js
 Executing before-prepare hook from F:\workspace\myproject\hooks\before-
 prepare\nativescript-dev-typescript.js
 Preparing project...
 Project successfully prepared (android)
 Executing after-prepare hook from F:\workspace\myproject\hooks\after-
 prepare\nativescript-dev-sass.js
 All SASS source files removed from app package
 Executing after-prepare hook from F:\workspace\myproject\hooks\after-
 prepare\nativescript-dev-webpack.js
 Executing after-prepare hook from F:\workspace\myproject\hooks\after-
 prepare\nativescript-unit-test-runner.js
 Building project...
 Gradle build...

Although there are no errors, the nativescript-dev-webpack before-prepare hook does not get called. I have a before-prepareJSApp folder with a nativescript-dev-webpack.js file in my project, but for some reason, it doesn't seem to be invoked.

Another related issue occurs when I try to execute the following command:

 tns build android --bundle --env.aot --env.uglify --env.snapshot

The output of this command simply states:

 The option 'env' is not supported. To see command's options, use '$ tns help build'. To see all commands use '$ tns help'.

I'm wondering if there is something that I might be overlooking. Any insights would be greatly appreciated. Thank you!

Answer №1

@user1513171 it appears that you may be utilizing an outdated version of the NativeScript CLI and/or nativescript-dev-webpack. The flags such as --env.aot were recently added in the most recent releases.

To resolve this issue, make sure to upgrade your NativeScript CLI to the latest version (currently 3.4.x or higher) and update nativescript-dev-webpack to the latest official release (currently 0.9.1)

You can follow a comprehensive guide on migrating to the latest Webpack version here

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

Managing the lifecycles of extended class instances in Angular 2 - what's the best approach?

The code snippet below is causing an issue for me in Angular 2.4.9: export class MyComponent extends BaseComponent implements OnInit { type = 2; constructor() { super(); } ngOnInit(){ console.log('inited type', this.type) } } ...

Unable to render image despite being located in the identical directory

I'm currently working on an Angular component and facing some issues with displaying an image. I've tried hardcoding the img src for now, but eventually, I want to implement it dynamically. Both my component and the image files are located in th ...

angular2 utilize rxjs to search for threads based on user input

Hey there! I'm working on creating a mini forum inspired by stackoverflow and I'm currently in the process of adding a basic text filter for thread titles. I've recently delved into rxjs and pipes, and this is what I've come up with so ...

The Exception: Angular Two ExpressionChangedAfterItHasBeenCheckedError

I have thoroughly reviewed the documentation regarding this error and I believe I comprehend the underlying cause. However, I am currently struggling to find an alternative architecture that would be suitable for my needs. Within the root component of my ...

Module 'ngx-bootstrap' not found in project

My application is encountering an issue with ngx-bootstrap where the module can no longer be detected unless the path is specified. For instance: import { BsModalService, BsModalRef } from 'ngx-bootstrap'; results in "Cannot find module ' ...

What is the most recent stable version of Angular recommended for utilizing ui-bootstrap?

I've been working on updating an older angular application and I'm interested in incorporating ui bootstrap for more advanced features. However, the current version of Angular used is 1.2.18 and any attempt to upgrade it to a higher version resul ...

Webpack fails to transmit watchOptions to the watcher

Having an issue with webpack and wondering if fixing it will require forking the repo. Also, seeking guidance on merging it back in. The problem arises when using the webpack npm module environment in a development virtual machine where code is edited on ...

Challenges associated with adding information to FormData in an Angular Net 5 Application

I'm currently working on developing an application using Angular 11 and .NET 5 and am facing some challenges while trying to implement the file upload feature. I have successfully managed to send pictures to the server, but I'm encountering issue ...

"Enhance your user experience with an Angular material list featuring the ability

I am looking to enhance an angular selection list by allowing users to add new items without losing their current selections. My usual approach involves adding a method in the component to update the data list and then recreating the MatSelectionList bound ...

Requesting access with Angular

Hi there, I'm currently getting started with Angular and I am eager to create a login feature. However, I am unsure of how to send a login request. Despite my efforts to find similar inquiries, the only information available pertains to older question ...

Angular 5 - Keeping track of variable updates

I've searched various topics on this issue, but none seem to address my specific problem. I need a way to detect changes in the properties of a component without having to convert the variable into an array or iterable. I tried using Subject, but coul ...

Issue encountered with the DevExtreme npm module: Uncaught TypeError - $(...).dxButton is not recognized as a function

Instructions for installing DevExtreme npm can be found on their official page here: https://www.npmjs.com/package/devextreme var $ = require('jquery'); require('devextreme/ui/button'); var dialog = require('devextreme/ui/dialog&a ...

Using observables rather than promises with async/await

I have a function that returns a promise and utilizes the async/await feature within a loop. async getFilteredGuaranteesByPermissions(): Promise<GuaranteesMetaData[]> { const result = []; for (const guarantees of this.guaranteesMetaData) { ...

Issue: The 'async' pipe was not found after updating to AOT and IVY

I recently upgraded my project to AOT compliance and ever since, I've been experiencing issues with the | async pipe in my HTML code. Here is an example of what my HTML looks like: <div *ngIf="(mySubscription$| async) != null"> //some ...

What is the process for updating button text upon clicking in Angular?

To toggle the text based on whether this.isDisabled is set to false or true, you can implement a function that changes it when the button is clicked. I attempted to use this.btn.value, but encountered an error. import { Component } from '@angular/core ...

When using the ngFor directive, the select tag with ngModel does not correctly select options based on the specified

Issue with select dropdown not pre-selecting values in ngFor based on ngModel. Take a look at the relevant component and html code: testArr = [ { id : '1', value: 'one' }, { id : '2', ...

What is the best way to perform a deep copy in Angular 4 without relying on JQuery functions?

Within my application, I am working with an array of heroes which are displayed in a list using *ngFor. When a user clicks on a hero in the list, the hero is copied to a new variable and that variable is then bound to an input field using two-way binding. ...

How to properly display an Angular Template expression in an Angular HTML Component Template without any issues?

When writing documentation within an Angular App, is there a way to prevent code from executing and instead display it as regular text? {{ date | date :'short'}} Many sources suggest using a span element to achieve this: <span class="pun"&g ...

What causes a hyperlink to take longer to load when using href instead of routerLink in Angular 2+?

As I work on my web application using angular 2 and incorporating routes, I noticed a significant difference in loading speed based on how I link to another component. Initially, being new to angular, I used the href attribute like this: <a href="local ...

Steps to resolve the 'Cannot assign value to userInfo$ property of [object Object] that only has getter' issue in Angular

I am currently in the process of building a web application using NGXS, and I'm encountering a specific error that I'm trying to troubleshoot. The issue arises when I attempt to fetch data from an API and display it within a column on the page. D ...