My Angular application is set up to use a JSON file. Originally, I was loading it with an HTTP GET request, but more recently I decided to incorporate it directly by enabling JSON support in TypeScript using a Definition file:
declare module "*.json" {
const value: any;
export default value;
}
After that, I started importing it whenever needed:
import * as configuration from '../config.json';
This method works well; the variable configuration holds the JSON object itself.
The issue arises when I package the application with Webpack and want the JSON file to be included in the package separately, not bundled with other files. In other words, config.json should exist as its own individual file within the package rather than being combined with other assets.
I attempted to achieve this using utilities like 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"
}
// ...
]
}
While this approach successfully prevents the JSON file from being merged into the bundle and places it where intended within the package, it also causes the configuration variable to represent the relative path to the JSON file, such as "./config.json", instead of holding the JSON object directly.
Any insights or suggestions on why this behavior might occur?