typescript - Hur man använder olika byggmål när man kör kommandot capacitor sync i ett Angular-projekt


Jag använder för närvarande Capacitor i mitt Angular-projekt. Hittills har jag definierat flera byggenheter (development, staging och production) i min angular.json-fil och använder ng build --configuration=<target_name> för att göra distributioner med olika konfigurationer.

Jag skulle vilja uppnå samma funktionalitet i Capacitor så att jag kan göra olika byggen baserat på målet. Jag uppdaterade mina miljöfil(er) enligt följande:

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

Och uppdaterade även filen capacitor.config.ts:

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

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

Men detta resulterar alltid i att webDir blir dist/development eftersom jag inte kunde hitta ett sätt att specificera mitt byggmål när jag uppdaterade mitt capacitor-projekt. Därför används alltid miljöfilen environment.ts, istället för att ersättas av environment.production.ts (förutsatt att jag ville bygga för produktion).

För närvarande använder jag följande steg för att bygga för mitt önskade mål:

  1. För att göra en byggnation för mitt önskade mål:
npx ng build --configuration=<build_target>
  1. Ändra manuellt filen capacitor.config.ts:
import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  webDir: 'dist/<build_target>',
  // ...
}
  1. Uppdatera sedan Capacitor-projektet:
npx cap sync ios

Svar #1

Byt av miljöfilsfilen är en Angular-grej och ersätter endast filen i koden inne i src-mappen.

Capacitor är ramverksoberoende och vet ingenting om den ersättningen, och Angular ersätter inte filen för källkod utanför src-mappen (som capacitor.config.ts).

Så du kommer att behöva använda en annan metod som inte innebär den angulära ersättningen, till exempel kan du göra något liknande detta:

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;

och kör synkroniseringskommandot så här NODE_ENV=production npx cap sync android