Angular 5 tsconfig baseURL not working

Question

This seems simple but it doesn't work (for me)

I am running an Angular 5 app that has three files in locations similar to this:

app_directory/tsconfig.json
app_directory/src/app/services/my-service.service.ts
app_directory/src/app/main/sub1/sub2/my-component.component.ts

In the my-component.component.ts file I can successfully import my-service with the following line:

import { MyServiceService } from '../../../services/my-service.service.ts'

While this is all fine and dandy, It's kinda annoying to have to put the relative path every time I want to import this service so I did some checking on SO and I found this post: How to avoid imports with very long relative paths in Angular 2?

So I attempted to do the same thing and changed my tsconfig.json to the following:

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

And changed my import to this:

import { MyServiceService } from 'services/my-service.service.ts'

But of course this didn't work. So (without changing the import) I tried the following values for baseUrl:

.
./
./app
./src
./app/
./src/
src/app
src/app/

It seems as though the tsconfig baseUrl has no effect at all. What am I missing here?

Answer 1

I finally figured it out... So it turns out I was right. My tsconfig file was having literally no effect at all because it wasn't even being used.

Here is how I figured it out.

The way I was serving the site was via the:

npm start

Command. I know from other investigation that this command looks at my package.json and runs whatever command I have in {"scripts":{"start" ...} which for me was:

ng serve --sourcemap --extract-css --host 0.0.0.0 --proxy-config proxy.config.json

Keep in mind that I inherited this code so I have no idea how/why much of it was set up initially. Anyhow, I also know that whenever ng serve is run it looks at a file called .angular-cli.json. This is my angular.cli.json: (or at least the part of it that matters)

{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "up-gui-1": "environments/environment.up-gui-1.ts"
      }
    }
  ],
}

See that line that says "tsconfig":"tsconfig.app.json" ?

Yep, that's it. I don't have a file called tsconfig.app.json. Not in the root at least. In the root there is a file called tsconfig.json. So I searched and found a tsconfig.app.json one level down (in the src directory). I changed that file to have this:

"baseUrl": ".",
"paths": {
  "@services/*": ["./app/services/*"]
},

And i changed my import to this:

import { MyServiceService } from '@services/my-service.service';

And all is good now.