Angular에서 앱 이름 및 버전 가져오기

2020년 4월 19일 스위스의 COVID-19 검역이 끝날 때까지 공유합니다. 희망적으로 더 나은 날까지 20일 남았습니다.


오늘, 일요일, 작년에 Ionic 및 Angular으로 개발한 애플리케이션을 업그레이드해야 했습니다. 클라이언트가 마침내 매장에 게시하기로 결정한 것 같기 때문입니다(기술 부채 없이 시작하는 것이 좋습니다 😉).

Angular v9 및 Ionic v5로의 업데이트 프로세스는 순조롭게 진행되었습니다. Cordova 플러그인, 특히 Firebase 전용 플러그인을 업그레이드하는 데 시간이 조금 더 걸렸지만 다행히도 항상 뛰어난 작업을 수행하는 유지 관리자가 공유하는 솔루션을 찾았습니다.

완료되면 여전히 마지막 문제에 직면했습니다. 몇 달 동안 앱을 만지지 않았고 그 동안 Google Analytics는 실제로 사용되지 않았고 해당 플러그인이 오래되어 더 이상 내 플랫폼을 구축할 수 없었습니다.

솔루션을 찾는 대신 기존 GA 구현을 제거하고 예상보다 짧은 시간 내에 새로운 Firebase Analytics 구현으로 마이그레이션했습니다.

웹의 경우 애플리케이션 이름 및 버전으로 배포를 추적하는 옵션을 제공하는 AngularFire 을 사용하고 있습니다.

따라서 Angular에서 애플리케이션의 이름과 버전을 얻거나 읽을 수 있는 방법은 다음과 같습니다.

TypeScript에서 JSON 파일 가져오기

우리는 앱의 이름이나 버전을 복제하고 싶지 않기 때문에 package.json 에서 이를 읽을 것을 제안합니다. TypeScript에서 JSON 파일을 가져오려면 이러한 유형의 데이터를 수락하도록 컴파일러에 지시해야 합니다. 이를 위해 tsonfig.json에서 옵션 resolveJsonModule을 true로 설정합니다.

"compilerOptions": {
  "resolveJsonModule": true
},

환경 변수

환경 변수를 처리하는 편리한 방법은 다중environment.ts 파일을 사용하여 Angular에서 즉시 사용할 수 있습니다. 이것이 우리가 응용 프로그램의 이름과 버전을 "주입"하도록 이를 향상시키는 이유입니다.

import {name, version} from '../../package.json';

export const environment = {
  production: true,
  name,
  version
};

그게 다야, 우리 코드에서 이제 정보 😁에 액세스할 수 있습니다.

AngularFire 분석

나와 같이 AngularFire를 사용하고 이러한 정보를 추적하려면 app.module.ts에서 다음과 같이 진행하십시오. spinet에서 나는 또한 anonymize_ip 를 true 로 설정했습니다. 겸손한 견해로는 항상 그래야 합니다.

import {AngularFireAnalyticsModule, 
       APP_NAME, APP_VERSION, CONFIG} 
       from '@angular/fire/analytics';

import {environment} from '../environments/environment';

@NgModule({
   providers: [
     {
       provide: CONFIG,
       useValue: {
         allow_ad_personalization_signals: false,
         anonymize_ip: true
       }
     },
     {provide: APP_NAME, useValue: environment.name},
     {provide: APP_VERSION, useValue: environment.version}
    ]
})
export class AppModule {
}

요약

동의합니다. 이것은 제가 작성한 가장 깊고 긴 블로그 게시물이 아니지만 미래에 누군가에게 유용할 수 있기를 바랍니다. 아무도 모릅니다 😄.

집에 있어, 안전하게 있어!

데이비드

Joe Chau에 Unsplash님의 표지 사진