英文:
How to use different build targets when running capacitor sync command in an angular project
问题
我目前正在我的Angular项目中使用Capacitor。到目前为止，我在我的angular.json文件中定义了几个构建目标（development、staging和production），并使用ng build --configuration=<target_name>来进行不同配置的部署。
我想要在Capacitor中实现相同的功能，以便根据目标进行不同的构建。我已经将我的环境文件(s)更新如下：
export const environment = {
target: 'development',
// ...
}
并且还更新了capacitor.config.ts文件：
import { CapacitorConfig } from '@capacitor/cli';
import { environment } from "./src/environments/environment";
const config: CapacitorConfig = {
webDir: `dist/${environment.target}`,
// ...
}
然而，这总是导致webDir始终为dist/development，因为我找不到一种在更新Capacitor项目时指定我的构建目标的方法。因此，始终使用environment.ts而不是被environment.production.ts替换（假设我想要为生产环境构建）。
目前，我使用以下步骤来为所需目标构建：
- 为所需目标进行构建：
npx ng build --configuration=<build_target>
- 手动更改
capacitor.config.ts文件：
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
webDir: 'dist/<build_target>',
// ...
}
- 然后更新Capacitor项目：
npx cap sync ios
英文:
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:
- To make a build for my desired target:
npx ng build --configuration=<build_target>
- Manually change the
capacitor.config.tsfile:
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
webDir: 'dist/<build_target>',
// ...
}
- Then update Capacitor project:
npx cap sync ios
答案1
得分: 1
环境文件替换是一个Angular特性，只会替换src文件夹内的代码中的文件。
Capacitor是框架无关的，对于该替换一无所知，而Angular不会替换src文件夹外的源代码中的文件（如capacitor.config.ts）。
因此，您将需要使用一个不涉及Angular替换的不同方法，例如可以这样做：
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;
然后像这样运行同步命令：NODE_ENV=production npx cap sync android。
英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论