How to create and read file in dist folder in Angular 5

Question

When my Angular 5 app is deployed to Cloud Foundry, the process there generates a app-number-version file in the dist folder that simply contains the version number (like "1.0.0" for example).

My task is to display this version number in the HTML of our app's navigation bar. My question is, how can I do something like this locally on my development environment (generate a file in my dist upon each build) and then how to display the text from this file in my HTML component? I don't really care what my local dev environment has in the version file as it will get overwritten when built on Cloud Foundry, and I'm only using it locally to be able to read and display a value as I develop to make sure it's working.

Nadhir Falta · Accepted Answer · 2018-01-25 16:35:55Z

2

You can add that file anywhere under your app /src and then in your .angular-cli.json -> assets -> you add the path to that array (which the cli at the build time will copy it and add it to the root of the dist folder.

and then in your code you can point to that file and grab any data your want from like you usually do with other files in your project.

this will happen locally, and of course the process Cloud Foundry later will override that file, but the code will still point to that file.

Check what I'm doing with app-number-version.ts file here:

|_src  
  |___ app  
  |___ web.config  
  |___ app-number-version.ts

...
"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "app-number-version.ts",  <=== this will get moved to the root of dist folder
        "manifest.json"
      ],
    }
 ]
...

answered Jan 25, 2018 at 16:35

Nadhir Falta

5,2872 gold badges25 silver badges43 bronze badges

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

2 Comments

Andy Over a year ago

Thank you. This worked beautifully. To read it, I called http.get with the path to the file instead of a URL with a responseType of "text" and was able to get the contents now.

Nadhir Falta Over a year ago

Perfect @Andy!! Glad to hear that

Collectives™ on Stack Overflow

How to create and read file in dist folder in Angular 5

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related