Angular 5 - Configuration files missing in dist folder

Question

I have an Angular application that has a configuration file. It is in src/data/configuration.json. When I build the application using ng build --prod I don't see the configuration file in the dist folder. How does Angular know where to pull the configuration if the file is not present in dist folder, especially when the contents of dist folder are hosted stand alone in an S3 bucket or hosted using nginx?

Answer 1

From Angular 7, imported .json files will be built into your dist. This is a feature of TypeScript from version 2.9 and beyond.

But in Angular 5, with Typescript versions before 2.9 - you need to explicitly declare .json files that you want included in the built distribution.

You need to update your angular.json file as such:

"assets": [
  "src/assets",
  "src/data/configuration.json"
]

And then allow import of json modules into typings.d.ts file to prevent from typescript errors:

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

Now import the .json file like this in your .ts sources:

import * as myJson from 'src/data/configuration.json';

The file should now be included in the dist/ directory on build.

Please see this answer for more details on how to consume the json files Importing json file in TypeScript.