6

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.

Ognyan
  • 103
  • 1
  • 5

3 Answers3

1

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": "./"
              }
            ],
            ...
          }
        }
      }
    }
  }
}
NeNaD
  • 18,172
  • 8
  • 47
  • 89
0

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!

Christian Soto
  • 2,540
  • 2
  • 15
  • 33
  • 5
    This is not working anymore (see https://github.com/angular/angular-cli/issues/14599#issuecomment-497704073). The file replacements should only be used for .ts. – C0ZEN Apr 14 '20 at 14:32
-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

Dharmaraj Kavatagi
  • 305
  • 2
  • 6
  • 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 – Ognyan Jul 23 '18 at 14:35
  • Sorry I was busy will provide you – Dharmaraj Kavatagi Jul 24 '18 at 15:43
  • 2
    `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. – David Poxon Jul 29 '18 at 23:01