Converting existing Angular CLI project fails when environments have custom names

[mehrad-rafigh]

Hi guys,

I am trying to convert an existing Angular CLI Project with the nx schematics. We are using mutilple environment files which are called environment.gcpdev.ts, environment.gcpuat.ts and environment.gpcprod.ts

Using ng add @nrwl/schematics returns the following error: Cannot read property 'fileReplacements' of undefined

Output of ng --version

Angular CLI: 6.1.4
Node: 8.11.4
OS: darwin x64
Angular: 6.1.3
... animations, common, compiler, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.4
@angular-devkit/build-angular     0.7.4
@angular-devkit/build-optimizer   0.7.4
@angular-devkit/build-webpack     0.7.4
@angular-devkit/core              0.7.4
@angular-devkit/schematics        0.7.4
@angular/cdk                      6.4.6
@angular/cli                      6.1.4
@angular/compiler-cli             6.1.1
@angular/flex-layout              6.0.0-beta.17
@angular/material                 6.4.6
@ngtools/webpack                  6.1.4
@schematics/angular               0.7.4
@schematics/update                0.7.4
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.9.2

Any ideas how to fix this? The only thing I could think of right now, is to rename the environment files back to their first names, when the CLI created them. Thanks!

[FrozenPandaz]

I am almost certain I know what the issue is but just to confirm, can you please paste the angular.json?

[mehrad-rafigh]

Hi @FrozenPandaz Thanks for the quick response!

{
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "frontend-bootstrapper": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": ["src/assets", "src/favicon.ico"],
            "styles": ["src/styles.scss"],
            "scripts": []
          },
          "configurations": {
            "gcpdev": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.gcpdev.ts"
                }
              ]
            },
            "gcpprod": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.gcpprod.ts"
                }
              ]
            },
            "gcpsandbox": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.gcpsandbox.ts"
                }
              ]
            },
            "gcpuat": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.gcpuat.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "frontend-bootstrapper:build"
          },
          "configurations": {
            "gcpdev": {
              "browserTarget": "frontend-bootstrapper:build:gcpdev"
            },
            "gcpprod": {
              "browserTarget": "frontend-bootstrapper:build:gcpprod"
            },
            "gcpsandbox": {
              "browserTarget": "frontend-bootstrapper:build:gcpsandbox"
            },
            "gcpuat": {
              "browserTarget": "frontend-bootstrapper:build:gcpuat"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "frontend-bootstrapper:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [],
            "styles": ["src/styles.scss"],
            "assets": ["src/assets", "src/favicon.ico"]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
            "exclude": []
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "gcpdev": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.gcpdev.ts"
                }
              ]
            },
            "gcpprod": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.gcpprod.ts"
                }
              ]
            },
            "gcpsandbox": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.gcpsandbox.ts"
                }
              ]
            },
            "gcpuat": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.gcpuat.ts"
                }
              ]
            }
          }
        }
      }
    },
    "frontend-bootstrapper-e2e": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "frontend-bootstrapper:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["e2e/tsconfig.e2e.json"],
            "exclude": []
          }
        }
      }
    }
  },
  "defaultProject": "frontend-bootstrapper",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "cg",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "cg"
    }
  }
}

[FrozenPandaz]

For anyone willing to tackle this:

This area of code should be changed into a loop over the keys of the object (excluding options):

https://github.com/nrwl/nx/blob/d6ff7244c7a87ac4135934d232656f4a10d90b43/packages/schematics/src/collection/ng-add/index.ts#L168

[FrozenPandaz]

For a quick fix, you are correct, you can rename one to production and then reconfigure the rest manually.

Make sure the filePathReplacements point to the appropriate locations after your files are moved.

[mehrad-rafigh]

Well after some changes I got the same error described in #624 I will create a blank workspace and move things over there

[FrozenPandaz]

This issue is solved with https://github.com/nrwl/nx/pull/768. 😃

[jbeckton]

I get "Cannot read property 'architect' of undefined" when trying to convert a brand new angular project to nx workspace. My project was generated with the angular cli then I added Universal then tried to convert it to an nx workspace and it failed.

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.