如何啓動一個JSON配置文件的角2模塊，而無需使用http.get方法

我有根一個JSON文件：如何啓動一個JSON配置文件的角2模塊，而無需使用http.get方法

config.json

{ "base_url": "http://localhost:3000" }

，並在我的服務類，我想以這種方式來使用它：

private productsUrl = config.base_url + 'products';

我發現噸的職位與要求http.get請求加載一個文件來獲得，要麼解決方案的一個變量或角過時的解決方案。 js（角1）

我不相信沒有一個更簡單的方法來包括我們已經有了這個文件，而無需向服務器發出額外的請求。

在我看來，我本來預計至少引導功能將能夠提供這種功能，是這樣的：

platformBrowserDynamic().bootstrapModule(AppModule, { config: config.json });

順便說一句，這工作，但它不是理想的解決方案：

export class Config { 
    static base_url: string = "http://localhost:3004/"; 
}

，並使用它在你需要它：

private productsUrl = Config.base_url + 'products';

它並不理想，因爲我將不得不在構建腳本中創建類（或替換屬性）。（正是我想要做的config.json文件）。

我仍然更喜歡config.json文件的方法，因爲它不會侵入TypeScript編譯器。任何想法如何做是值得歡迎的，真的很感激！

來源

2017-07-16 WilliamX

你可以看看Angular CLI如何管理'.environment.ts'文件，這是解決這個問題的方法之一 - https://github.com/angular/angular-cli/wiki/build#build-targets -and-environment-files – jonrsharpe

該鏈接僅指構建過程，我需要應用程序運行時的變量。我已經有了我需要用於構建的環境變量，主要問題是將這些變量注入到應用程序中。 – WilliamX

在這種情況下，它將很大程度上取決於您如何部署應用程序，而您尚未提及該應用程序。爲了將一些特定於env的狀態轉換爲靜態部署的Angular應用程序，我們使用了服務器端包含，但目前尚不清楚這是否是您的選擇。 – jonrsharpe

你使用的是webpack嗎？如果你是，你可以做

const config = require('./config.json'); 

@Injectable() 
export class MyService { 
    private config:any = config; 
    .... 
}

在你的WebPack的配置，你需要的JSON裝載機

... 
    module: { 
    ... 
    loaders: [ 
     ... 
     { 
     test: /\.json$/, 
     loaders: ["json-loader"] 
     }, 
     ... 
    ] 
    } 
    ...

來源

2017-07-16 16:51:42 eotoole

即時通訊使用System.js，但如果這與webpack的工作，我想我知道如何適應它System.js。讓我檢查一下它是否有效，是的，這很可能是我正在尋找的。順便說一句，它會代表任何直接解釋json文件的風險嗎？我只是好奇，爲什麼這種支持不會開箱即用。 – WilliamX

你所描述的是相當開放的....一個xhr到一些json文件。 Angular對你的js是不可知的。 jonrsharpe提供了「開箱即用」的答案。如果上面的方法並不適用於systemjs，並且你確實需要一個獨立的XHR請求，則考慮：如此，而不是 doRunYourBootstrapCode（）你可以做 doLoadYourJsonWithHttpGet（），然後（JSON =>。 {jrnd}; }）; 我會嘗試加載它通過systemjs和無論你用於「打包」第一，因爲它是一個少打電話。祝你好運。 – eotoole

真棒@eotoole，這正是我正在尋找的。如果我將Angular理解爲一個「包含」的JavaScript塊/函數集合，那麼您需要指示模塊加載器如何加載json是合理的。添加System.js版本作爲附加答案。 – WilliamX

This link explains how to use System.js to load json files in an angular app.

特別感謝@eotoole是指出我在正確的方向。

如果上面的鏈接不夠清楚，只需在System.js conf中添加一個映射即可。像這樣：

map: { 'plugin-json': 'https://unpkg.com/systemjs-plugin-json' } *

*（使用外部包）

或

map: { 'plugin-json': 'plugin-json/json.js' } **

**如果從下載插件：

official system.js plugin

現在我可以使用：

const config = require('./config.json');

anywere在我的應用程序。

由於它是官方的「systemjs」 - 夥計們，我很樂意使用它來加載像base_url或其他端點的應用程序設置。

現在我需要弄清楚如何封裝這個邏輯用於測試目的。可能需要在自己的類中使用該文件並替換特定測試用例的值。

來源

2017-07-17 16:42:11 WilliamX

如何啓動一個JSON配置文件的角2模塊，而無需使用http.get方法

回答

相關問題