Angular 4 environment specific robots.txt

Question

Is there anyway to make environment specific assets to be loaded depending on the build environment (dev, stage, prod). My assets configuration in .angular-cli.json looks like this:

"assets": [
			"assets",
			"favicon.ico",
			"web.config",
			"188e5a3d.png",
			"robots.txt"
		],

and I need to load different robots.txt file based on the build environment. I don't run the application on the Apache server so I don't have htaccess file to make there some configurations.

Thank you.

Smelly

Answer 1

you can keep all different robots.txt file in assets and create multiple environment files for each environment.

eg Prod : environment.prod.ts, environment.stage.ts

and angular-cli.json add configuration for these files

in environment.prod.ts file add the URLs for prod configuration robots.txt url.

you can access these urls in constants.ts lik roboturl: environment.robotUrl.

it will get url based on build configuration

Ewold

I already have different environments, but they are specified in app array -> "environments". Can you give me an example how to config different assets files for different environment. Thank you – Smelly

Sorry I was busy will provide you – Ewold

robots.txt need to be in the root directory, and doesn't need to be linked to from the app. I don't think this is a solution. – Morganstein

Answer 2

Step 1

Create one folder called robots, and 3 subfolders inside called development, staging and production (or whatever environments you want). Then, in each of subfolders create environment specific robots.txt file.

Step 2

In angular.json file, specify assets separately for each environment:

{
  "architect": {
    "build": {
      "configurations": {
        "configurations": {
          "production": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest",
              {
                "glob": "robots.txt",
                "input": "src/robots/production/",
                "output": "./"
              }
            ],
            ...
          },
          "staging": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest",
              {
                "glob": "robots.txt",
                "input": "src/robots/staging/",
                "output": "./"
              }
            ],
            ...
          },
          "development": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest",
              {
                "glob": "robots.txt",
                "input": "src/robots/development/",
                "output": "./"
              }
            ],
            ...
          }
        }
      }
    }
  }
}

Conjunctiva

Answer 3

There are several ways to implement different robots.txt for the different environments.

• Most common way

You can create all different robots.txt like robots.txt, robots-staging.txt and robots-prod.txt.

And in the angular.json, you can change the content of robots.txt using fileReplacements while building the app depending on building mode.

{
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular": {
      "root": "",
      "projectType": "application",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/app/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.browser.json",
            "deployUrl": "/",
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src",
                "output": "/"
              },
              {
                "glob": "robots.txt",
                "input": "src",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ],
            "styles": [
              "src/styles.scss",
            ],
            "scripts": [
              "src/assets/js/bootstrap-select.min.js",
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                },
                {
                  "replace": "src/robots.txt",
                  "with": "src/robots-prod.txt"
                }
              ],
              ...
            }
          }
        },
        ...
}

• Deployment pipeline

In this case you can use CI/CD tool in order to create or change the robots.txt.

You can refer how to do that in the relevant document.

Hope this helps you!

Ghee

This is not working anymore (see github.com/angular/angular-cli/issues/…). The file replacements should only be used for .ts. – Weka