CODEWITHSUNDEEP
angular
LukyFoggy
LukyFoggy

Reputation: 679

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

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.

Upvotes: 8

Views: 3332

Answers (3)

Ernie
Ernie

Reputation: 1

I couldn't comment on the previous answers because I have a new account. I just wanted to add two things. Firstly:

  • Use the copy option if you want a file to have different content in different environments.
  • Use the angular.json option if you just want to include/exclude certain files in different environments.

Secondly, I would like to expand a bit on the angular.json option by adding a more complete example:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "assets": [
      "src/favicon.ico",
      "default/assets/for/all/builds"
    ],
    .
    .
    .
  },
  "configurations": {
    "production": {
      "assets": [
        "assets/for/production/build"
      ],
      .
      .
      .
    },
    "development": {
      "assets": [
        "assets/for/development/build"
      ],
      .
      .
      .
    }
  }
}

When specifying assets for a build (e.g. "production" and "development" in the example above) the default assets (under "options") will not be applied.

Upvotes: 0

djangofan
djangofan

Reputation: 29669

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"
        ],

Upvotes: 7

Milan Tenk
Milan Tenk

Reputation: 2705

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.

Upvotes: 5

Related Questions