Как изменить значение переменной в index. html в зависимости от среды в angular

Question

Как я могу изменить значение config.apiKey на основе angular сред, таких как Разработка и Производство.

For Production config.appKey = 'AB-AAB-AAB-MPR';

For Development config.appKey = 'AC-DDR-SST-DKR';

Please find the code for reference.

`<script charset='UTF-8'>
    window['adrum-start-time'] = new Date().getTime();
    (function(config){
        config.appKey = 'AC-DDR-SST-DKR';
    })(window['adrum-config'] || (window['adrum-config'] = {}));
  </script>
`

Thanks

Answer 1

Чтение файла среды в индексе. html будет затруднительно. Я не говорю, что это невозможно, возможно, для этого есть обходной путь. Но я рекомендую вам сделать это в файле app.component.ts на

ngOnInit() {
    this.loadScript();
}

private loadScript() {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.innerHTML = 'window["adrum-start-time"] = new Date().getTime(); (function(config){ config.appKey = ' + environment.key + '; })(window["adrum-config"] || (window["adrum-config"] = {}));';
    const head = document.getElementsByTagName('head')[0];
    if (head !== null && head !== undefined) {
      document.head.appendChild(script);
    }
}

Надеюсь, это решит проблему

Answer 2

export const environment = {
  production: true,
  apiUrl: 'http://my-api-url',
  appKey: 'AC-DDR-SST-DKR'
};

проверьте файл angular. json для конфигурации fileReplacements, вот он: stackblitz

Answer 3

вы можете просто использовать env-файлы для управления различными средами, или вы также можете использовать это, которое я использую в моем приложении реакции, как показано ниже в вашем пакете. json использовать

 "start": "react-scripts start",
        "start:staging": "REACT_APP_BUILD_TYPE=staging  npm start",
        "start:prod": "REACT_APP_BUILD_TYPE=production  npm start",
        "build": "REACT_APP_BUILD_TYPE=production react-scripts build",
        "build:staging": "REACT_APP_BUILD_TYPE=staging react-scripts build",
},

и файл, который вы написали выше, можно использовать как

"REACT_APP_BUILD_TYPE=staging ? config.appKey = 'AB-AAB-AAB-MPR' : config.appKey = 'AC-DDR-SST-DKR';

Answer 4

Использование может либо просто использовать isDevMode()

, либо использовать этот способ

└──myProject/src/environments/
                   └──environment.ts
                   └──environment.prod.ts
                   └──environment.stage.ts

export const environment = {
  production: false,
  apiUrl: 'http://my-api-url'
};

export const environment = {
  production: true,
  apiUrl: 'http://my-prod-url'
};

Подробнее о angular guide

Answer 5

Вы можете найти решение здесь: Как использовать переменную среды в индексе. html для Angular 6

TL, DR: использовать файлы для каждой среды и настроить ее в angular. json

Answer 6

вы можете добавить эти ключи в файлы environment.ts и environment.prod.ts, поэтому вам нужно написать ключ API разработки в environment.ts и ключ производства в environment.prod.ts, так что если вы создаете сборку с помощью этой команды ng build --prod это займет ключ API из файла environment.prod.ts. Вот пример

environment.ts

export const environment = {
  production: false,
  appKey: 'AB-AAB-AAB-MPR';
};

environment.prod.ts

export const environment = {
  production: true,
  appKey: 'AC-DDR-SST-DKR';
};

сервис

// here we are importing our environment like this 
import { environment } from '../../environments/environment';

getData() {
   console.log(environment.apiKey);
// here you will get the apiKey based on your environment if it is dev environment then it take the "apiKey" from environment.ts and if it is production env then it will take the "apiKey" from the environment.prod.ts
// api call or other business logic 
}

Answer 7

Вы можете использовать angular. json для замены файла index.html. просто создайте копию index.html и назовите ее index.env.html, а затем в вашем angular.json вы можете использовать fileReplacements в вашем специфике c env, как показано ниже

"fileReplacements": [
    {
        "replace": "src/index.html",
        "with": "src/index.env.html"
    }
]