NativeScript Angular: Setup environment.ts for Different Environments

Derek Fong
Dec 29, 2018 · 2 min read
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.

We are going to pass the environment value to Webpack by specifying the --env.environment="<environment_name>" option.

For example, to build an Android package targeted to the foo environment:

$ tns build android --bundle --env.environment="foo"

Step 3: Modify src/environments/environment.*.ts

We are going to create:

  • environment.dev.ts for both web, Android and iOS platforms to export development-specific environment variables.
  • environment.tns.ts for Android and iOS platforms to return environment-specific variables provided by the --env.environment="<environment_name>" option mentioned above. This file will only be used by mobile platforms because running any tns command (e.g tns run, tns build, etc. ) replaces any *.tns.ts files to *.ts files. More info here.

We are going to modify:

  • environment.ts for web platform to export environment.dev.ts as-is, since Angular CLI handles environment-specific setup for web apps.
  • environment.prod.ts basically can be left as untouched. That being said, to demonstrate the setup in action, we are going to add an apiUrl variable:

See It In Action

To demonstrate the setup is working, modify home.component.ts, home.component.html and home.component.tns.html as follow:

Now if you try to run any of the commands below:

$ ng serve
$ tns run android --bundle
$ tns run ios --bundle

API URL should be shown as http://localhost:4000/api

And if you try to run any of the commands below:

$ ng serve --prod
$ tns run android --bundle --env.environment="prod"
$ tns run ios --bundle --env.environment="prod"

API URL should be shown as http://foo.bar/api

Derek Fong

Written by

Web Developer • Angular • React • NativeScript • GraphQL

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade