NativeScript Angular: Setup environment.ts for Different Environments

Image Source: mobidev.biz

TL;DR Utilizing Angular’s environment.*.ts for Web, Android, and iOS applications by leveraging Angular CLI and NativeScript Schematics in just a few easy steps.

Code-sharing between Angular web and NativeScript mobile apps is now possible thanks to the NativeScript Schematics project. However, at the time of writing, managing environment variables with Angular’s environment.*.ts files targeting for different environments is still a missing feature in nativescript-angular projects. This article outlines the steps to enable this feature in just a few easy steps.

Step 1: Create NativeScript Angular Code-share Project

$ ng new --collection=@nativescript/schematics my-shared-app --shared

Note: You can specify additional options when generating new applications.

Step 2: Modify webpack.config.js

Pass an environment variable to the Webpack build to specify target environment (e.g. prod, dev, etc.). Please note the value of environment here can be any string value to identify a target environment and has nothing to do with the NODE_ENV environment variable.