Tsconfig baseURL and paths made build import point to source folder

Active3 hr before
Viewed126 times

8 Answers


I am compiling my module into a ES5 dependency without JSX code. But when I am using baseUrl and paths to have root import supported, my build folder have some code that point directly to the source (which have JSX) unexpectedly. Once I remove the baseUrl and paths options, it returns back to enclosed build., yes, I did. But I mean the problem is that the build link some of the code's import to the source code's file. Which broke the encapsulation of my build. – Phạm Huy Phát Apr 13 '20 at 2:44 , Why do companies interview candidates they don't seem to seriously consider for the role?

 Pretag team - issue, fix, solve, resolve


 Pretag team - issue, fix, solve, resolve

Are the tsconfnig.json baseUrl and paths settings not supported for ng test?,Solved the problem in Angular 7 adding the paths to both tsconfig files,to tsconfig.lib.json and then try to utilise it with a path such as

  "compilerOptions": {
     "baseUrl": ".",
     "paths": {
        "@app/*": "app/*"
load more v

The mapping in "paths" is resolved relative to "baseUrl". Hence, our configuration should be as follows:,Here, the view/file2 module is located in the view directory and nav/file3 in the components directory.,Alternatively, the configuration below is also valid:

 Pretag team - issue, fix, solve, resolve

Typescript by default mimics the Node.js runtime resolution strategy of modules. But it also allows the use of path mapping which allows arbitrary module paths (that doesn't start with "/" or ".") to be specified and mapped to physical paths in the filesystem. The typescript compiler can resolve these paths from tsconfig so it will compile OK. But if you then try to execute the compiled files with node (or ts-node), it will only look in the node_modules folders all the way up to the root of the filesystem and thus will not find the modules specified by paths in tsconfig.,This function will patch the node's module loading so it will look for modules in paths specified by tsconfig.json. A function is returned for you to reinstate Node's original module loading.,If you require this package's tsconfig-paths/register module it will read the paths from tsconfig.json and convert node's module loading calls into to physical file paths that node can load.

yarn add--dev tsconfig - paths


npm install--save - dev tsconfig - paths
mocha - r ts - node / register - r tsconfig - paths / register "test/**/*.ts"
   "version": "0.2.0",
   "configurations": [{
      "name": "Debug Functions",
      "request": "launch",
      "type": "node",
      "runtimeArgs": [
      "args": ["${workspaceFolder}/functions/src/index.ts"],
      "cwd": "${workspaceFolder}",
      "protocol": "inspector",
      "env": {
         "NODE_ENV": "development",
         "TS_NODE_PROJECT": "${workspaceFolder}/functions/tsconfig.json"
      "outFiles": ["${workspaceFolder}/functions/lib/**/*.js"]
const tsConfig = require("./tsconfig.json");
const tsConfigPaths = require("tsconfig-paths");

const baseUrl = "./"; // Either absolute or relative path. If relative it's resolved to current working directory.
const cleanup = tsConfigPaths.register({
   paths: tsConfig.compilerOptions.paths,

// When path registration is no longer needed
ts - node--project customLocation / tsconfig.json - r tsconfig - paths / register "test/**/*.ts"
export interface ExplicitParams {
  baseUrl: string;
  paths: { [key: string]: Array<string> };
  mainFields?: Array<string>;
  addMatchAll?: boolean;

 * Installs a custom module load function that can adhere to paths in tsconfig.
export function register(explicitParams: ExplicitParams): () => void;
export function loadConfig(cwd: string = process.cwd()): ConfigLoaderResult;

export type ConfigLoaderResult =
  | ConfigLoaderSuccessResult
  | ConfigLoaderFailResult;

export interface ConfigLoaderSuccessResult {
  resultType: "success";
  absoluteBaseUrl: string;
  paths: { [key: string]: Array<string> };

export interface ConfigLoaderFailResult {
  resultType: "failed";
  message: string;
 * Function that can match a path
export interface MatchPath {
    requestedModule: string,
    readJson?: Filesystem.ReadJsonSync,
    fileExists?: (name: string) => boolean,
    extensions?: ReadonlyArray<string>
  ): string | undefined;

 * Creates a function that can resolve paths according to tsconfig paths property.
 * @param absoluteBaseUrl Absolute version of baseUrl as specified in tsconfig.
 * @param paths The paths as specified in tsconfig.
 * @param mainFields A list of package.json field names to try when resolving module files.
 * @param addMatchAll Add a match-all "*" rule if none is present
 * @returns a function that can resolve paths.
export function createMatchPath(
  absoluteBaseUrl: string,
  paths: { [key: string]: Array<string> },
  mainFields: string[] = ["main"],
  addMatchAll: boolean = true
): MatchPath {
* Finds a path from tsconfig that matches a module load request.
* @param absolutePathMappings The paths to try as specified in tsconfig but resolved to absolute form.
* @param requestedModule The required module name.
* @param readJson Function that can read json from a path (useful for testing).
* @param fileExists Function that checks for existence of a file at a path (useful for testing).
* @param extensions File extensions to probe for (useful for testing).
* @param mainFields A list of package.json field names to try when resolving module files.
* @returns the found path, or undefined if no path was found.
export function matchFromAbsolutePaths(
absolutePathMappings: ReadonlyArray<MappingEntry.MappingEntry>,
   requestedModule: string,
   readJson: Filesystem.ReadJsonSync = Filesystem.readJsonFromDiskSync,
   fileExists: Filesystem.FileExistsSync = Filesystem.fileExistsSync,
   extensions: Array<string> = Object.keys(require.extensions),
      mainFields: string[] = ["main"]
      ): string | undefined {
yarn version--patch
yarn version--minor
yarn version--major
load more v

Does not look good! This can become a problem if you change the file location because you will have to rewrite each path that references this module or the scss class.,Add path settings inside CompilerOptions - It will be an object which keys are path aliases that you will be able to use in your code, and the values are arrays of paths the alias will be resolved to.,And with that simple change, our Sass code will now look like this:

import {
} from '../../../../core/seo.service.ts';
import {
} from '../../../services/posts.service.ts';

load more v

The baseUrl configuration option allows you to import directly from the root of the project.,An example of this configuration:,These options allow you to configure module aliases, for example a common pattern is aliasing certain directories to use absolute paths.

An example of this configuration:

// tsconfig.json or jsconfig.json
   "compilerOptions": {
      "baseUrl": "."
load more v

Or we can use -p compiler option with the path to the project directory, i.e. the directory with the tsconfig.json file in the root:,When you use an object that is not defined in TS project files the compiler reports and error:,In the case of conflicts, the priority is set in the following order:

 Pretag team - issue, fix, solve, resolve

Other "point-build" queries related to "Tsconfig baseURL and paths made build import point to source folder"