ウェブとdotenvと角度ユニバーサルenv変数

先週は何らかの理由で仕事を止めました.変数は予想通りインポートされませんでした.
これはあなたのために動作しない場合は、ここでは、WebPackバージョンです.Webpackを使うのは、実際にビルドプロセスを遅くしてしまうのでしょうか?それは避けるべきですか?コメントしますか?私は、あなたが可能なときにどんな外部の依存関係も避けるべきであると考えています、しかし、これは無名242479142を使います.
角度ユニバーサルによる指示は、ここにあります.私は、他の人がいつものように複雑になっているように見えたので、私はGoogleで異なる結果をコンパイルしなければなりませんでした.対角 ͜ʖ ͡°)

依存関係のインストール

npm i -D @angular-builders/custom-webpack
npm i -D @angular-builders/dev-server
npm i -D dotenv

カスタムウェブパックを作成します。設定。TS

常にTypeScriptを使用してください!これはすべてのJS開発会社のルールである必要があります.これをルートディレクトリに置きます.

import { EnvironmentPlugin } from 'webpack';
import { config } from 'dotenv';

config();

module.exports = {
  plugins: [
    new EnvironmentPlugin(['FIREBASE_API_DEV', 'FIREBASE_API_PROD'])
  ]
}

もちろん、ここでFireBaseの例を使っています.JSONファイルとしてインポートできます.

環境ファイルの編集

環境.供述する

export const environment = {
  production: true,
  firebase: JSON.parse(process.env.FIREBASE_API_PROD as string)
};

あなたがちょうどストリングを輸入しているならば、あなたはprocess.envをここで必要としません.すべての環境バージョンファイルで同じことをします.

角度を編集します。JSON

プロジェクトを置き換えます.建築家.ビルド.ビルダー
から:

@angular-devkit/build-angular:browser

です.

@angular-builders/custom-webpack:browser

プロジェクトを置き換えます.建築家.サーブ.ビルダー
から:

@angular-devkit/build-angular:dev-server

です.

@angular-builders/custom-webpack:dev-server

プロジェクトを置き換えます.建築家.テスト.ビルダー
から:

@angular-devkit/build-angular:karma

です.

@angular-builders/custom-webpack:karma

プロジェクトを置き換えます.建築家.サーバ.ビルダー
から:

@angular-devkit/build-angular:server

です.

@angular-builders/custom-webpack:server

以下を追加します.
プロジェクト.建築家.サーバ.オプション
プロジェクト.建築家.ビルド.オプション
プロジェクト.建築家.テスト.オプション

"customWebpackConfig": {
  "path": "./custom-webpack.config.ts"
},

クリエイトユア.envファイル

あなたの変数をいつものようにJSON.parse()ファイルに入れてください.

FIREBASE_API_DEV={"apiKey":"..." ...}
FIREBASE_API_PROD={...}

を行います.あなたが例を必要とするならば、ここではmy repositoryです.
J