Question

我在角度6中有以下要求：-

主机应用
包（package1，package2，package3，...）并在主应用程序中导入这些包（在package.json中添加依赖项）

在程序包中，我需要调用外部API。我想将API_URL保留在环境变量中，而不是在代码或某些文件中。

我不确定如何执行此操作。

我想到了两种方法：-

Method 1. set env var in main app and read in packages (not sure on how to read env var in package) 
Method 2. set env var in each package

我在包装中尝试了以下方法（方法2）：-

1. package.json :- 
    "scripts": {
        ...,
        "packagr": "node ./src/set-env.js && ng-packagr -p ng-package.json" 
    }
    "dependencies": {
        ....,
        "dotenv": "^6.0.0"
    }
    (ran npm install)

2. made .env file and mention API_URL env var (.env is in package root)

3. made set-env.js in package's src dir :- 
    src/set-env.js :- 
    const fs = require('fs');
    require('dotenv').config();
    const targetPath = process.env.environment ? `./src/environments/environment.${process.env.environment}.ts` :  `./src/environments/environment.ts`;
    const envConfigFile = `
    export const environment = {
      production: ${process.env.production},
      mock: ${process.env.mock},
      proxy: '${process.env.proxy}',
      API_URL: '${process.env.API_URL}',
      TIMEOUT_SECONDS: ${process.env.TIMEOUT_SECONDS}
    };
    `
    fs.writeFile(targetPath, envConfigFile, function (err) {
      if (err) {
        console.log(err);
      }
      console.log(`Output generated at ${targetPath}`);
    });

4. src/environments/environment.ts :- 
    export const environment = {
      production: false,
      mock: false,
      proxy: 'rest/',
      API_URL: '',
      TIMEOUT_SECONDS: ''
    };

5. import env vars in app.settings.ts :- 
    src/app/app.settings.ts :- 
    import { environment } from '../environments/environment';

    export class AppSettings {
       public static API_ENDPOINT = environment.API_URL;
       public static TIMEOUT_SECONDS = environment.TIMEOUT_SECONDS;
    }

6. import app settings in package's service :- 
    import { AppSettings } from './../app.settings';

    @Injectable()
    export class GpCustomersService {

        SERVICE_URL = AppSettings.API_ENDPOINT;

        constructor(private http: HttpClient) { }

        getIndex() {
            console.log(AppSettings.API_ENDPOINT)
            return this.http.get<GpCustomer[]>(this.SERVICE_URL + '/gp_customers');
        }
    }

7. while packaging (running npm run packagr command), it throws below err :- 
    > <package_name>@1.0.0 packagr /Users/<username>/Projects/angular/<package_name>
    > node ./src/set-env.js && ng-packagr -p ng-package.json

    Output generated at ./src/environments/environment.ts
    Building Angular library
    Generating bundle for <package_name>
    Cleaning bundle build directory
    Processing assets
    Running ngc

    BUILD ERROR
    ENOENT: no such file or directory, open '/Users/<username>/Projects/angular/<package_name>/.ng_pkg_build/<package_name>/ts/<package_name>.js'
    Error: ENOENT: no such file or directory, open '/Users/<username>/Projects/angular/<package_name>/.ng_pkg_build/<package_name>/ts/<package_name>.js'

    npm ERR! code ELIFECYCLE
    npm ERR! errno 111
    npm ERR! <package_name>@1.0.0 packagr: `node ./src/set-env.js && ng-packagr -p ng-package.json`
    npm ERR! Exit status 111
    npm ERR! 
    npm ERR! Failed at the <package_name>@1.0.0 packagr script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR!     /Users/<username>/.npm/_logs/2018-10-16T06_14_32_413Z-debug.log

有人可以帮我解决这个问题，并提出最佳方法吗？

在Angular包中读取ENV变量

0 个答案: