How to use different build targets when running capacitor sync command in an angular project

Issue

I am currently using Capacitor in my Angular project. So far, I had defined several build targets (development, staging and production) in my angular.json file and using the ng build --configuration=<target_name> to make deployments with different configuration.

I would like to achieve the same functionality in Capacitor so I can make different builds based on the target. I updated my environment file(s) as follows:

export const environment = {
  target: 'development',
  // ...
}

And also updated the capacitor.config.ts file:

import { CapacitorConfig } from '@capacitor/cli';
import {environment} from "./src/environments/environment";

const config: CapacitorConfig = {
  webDir: `dist/${environment.target}`,
  // ...
}

However, this always results in webDir being dist/development because I could not find a way to specify my build target when updating my capacitor project. Therefore, the environment file being used is always environment.ts, instead of being replaced by environment.production.ts (assuming I wanted to build for production).

At the moment I use the following steps to build for my desired target:

1. To make a build for my desired target:

npx ng build --configuration=<build_target>

2. Manually change the capacitor.config.ts file:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  webDir: 'dist/<build_target>',
  // ...
}

3. Then update Capacitor project:

npx cap sync ios

Solution

The environments file replacement is an angular thing and only replaces the file in the code inside the src folder.

Capacitor is framework agnostic and knows nothing about that replacement and angular is not replacing the file for source code outside the src folder (like capacitor.config.ts).

So you'll have to use a different approach that doesn't involves the angular replacement, in example you can do something like this:

import { environment as devEnvironment } from './src/environments/environment';
import { environment as prodEnvironment } from './src/environments/environment.prod';

const environment = process.env.NODE_ENV === 'production' ? prodEnvironment : devEnvironment;

and run the sync command like this NODE_ENV=production npx cap sync android

Answered By - jcesarmobile