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, May 05 '20 at 13:08
the command : `ng build --configuration=dev --aot`. I can't for now to upgrade — GPiter, May 05 '20 at 13:09
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, May 05 '20 at 13:10
@Antoniossss I can confirm this not being the case. Not for Angular 9 at least... — Akxe, May 05 '20 at 13:17
Show us content of your environment files, the `environment.dev.ts` is probably never referenced, not by default config of angular. — Akxe, May 05 '20 at 13:18
@Akxe I edited my question with angular.json, the configuration build for dev — GPiter, May 05 '20 at 13:27
try absolute path `import { environment } from 'src/environments/environment';` or `import { environment } from 'environments/environment';` depending on your baseHref — Steve, May 05 '20 at 13:48

score 1 · Answer 1 · edited May 06 '20 at 06:59

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.

score 0 · Answer 2 · answered Apr 23 '23 at 20:16

0

you have to export the environment variable with the export keyword:

export const environment = {
  ...
}

answered Apr 23 '23 at 20:16

lionel

140
1
2
12

Environment issue in Angular when try to build

2 Answers2