Configuring Angular via a JSON file with Webpack

Question

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';

This works great; config is the JSON object itself.

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.

I tried doing this with file-loader and move-file-loader:

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

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?

alan · Accepted Answer · 2017-12-11 21:59:17Z

1

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';

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

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.

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'                                 
    }
    // ...
    ]
}

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

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

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

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 => {
    // ...
});

where config is the parsed contents of the JSON file.

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

answered Dec 11, 2017 at 21:59

alan

3,5641 gold badge37 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DicBrus Over a year ago

I try to follow your answer but webpack build fails with Module parse failed: Unexpected token e in JSON at position 0 while parsing near 'export default __web...' DO you have any ideas to what it could be related?

alan Over a year ago

@DicBrus I can't be sure without seeing your code but it looks like there's a syntax error in your JSON file. Honestly, I ended up switching back to loading my JSON via HTTP GET because the code was cleaner and easier to maintain.

Collectives™ on Stack Overflow

Configuring Angular via a JSON file with Webpack

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related