Angular2: Cannot find namespace 'environment'

Question

I have configured my tsconfig.json so I can use short import paths in my code for brevity. For example, I can do import { FooService } from 'core' instead of being forced to do something like import { FooService } from '../../../core/services/foo/foo.service'.

This works just fine, except for some reason now that I have created a new file, one of the imports is throwing an error:

Cannot find namespace 'environment'.

This error occurs because of the following line: import { environment } from 'environment';

It's very strange because I have that same import in many other services and none of them throw the error, it only happens in this new file that I created.

This is my tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "paths": {
      "core": ["app/core"],
      "core/*": ["app/core/*"],

      "shared": ["app/shared"],
      "shared/*": ["app/shared/*"],

      "modal": ["app/modal"],
      "modal/*": ["app/modal/*"],

      "environment": ["environment/environment"]// HERE
    },
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

As you can see, the paths are set up properly. And if they weren't it wouldn't have worked all this time in the other files...

What is going on here? Anyone know how to fix this?

Answer 1

PROBLEM SOLVED

I had a typo in my code which caused this. Very hard to find because the intellisense wasn't highlighting it.

I had: url: environment.serverUrl;

When I should've had: url: string = environment.serverUrl;

I was using a value as the type accidentally. Oops!