通过与一的WebPack JSON文件配置角(Configuring Angular via a J

我的角应用程序配置了JSON文件。 我是通过HTTP加载得到它，但最近决定直接通过添加JSON支持，以打字稿用定义文件包括它：

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

然后导入需要的地方：

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

这个伟大的工程; config是JSON对象本身。

问题是，我用的WebPack捆绑，我想JSON文件是在包，但不能与别的，就是捆绑config.json应在包装自己的文件，而不是与其他被捆绑文件。

我试着用这样的文件加载器和移动文件加载器 ：

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

这可以防止JSON文件被捆绑，并将其放置在那里我希望它在包，但它也使config成为JSON文件的相对路径，即"./config.json" ，而不是JSON对象本身。

为什么这可能是有什么想法？

Answer 1:

显然，文件加载器发出来，装入文件，其中的路径，而不是文件内容本身。 所以

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

使config到含有该文件的路径的字符串是正确的行为。

至于移动文件加载器来讲，因为我使用它与JSON-装载机的“感动”的内容的文件实际上是一个打字稿模块定义，它似乎仍然可以加载文件的捆绑版本而不是“复制”版本。

这些见解使我以下解决方案：首先，我们将在配置的WebPack使用文件复制装载机JSON文件：

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

然后，我们将使用打字稿的要求语法导入由文件加载发出的文件路径

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

此导入方法不需要的JSON定义文件我在的问题提了。

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

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

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

我并不标志着这个作为答案马上万一有人知道如何得到这个工作没有HTTP。

文章来源: Configuring Angular via a JSON file with Webpack