Блог

Главная - Вопросы по программированию - использование webpack 2 DefinePlugin с проектом на основе angular-cli

использование webpack 2 DefinePlugin с проектом на основе angular-cli

#angular #webpack #angular-cli #webpack-2

#angular #webpack #angular-cli #webpack-2

Вопрос:

Я пытаюсь преобразовать angular2 с проектом webpack2 в проект на основе angular-cli.

если я правильно понял, angular-cli теперь поддерживает webpack. в моем первоначальном проекте я ввел следующее app.config.js :

 module.exports =  {
    webServer: {
        appBaseHref : JSON.stringify("/")
    },
    auth0: {
        apiKey: JSON.stringify("API_KEY"),
        domain: JSON.stringify("DOMAIN.auth0.com"),
        callbackUrl: JSON.stringify("CALLBACK_URL")
    }
};

добавив webpack.config.js в файл следующее:

 const appConfig = require("./config/app.config");
const DefinePlugin = require("webpack/lib/DefinePlugin");
...
module.exports = {
    plugins: [
       new DefinePlugin({
           APP_CONFIG: appConfig
       }),
...

затем в моем проекте typescript я бы объявил APP_CONFIG с declare var APP_CONFIG:any; помощью, а затем использовал бы его свойства. как я могу внедрить такой объект в проект angular-cli?

Спасибо

Комментарии:

1. Разве вы не можете просто создать сервис для этого?

2. @Chrillewoodz — да.. Я могу .. пытаюсь понять, почему я сделал это с webpack в первую очередь, но у меня ничего не получилось 🙂 что мне делать? вы хотите опубликовать его в качестве ответа? должен ли я удалить этот вопрос?

3. Дай мне минутку.

4. Итак, я хочу то же самое — чтобы я мог вводить номера сборки. Не уверен, что ответ службы будет работать для меня. Я хотел бы иметь глобальное значение, подобное APP_VERSION, и установить его в childProcess.execSync('git rev-list HEAD --count').toString();

Ответ №1:

Вот простой пример, который просто использует обычный сервис с set get методом and:

 import {Injectable} from '@angular/core';

@Injectable()

export class AppConfigService {

  public config: any = {
    apiKey: '[api_key]',
    domain: '[domain]',
    callbackUrl: '[callbackUrl]'
  }

  constructor() {}

  /* Allows you to update any of the values dynamically */
  set(k: string, v: any): void {
    this.config[k] = v;
  }

  /* Returns the entire config object or just one value if key is provided */
  get(k: string): any {
    return k ? this.config[k] : this.config;
  }
}

Для более сложных вариантов использования вы можете вместо этого преобразовать его в observable, но я не вижу необходимости в этом простом случае.

Метки: