Environment issue in Angular when try to build

Question

When I try to build an Angular project I have this issue :

File '/angular/src/environments/environment.ts' is not a module

I import the file like this :

import { environment } from '../../environments/environment';

My tsconfig.json :

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

In my environment folder I have files: environment.ts, environment.prod.ts, environment.dev.ts.

I use NODE_VERSION=10, NG_CLI_VERSION=8

My angular.json, the build.configurations for dev :

"dev": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "serviceWorker": true
        }

Command for build : "build": "ng build --configuration=dev --aot",

Please help me. Thanks in advance !

What command do you use to compile the code? Also, did you think about upgrading to Angular 9 or 10? — Akxe
the command : ng build --configuration=dev --aot. I can't for now to upgrade — klsdskldsd
At some point cli started to require to include all evnironment replacements candidates in tsconfig (or angular.json cannot remeber) in order to get it to work. It is not enough anymore to just have environment.xxx.ts in env directory. — Antoniossss
@Antoniossss I can confirm this not being the case. Not for Angular 9 at least... — Akxe

Akxe Akxe · Accepted Answer · 2020-05-05T14:13:21

Angular by default only configures the angular.json production environment to replace the environement.ts file. It uses this part of angular.json.

"configurations": {
   "production":{
      "fileReplacements":[
         {
            "replace":"src/environments/environment.ts",
            "with":"src/environments/environment.prod.ts"
         }
      ],
      "rest": ...
   }
}

Not for dev to use environment.dev.ts you would need to add the fileReplacements part to dev build too.

"fileReplacements":[
  {
    "replace":"src/environments/environment.ts",
    "with":"src/environments/environment.dev.ts"
  }
]

Or place your dev config to the non-post-fixed one.

Environment issue in Angular when try to build

1 Answers