Having trouble with Angular 5 tsconfig baseURL not functioning properly?

Question

Having trouble with Angular 5 tsconfig baseURL not functioning properly?

This may appear straightforward, but I am facing difficulties with it

My Angular 5 application consists of three files located as follows:

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 import my-service successfully using the following line:

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

Although this works fine, it can be tedious to include the relative path every time I need to import this service. I came across a post on SO that discusses this issue: How to avoid imports with very long relative paths in Angular 2?

I decided to implement the same approach by modifying my tsconfig.json as shown below:

{
  "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"
    ]
  }
}

I also adjusted my import statement to the following:

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

Unfortunately, this change did not yield the desired result. I played around with various values for baseUrl without success:

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

It appears that the tsconfig baseUrl setting is having no impact whatsoever. What could I be overlooking here?

angular typescript

Answer 1

Answer №1

After much troubleshooting, I finally cracked the code... Turns out, my tsconfig file was completely ineffective because it wasn't even being utilized.

Here's how I unraveled the mystery:

The site was being served using the following command:

npm start

I knew that this command referenced my package.json and executed the script defined under {"scripts":{"start" ...}. In my case, it was:

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

It's worth mentioning that I inherited this codebase and had limited knowledge about its initial setup. Nevertheless, I also discovered that whenever ng serve is executed, it looks for a file named .angular-cli.json. Here's an excerpt from my angular.cli.json (the relevant part):


{
  "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"
      }
    }
  ]
}

That line stating "tsconfig":"tsconfig.app.json" stood out to me.

Indeed, I did not have a file named tsconfig.app.json in the root directory. However, upon further investigation, I found one level down inside the src directory. I edited that file to include:

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

Subsequently, I updated my import statement to:

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

Voila! The issue was resolved.

Answer 2

After much troubleshooting, I finally cracked the code... Turns out, my tsconfig file was completely ineffective because it wasn't even being utilized.

Here's how I unraveled the mystery:

The site was being served using the following command:

npm start

I knew that this command referenced my package.json and executed the script defined under {"scripts":{"start" ...}. In my case, it was:

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

It's worth mentioning that I inherited this codebase and had limited knowledge about its initial setup. Nevertheless, I also discovered that whenever ng serve is executed, it looks for a file named .angular-cli.json. Here's an excerpt from my angular.cli.json (the relevant part):


{
  "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"
      }
    }
  ]
}

That line stating "tsconfig":"tsconfig.app.json" stood out to me.

Indeed, I did not have a file named tsconfig.app.json in the root directory. However, upon further investigation, I found one level down inside the src directory. I edited that file to include:

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

Subsequently, I updated my import statement to:

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

Voila! The issue was resolved.

Answer 3

Answer №2

One key distinction I notice between your approach and the previous answer is that you are neglecting to utilize the paths configuration in your angular-cli.json file, alongside the baseUrl setting. It seems like they are leveraging this feature to enable mapping a base path, along with corresponding subdirectories, to a designated path on the file system. To achieve the desired functionality in your code, follow these steps:

{
  "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"
    ],
    "paths": {
      "services/*": [
        "services/*"
      ],
      "components/*": [
        "main/sub1/sub2/*",
        "main/sub3/sub4/*"
      ]
    }
  }
}

// Subsequently, you can import modules as shown below:

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

Answer 4

One key distinction I notice between your approach and the previous answer is that you are neglecting to utilize the paths configuration in your angular-cli.json file, alongside the baseUrl setting. It seems like they are leveraging this feature to enable mapping a base path, along with corresponding subdirectories, to a designated path on the file system. To achieve the desired functionality in your code, follow these steps:

{
  "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"
    ],
    "paths": {
      "services/*": [
        "services/*"
      ],
      "components/*": [
        "main/sub1/sub2/*",
        "main/sub3/sub4/*"
      ]
    }
  }
}

// Subsequently, you can import modules as shown below:

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

Having trouble with Angular 5 tsconfig baseURL not functioning properly?

Answer №1

Answer №2

Similar questions

Getting the button element in Angular when submitting a form

What is the proper way to manage the refresh token on the client's end within a JWT system?

Transforming an array of strings into an array: a guide

Exploring the integration of multiple HTTP requests in Angular with the power of RxJS

Angular 2 fails to identify any modifications

Steps for accessing the camera within a custom Ionic app

Resolve routing problems with lazy loading in Angular7

Custom options titled MUI Palette - The property 'primary' is not found in the 'TypeBackground' type

What could be the reason for the discrepancy between my get_token() function and the value obtained from request.META.get("CSRF_COOKIE")?

What is the best way to establish communication between the browser and an express.js server while utilizing angular ssr?

Struggling to retrieve data with arrow function in Vue

Issue encountered: Compilation error occurred following the update from Angular 11 to Angular 15, stemming from the module build failure within the sass-loader directory

Unexpected TypeScript issue: Unable to access the 'flags' property of an undefined entity

Utilizing const as the iteration variable in a for loop

Encountering a discord bot malfunction while on my Ubuntu server

Error in TypeScript: Circular reference in type alias 'Argument' in node_modules/classnames/index.d.ts at line 13:13

Is it advisable to blend Angular Material with Bootstrap?

A guide on leveraging Jest and Typescript to mock a static field within a class

Discovering a user's location with Angular and seamlessly loading components accordingly

Stringified HTML code showcased