使用Webpack通过JSON文件配置Angular [英] Configuring Angular via a JSON file with Webpack

问题描述

我的Angular应用配置了一个JSON文件.我当时是通过HTTP GET加载的，但最近决定通过使用定义文件向TypeScript添加JSON支持来直接包含它:

My Angular app is configured with a JSON file. I was loading it via an HTTP GET, but recently decided to include it directly by adding JSON support to TypeScript with a Definition file:

declare module "*.json" {
    const value: any;
    export default value;
}

然后将其导入到需要的地方:

And then importing it where needed:

import * as config from '../config.json';

这很好用； config是JSON对象本身.

This works great; config is the JSON object itself.

问题是我与Webpack捆绑在一起，并且我希望JSON文件位于软件包中，但不与其他任何东西捆绑在一起，也就是说，config.json应该是软件包中自己的文件，而不是与其他文件捆绑在一起.

The problem is that I'm bundling with Webpack and I want the JSON file to be in the package, but not bundled with anything else, that is, config.json should be its own file in the package, rather than being bundled with other files.

我尝试使用文件加载器和

这可以防止JSON文件被捆绑并将其放置在包中的所需位置，但这也使config成为JSON文件(即"./config.json")的相对路径，而不是JSON对象本身

This prevents the JSON file from being bundled and places it where I want it in the package, but it also makes config become the relative path to the JSON file, i.e., "./config.json", rather than the JSON object itself.

对为什么会这样有任何想法吗?

Any thoughts on why this might be?

推荐答案

显然，文件加载器发出的是文件加载路径，而不是文件内容本身.所以

Apparently file-loader emits a path to where the file was loaded, rather than the file contents itself. So

import * as config from '../config.json';

将config制成包含文件路径的字符串是正确的行为.

making config into a string containing a path to the file is the correct behavior.

就移动文件加载器而言，由于我将其与json-loader一起使用，因此已移动"文件的内容实际上是TypeScript模块定义，并且似乎仍在加载捆绑版本而不是复制"版本.

As far as move-file-loader is concerned, since I'm using it with json-loader, the contents of the "moved" file is actually a TypeScript module definition, and it seems to still be loading a bundled version of the file rather than the "copied" version.

这些见解将我引向以下解决方案:首先，我们将在Webpack配置中使用文件加载器复制JSON文件:

These insights lead me to the following solution: First of all, we'll copy JSON files using file-loader in the Webpack config:

module: {                                                                    
    rules: [  
    // ...  
    {                                                                        
       test: /\.json$/,                                                       
       loader: 'file-loader?name=[name].json'                                 
    }
    // ...
    ]
}

然后，我们将使用TypeScript的require语法导入文件加载器发出的文件路径

Then we'll import the file path emitted by file-loader using TypeScript's require syntax

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

此导入方法不需要我在问题中提到的JSON定义文件.

This import method doesn't require the JSON definition file I mention in my question.

最后，我们可以通过HTTP GET从文件加载器路径加载文件:

Lastly, we can load the file from its file-loader path via an HTTP GET:

http.get(configFile).map(res => res.json()).catch((error: any): any => {
    // ...
}).subscribe(config => {
    // ...
});

其中config是JSON文件的解析内容.

where config is the parsed contents of the JSON file.

如果有人知道如何在不使用HTTP的情况下工作，我不会立即将其标记为答案.

I won't mark this as the answer right away in case someone knows how to get this working without HTTP.

这篇关于使用Webpack通过JSON文件配置Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！