In my current Angular project, I have been utilizing Capacitor. Within my angular.json file, I have set up various build targets such as development, staging, and production. To deploy with different configurations, I use the command
ng build --configuration=<target_name>Now, I am looking to achieve a similar functionality in Capacitor where I can create different builds based on the target. To do this, I made updates to my environment file(s) like so:
export const environment = {
target: 'development',
// ...
}
I also made changes to the capacitor.config.ts file:
import { CapacitorConfig } from '@capacitor/cli';
import {environment} from "./src/environments/environment";
const config: CapacitorConfig = {
webDir: `dist/${environment.target}`,
// ...
}
However, I encountered an issue where the webDir always defaults to dist/development because I couldn't find a way to specify the build target when updating my capacitor project. This means that the environment file used is always environment.ts, rather than being replaced by environment.production.ts if building for production.
Currently, I follow these steps to build for my desired target:
- To build for a specific target:
npx ng build --configuration=<build_target>
- Manually update the
capacitor.config.tsfile:
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
webDir: 'dist/<build_target>',
// ...
}
- Then synchronize the Capacitor project:
npx cap sync ios