Nativescript: How to enableProdMode for nativescript-angular builds?

Created on 6 Aug 2017  路  7Comments  路  Source: NativeScript/NativeScript

There is no --prod flag which can be used to enable prod mode in the tns command.
So how to enable prod mode of Angular?

In a angular cli project, I would build something like this
ng build --aot --prod

I'm looking for similar thing in nativescript tns

I have setup webpack dev nativescript, so I use this command to run the app
npm run ns-bundle --android --run-app

on the console i see this message:
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.

which means angular is not running in prod mode.
Even on the release build the prod mode is not getting enabled.

Can someone please help me with this?

Also on a side note,
With the tns run android command, the start time of my NS-ng app was taking upto 7 seconds,
after setting up webpack, the start time came down to 3 seconds and app size decreased by ~10MB!

question

Most helpful comment

@shiv19 there is no flag to enable the production mode via the NativeScrtip CLI. However, there is a --release flag which you can use with the NativeScript CLIto generate an optimized release build for your mobile application (more here).

You can also use Webpack to bundle and further improve the size and performance of your application and again you can bundle with the release flag. More about bundling with Webpack can be found in this article

To further improve the starting time of your Angular based application you can also implement lazy loading (especially useful when creating application with number of modules)

All 7 comments

Found a way to enable prod mode,
by adding these lines in main.aot.ts

import { enableProdMode } from '@angular/core';

enableProdMode();

before bootstrapping.

But if knows a command line flag which can do this, please let me know.

Update:
After enabling prod mode, I didn't see any considerable changes to app size or start time.
But hopefully, this will help in the long run. Currently, the app only has 1 page.

Update 2:
After adding --uglify flag, the size decreased a little bit, from 11.3 to 11.1 MB, for the same app.

@shiv19 there is no flag to enable the production mode via the NativeScrtip CLI. However, there is a --release flag which you can use with the NativeScript CLIto generate an optimized release build for your mobile application (more here).

You can also use Webpack to bundle and further improve the size and performance of your application and again you can bundle with the release flag. More about bundling with Webpack can be found in this article

To further improve the starting time of your Angular based application you can also implement lazy loading (especially useful when creating application with number of modules)

@NickIliev Thanks Nick,
I implemented webpack and lazy loading yesterday.
Even after that, I saw the console message saying:
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.

And then I called enableProdMode() in main.aot.ts, now that console message is not coming.

Hi @shiv19,
The benefits enableProdMode() is the minimizing of the log that will be displayed. However, this will not affect significantly the performance of your NativeScript application.
Regarding that, I could suggest leaving enableProdMode() option only main.aot.ts file, where it will be executed only when you are web packing your application and while building it for release, where the performance is important.

Hi @tsonevn
Thanks for clearing that for me 馃槃
However, I chose to switch to NativeScript with plain JS.
I'm enjoying the MVVM approach, I like it more than the component approach of angular.

is there a way to have prod builds not omit console.log? I'd like to have my onscreen console monkey patch work in prod so I can show console traces in prod...

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

pocesar picture pocesar  路  3Comments

NickIliev picture NickIliev  路  3Comments

kn9ts picture kn9ts  路  3Comments

valentinstoychev picture valentinstoychev  路  3Comments

yclau picture yclau  路  3Comments