Angular Build-Config: add conditional file (robots.txt)

user_8581106 0
Viewed 1061

I have two build configurations "production" and "development". By selecting one of the following two commands I can decide for which config I want to build the app:

  1. ng build --configuration=development
  2. ng build --configuration=production

And in the angular.json I specify the build options for each config:

        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
           .
           .
           .
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "index": {
                "input": "src/index.prod.html",
                "output": "index.html"
              },
              .
              .
              .
            },
            "development": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
              .
              .
              .
            }
          }
        },

Basically I change the environment.ts as well as the index.html according to the selected build config.

Is there a way to have two robots.txt files in the project folder, for instance robots.dev.txt and robots.prod.txt and conditionally add one of them as robots.txt to the dist folder during the build? Pretty much how I do it with the index file. The purpose is to prevent all search engine robots from indexing my development build, but allow them to index the production build.

angular
2 Answers

I don't think that this can be handled from the angular.json.

As an alternative, the robots.txt can be copied as a post-build step. To do this, install copy npm package to have a copy CLI command, which is cross-platform:

npm install copy --save-dev

Add to the package.json a script for the production build with following commands:

"build:prod": "ng build --prod && copy robots.txt dist"

Run npm run build:prod to have a production build with robots.txt in it.

The above example assumes, that the robots.txt is in the same directory as the package.json and it assumes, that the built app is in the root of the dist folder.

Update

If the copied file needs to be renamed the copy-file-from-to package could be used. It is especially handy if there are more files from different sources and they also need to be renamed. To use it in the context of the question do the following steps:

Install the thirdpaty as development dependency:

npm install copy-files-from-to --save-dev

Create a configuration file for copy-files-from-to named as copyFiles.json in the root of the project with following content:

{
    "copyFiles": [
        {
            "from": "robots.dev.txt",
            "to": "dist/robots.txt"
        }
    ]
}

Create an npm script, that uses copy-files-from-to with the above config:

"build:prod": "ng build --prod && copy-files-from-to --config copyFiles.json"

Run npm run build:prod and the robots.dev.txt content will be copied after the build in dist/robots.txt.

user_26143130

Here is how I did it.

In my angular.json file, I defined assets to be included in the architect->build->options:

        "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/robots.txt",
          "src/sitemap.txt"
        ],
user_1182280
Related