tsconfig "paths" config is not recognized #3837

lehresman · 2017-01-03T16:30:15Z

Mac OSX Sierra
angular-cli version 1.0.0-beta.24

I'm trying to configure things so I don't have to use ugly (and brittle) relative paths when including modules from my own project. I modified tsconfig.json to include:

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@app/*": "app/*"
    },
   ...

And that works great for TypeScript.

However, "ng serve" is throwing this error:

ERROR in ./src/app/content/content.component.ts
Module build failed: Error: /Users/lehresman/Projects/gazelle-ui/src/app/content/content.component.ts (2,29): Cannot find module '@app/models/client.model'.)
    at _checkDiagnostics (/Users/lehresman/Projects/gazelle-ui/node_modules/@ngtools/webpack/src/loader.js:116:15)
    at /Users/lehresman/Projects/gazelle-ui/node_modules/@ngtools/webpack/src/loader.js:141:17
 @ ./src/app/app.module.ts 17:0-65
 @ ./src/main.ts
 @ multi main

I've discovered that Webpack has configuration options for this, but I can't figure out how to configure Webpack through Angular-CLI to support this. Is this a bug, or is this feature not exposed?

The text was updated successfully, but these errors were encountered:

ValeryVS · 2017-01-03T17:23:24Z

Are you using ng serve with --aot flag?
Probably, tsginfig's paths is ofiicialy supported by angular cli only for JIT compile for now.

lehresman · 2017-01-03T17:24:54Z

No, just plain ng serve

ValeryVS · 2017-01-03T17:29:08Z

Well, it should work then. I'am use the same config. (But with beta.22 version. Still have not time for update.)
Make shure, that you restart your ng serve after changing tsconfig.json
It will not load new settings while serving.

lehresman · 2017-01-03T17:36:53Z

Thanks for letting me know that it was supported. I was chasing rabbit trails trying to get angular-cli to support it, but turns out it IS supported already. I simply had my paths wrong.

lehresman · 2017-01-03T17:38:25Z

Also, for posterity, I had to make the paths be an array. It looks like Typescript accepts a string, but angular-cli expects it to be an array.

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@app/*": ["app/*"]  // <-- must be an array
    },
   ...

lehresman · 2017-01-03T20:54:08Z

Ok, that works fine for the main app, but my tests don't seem to recognize it.

ng test shows this error:

ERROR in ./src/app/dashboard/dashboard.component.ts
Module not found: Error: Can't resolve '@app/services' in '/Users/lehresman/Projects/gazelle-ui/src/app/dashboard'
 @ ./src/app/dashboard/dashboard.component.ts 12:17-41
 @ ./src/app/dashboard/dashboard.component.spec.ts
 @ ./src \.spec\.ts$
 @ ./src/test.ts

ng serve is working fine.

Here is the dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '@app/services';

@Component({
  providers: [
    AuthService
  ],
  selector: 'gl-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  ngOnInit() {
  }

}

Are the tsconfnig.json baseUrl and paths settings not supported for ng test?

dzonatan · 2017-01-04T07:51:21Z

Yes, tests have that issue.
See #3586 issue. PR #3831 should fix it.

filipesilva · 2017-01-24T12:54:13Z

Fixed by #3831, thanks @dzonatan !

Parziphal · 2017-08-05T15:51:17Z

Sorry for commenting here, but this isn't working for me. I added baseUrl and paths to tsconfig.json just like the OP posted, but ng build says the module can't be found (it works in the editor, so I guess it's properly configured).

ng -v says:

@angular/cli: 1.2.6
node: 8.2.1
os: linux x64
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.2
@angular/compiler: 4.3.2
@angular/core: 4.3.2
@angular/cli: 1.2.6
@angular/compiler-cli: 4.3.2
etc...

filipesilva · 2017-08-10T09:33:22Z

@Parziphal I don't know what's going on in your setup, but if you can reproduce in a new project then I ask you to open a new issue with the reproduction. If it does work there, then have a look at how all the tsconfig.json might differ from yours.

duncanwerner · 2017-08-14T20:42:21Z

I believe this regressed. I had the following setup in [root]/tsconfig.json:

{
    ...
    "baseUrl": "src",
    "paths": {
      "@local/*": ["../local_modules/*"]
    }
    ...
}

and then in my files I referenced packages in local_modules using the @local/X alias. That worked in 1.2.3. I just upgraded to 1.3.0, and it fails. Reverting to 1.2.3 resolves it. I'm not sure if this was supposed to work, or if this was just a hack I found in the comments.

ZiruZanrgeiff · 2017-08-14T20:45:38Z

Hi, I have the same problem. I am in a fresh project. With this setup:

@angular/cli: 1.2.6
node: 6.10.2
os: darwin x64
@angular/animations: 4.3.4
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.4
@angular/compiler: 4.3.4
@angular/core: 4.3.4
@angular/forms: 4.3.4
@angular/http: 4.3.4
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.4
@angular/platform-browser-dynamic: 4.3.4
@angular/router: 4.3.4
@angular/cli: 1.2.6
@angular/compiler-cli: 4.3.4
@angular/language-service: 4.3.4

And after set the paths:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "paths": {
    "@nexus-shared/*": [
      "app/shared/*"
    ]
  }
}

I try to run ng serve an I got this error:

ERROR in /Users/ronildo/dev/v4nexus/nexuscloud-frontend/src/app/app.module.ts (10,30): Cannot find module '@shared/shared.module'.

duncanwerner · 2017-08-14T20:51:55Z

Maybe related to #7341, although for me --aot does not work either.

glebinsky · 2017-08-16T14:10:54Z

I'm having an issue where the app builds and runs fine but non-relative paths are not resolved in VS Code. Here's my setup:

├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @ngrx/[email protected]
├── @ngrx/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

tsconfig.json

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

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "*": [
        "*",
        "app/*",
        "environments/*"
      ]
    },
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

duncanwerner · 2017-08-17T15:43:45Z

I still haven't figured this out completely, but I have a workaround. This may be a windows-specific problem. This does not work:

    "baseUrl": ".",
    "paths": {
      "@local/*": [
        "../local_modules/*"
      ]
    }

This does work (baseURL moves up one directory, paths moves down):

    "baseUrl": "..",
    "paths": {
      "@local/*": [
        "local_modules/*"
      ]
    }

Hope that helps someone. I may try to track down the specific problem, but it's not a typescript problem; trying a generic tsc compile with a different config, both of these work.

glebinsky · 2017-08-18T15:22:58Z

@duncanwerner I used your idea and got it to work on Mac. Seems like the builder uses tsconfig.app and linter(?) uses tsconfig

tsconfig:

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

tsconfig.app

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": [
        "*",
        "app/*",
        "environments/*"
      ]
    },
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Parziphal · 2017-08-29T18:43:11Z

I seems like the error was that tsconfig.app.json was overwriting the baseUrl option of the root-level tsconfig.json, setting it to ./ (instead of just .). Once I removed that option from that file, the build was successful.

duncanwerner · 2017-08-29T18:46:21Z

tsconfig.app.json extends tsconfig.json, so any values you define in the former will override values in the latter, at least for app configuration.

Parziphal · 2017-08-29T18:59:07Z

Yeah, I mean the error was that I wasn't aware of the overwriting, not that "the file is overwriting my config, that's an error, how dare that file!".

Now I just found a little thing. The IDE (vscode) doesn't show any suggestions while I type a path using the alias (so it won't autocomplete, I have to write the full path). Is there a way to fix this? Not that it's too important but... if it can be fixed it'd be nice.

duncanwerner · 2017-08-29T19:06:09Z

vscode (or presumably any other editor, but that's what I use as well) uses the root tsconfig.json. so make sure that aliases in that file are correct relative to the location of that file. you may also have to close/open files or even the whole editor to get it to refresh the cache.

Parziphal · 2017-08-29T19:20:32Z

Does it autocomplete to you? Because it doesn't here. I restarted the editor, and I made sure the path is correctly relative to the root tsconfig.json.
Just to make it clear, the alias is recognized and works if I write the complete path, but the ide doesn't show any suggestions for autocompletion.

duncanwerner · 2017-08-29T19:26:46Z

Sorry, I misunderstood. It does not autocomplete aliased paths. File a feature request over at the vscode repo.

ivanguimam · 2018-04-09T18:42:01Z

I have a problem similar to this when I run the tests E2E

Angular CLI version:

Angular CLI: 1.7.3
Node: 8.9.1
OS: linux x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.7.2
webpack: 3.11.0

tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "baseUrl": ".",
        "paths": {
            "@service/*": ["src/app/shared/service/*"],
            "@directive/*": ["src/app/shared/directive/*"],
            "@component/*": ["src/app/shared/component/*"],
            "@entity/*": ["src/app/entity/*"],
            "@enum/*": ["src/app/enum/*"],
            "@environment/*": ["src/environments/*"],
            "@shared/*": ["src/app/shared/*"],
            "@guest/*": ["src/app/guest/*"],
            "@dashboard/*": ["src/app/dashboard/*"],
            "@validator/*": ["src/app/validator/*"],
            "@interface/*": ["src/app/interface/*"],
            "@mask/*": ["src/app/mask/*"],
            "@pipe/*": ["src/app/shared/pipe/*"],
            "@e2e/*": ["e2e/*"],
            "@factory/*": ["factory/*"],
            "@mock/*": ["mock/*"],
            "@database/*": ["database/*"]
        },
        "lib": [
            "es2017",
            "dom"
        ]
    }
}

tsconfig.e2e.json

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/e2e",
        "module": "commonJS",
        "types": [
            "jasmine",
            "jasminewd2",
            "node"
        ]
    }
}

Error: Error: Error: Cannot find module '@e2e/utils/utils'

dabruns · 2018-06-22T09:20:25Z

I have the same problem as @ivanguimam mentioned, has anyone solved this? My app works fine but my e2e tests crashing every time when I try to start them with path variables.

Bengreen · 2018-08-23T06:16:20Z

I am having trouble getting paths to work when building packages. ie in the tsconfig.lib.json
I have added:

"paths": {"@lib/*": ["lib/*"], },

to tsconfig.lib.json and then try to utilise it with a path such as

import { CrossfilterDataComponent } from "@lib/bids/crossfilter-data/crossfilter-data.component";

the target file is src/lib/bids/crossfilter-data/crossfilter-data.component.ts

alan-agius4 · 2018-08-23T06:25:24Z

@Bengreen, may I suggest you open a new issue with a small reproduction if you feel it’s a bug. That said when building packages you should not reference files like you showed above but rather the entrypoint aka the library
https://github.com/dherges/ng-packagr/blob/master/docs/secondary-entrypoints.md

YuriiZadorozhnyi · 2018-09-18T13:24:36Z

@ivanguimam I have the same problem. Did you find the solution?

ivanguimam · 2018-09-18T16:44:56Z

@YuriiZadorozhnyi no I just left the E2E tests aside because I had a deadline to deliver the project and could not continue to run after a solution to this problem...

seabass223 · 2018-11-05T15:43:46Z

is this broken for anybody in Angular 7? I don't see paths anymore in https://angular.io/api/core/CompilerOptions
I'm getting compilation errors with ng serve on all of the paths that I had in tsconfig.json

Fiontan · 2018-11-06T00:00:25Z

Reading all the above and seeing all related closed issue and yet it still seems to be a thing in Angular 7 as @seabass223 has mentioned

seabass223 · 2018-11-07T15:58:19Z

I found that if I incorrectly change one of my path values to a string rather than an array,

 "paths": {
      "@services/*": ["app/modules/core/services/"],

to

 "paths": {
      "@services/*": "app/modules/core/services/",

during ng serve I get the error
ERROR in error TS5063: Substitutions for pattern '@services/*' should be an array.
so we know it's still trying to do substitutions.
Ok so I change it back and try ng serve --verbose which gives me

C:\Users\MyWindowsUser\source\node_modules doesn't exist or is not a directory
      C:\Users\MyWindowsUser\node_modules doesn't exist or is not a directory
      C:\Users\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in C:\Users\MyWindowsUser\source\repos\MyProject\client\web\node_modules
      using description file: C:\Users\MyWindowsUser\source\repos\MyProject\client\web\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\Users\MyWindowsUser\source\repos\MyProject\client\web\package.json (relative path: ./node_modules/@services)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\MyWindowsUser\source\repos\MyProject\client\web\node_modules\@services doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\MyWindowsUser\source\repos\MyProject\client\web\node_modules\@services.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\MyWindowsUser\source\repos\MyProject\client\web\node_modules\@services.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\MyWindowsUser\source\repos\MyProject\client\web\node_modules\@services.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\MyWindowsUser\source\repos\MyProject\client\web\node_modules\@services.js doesn't exist
            as directory
              C:\Users\MyWindowsUser\source\repos\MyProject\client\web\node_modules\@services doesn't exist
[C:\Users\MyWindowsUser\source\repos\MyProject\client\web\src\@services]
[C:\Users\MyWindowsUser\source\repos\MyProject\client\web\src\@services.ts]
[C:\Users\MyWindowsUser\source\repos\MyProject\client\web\src\@services.tsx]
[C:\Users\MyWindowsUser\source\repos\MyProject\client\web\src\@services.mjs]
[C:\Users\MyWindowsUser\source\repos\MyProject\client\web\src\@services.js]

It looks like it's looking in node_models for @service instead of trying to map it.
I'm still digesting this all, but I'm curious about what this part means

using description file: C:\Users\MyWindowsUser\source\repos\MyProject\client\web\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
using description file: C:\Users\MyWindowsUser\source\repos\MyProject\client\web\package.json (relative path: ./node_modules/@services)
no extension
Field 'browser' doesn't contain a valid alias configuration

any help is much appreciated in solving this.

clydin · 2018-11-07T17:44:40Z

Try: "@services/*": ["app/modules/core/services/*"],

seabass223 · 2018-11-08T14:50:33Z

I think I've got it fixed now

Setup

ng new path-alias-test
cd path-alias-test
npm i -g npm-check-updates && ncu -a && npm i (upgrades all packages to latest)
ng g s services/a
ng g s services/b
ng g s services/sub/c
in tsconfig.json compilerOptions node

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

in app.component.ts

import { AService } from '@services/a.service';
import { BService } from '@services/b.service';
import { CService } from '@services/sub/c.service';
...
export class AppComponent {
  title = 'app';
  a: AService;
  b: BService;
  c: CService;
}

ng serve

The above compiles fine with no errors.

When we add barrel files in order to simplify our imports

src/app/service/index.ts

export * from './sub';
export * from './a.service';
export * from './b.service';

src/app/service/sub/index.ts

export * from './c.service';

and change app.component.ts imports to

import { AService, BService } from '@services/';
import { CService } from '@services/sub';

ng serve
gives us ERROR in src/app/app.component.ts(2,36): error TS2307: Cannot find module '@services/'.
Why are we getting this error now?

Resolution

If we remove the final * in tsconfig.json paths

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

ng serve
now compiles fine with no errors. I'm not sure why we had to change ["app/services/*"] to ["app/services/"] for concise imports to work with barrel(index.ts) files.

clydin · 2018-11-08T15:42:46Z

import { AService, BService } from '@services/'; -> import { AService, BService } from '@services';
Try removing the trailing slash from the import and adding either an additional path mapping just @services or try changing the path mapping to "@services*":["app/services*"].

Also please see here for details on TypeScript module resolution and path mapping: https://www.typescriptlang.org/docs/handbook/module-resolution.html

seabass223 · 2018-11-08T19:20:19Z

thanks for the response. I tried "@services*":["app/services*"] but that didn't work either. I'll give the module-resolution handbook a good read.

MarcosMeli · 2018-11-11T22:33:46Z

Solved the problem in Angular 7 adding the paths to both tsconfig files

paths in tsconfig.json helps vscode to works and with intellisense
paths in tsconfig.app.json is also needed for angular

tsconfig.json

tsconfig.app.json

and the intellisense works great

seabass223 · 2018-11-12T20:25:12Z

that does work great since your mapping directly to individual files, but may still fail when using the * wildcard.
After reading the Module Resolution page, I ran tsc --traceResolution

'baseUrl' option is set to 'C:/Users/WindowsUsers/source/repos/path-alias-test/src', using this value to resolve non-relative module name '@services'.
'paths' option is specified, looking for a pattern to match module name '@services'.
Module name '@services', matched pattern '@services'.
Trying substitution 'app/services/*', candidate module location: 'app/services/*'.
Loading module as file / folder, candidate module location 'C:/Users/WindowsUsers/source/repos/path-alias-test/src/app/services/*', target file type 'JavaScript'.
File 'C:/Users/WindowsUsers/source/repos/path-alias-test/src/app/services/*.js' does not exist.
File 'C:/Users/WindowsUsers/source/repos/path-alias-test/src/app/services/*.jsx' does not exist.
Directory 'C:/Users/WindowsUsers/source/repos/path-alias-test/src/app/services/*' does not exist, skipping all lookups in it.
Loading module '@services' from 'node_modules' folder, target file type 'JavaScript'.
Directory 'C:/Users/WindowsUsers/source/repos/path-alias-test/src/app/node_modules' does not exist, skipping all lookups in it.
Directory 'C:/Users/WindowsUsers/source/repos/path-alias-test/src/node_modules' does not exist, skipping all lookups in it.
File 'C:/Users/WindowsUsers/source/repos/path-alias-test/node_modules/@services.js' does not exist.
File 'C:/Users/WindowsUsers/source/repos/path-alias-test/node_modules/@services.jsx' does not exist.
Directory 'C:/Users/WindowsUsers/source/repos/node_modules' does not exist, skipping all lookups in it.
Directory 'C:/Users/WindowsUsers/source/node_modules' does not exist, skipping all lookups in it.
Directory 'C:/Users/WindowsUsers/node_modules' does not exist, skipping all lookups in it.
Directory 'C:/Users/node_modules' does not exist, skipping all lookups in it.
Directory 'C:/node_modules' does not exist, skipping all lookups in it.
======== Module name '@services' was not resolved. ========

I was able to fix it finally by setting my tsconfig (tsconfig.app.json has no baseUrl or Paths because it only extends tsconfig)

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

and appropriately using index.ts files just like node_modules/@angular does.
The * were the culprit.

localyost3000 · 2018-11-16T16:50:34Z

I'm having a similar problem after updating to angular 7.0.4. I do not use angular cli for my project, but I am convinced it is ngtools/webpack causing the problem.

The relevant portions of my tsconfig look like this:

        "baseUrl": ".",
        "paths": {
            "@components/*": ["components/*", "components/"],
            "@directives/*": ["directives/*", "directives/"],
            "@core/*": ["core/*", "core/"],
            "@guards/*": ["guards/*", "guards/"],
            "@models/*": ["models/*", "models/"],
            "@modules/*": ["modules/*", "modules/"],
            "@pipes/*": ["pipes/*", "pipes/"],
            "@services/*": ["services/*", "services/"],
            "@resolvers/*": ["resolvers/*", "resolvers/"],
            "@mock_data/*": ["tests/mock_data/*", "tests/mock_data/"],
            "@environments/*": ["environments/*", "environments/"]
        }

This builds but with 2 big caveats.

Circular dependency errors for any service which imports another service, since the both resolve to @services/index`
All top level imports have to use @services/* instead of just @services/

I've run tsc -p ./tsconfig.app.json --traceResolution a couple dozen times and grepped for the paths which were throwing errors in the angular build, and all of them are resolving to the right file through tsc.

I'm not sure why this changed between 6 and 7, since there was no mention of any changes around tsconfig in any of the Changelogs. Anyone else still stuck after following the advice in this thread?

MarcosMeli · 2018-11-16T17:05:00Z

@seabass223 it works for me with * wilcard with no problems but only if I duplicate paths in tsconfig.json and tsconfig.app.json

and the imports works fantastic

localyost3000 · 2018-11-16T17:27:16Z

Super quick update:

With the same tsconfig.json I posted above, I was able to get it to build, with no circular dependencies and no stars in the path. I did a global Find and replace for all imports ending in / and replaced them all with /index. This should be default behavior, and tsc resolves without the index, but by adding it, angular compiles fine.

I'm not super happy with this resolution, but once the Angular team fixes this issue, it should be pretty easy to do another find and replace to remove the /index in every file.

luckylooke · 2018-12-10T18:49:52Z

@seabass223 maybe this is the correct docs for CompilerOptions --> https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

gogakoreli · 2019-01-16T20:27:09Z

In my case tsconfig.spec.json was overwriting baseUrl

anilvangari2005 · 2019-02-08T21:23:04Z

I commented out baseUrl property in tsconfig.app.json and now everything works including intellisense and ng serve.
Previously intellisense worked but ng serve failed with "Cannot find module" errors.

tsconfig.json:

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

tsconfig.app.json relevant config

"compilerOptions": {
  "outDir": "../out-tsc/app",
  //"baseUrl": "./",
  "module": "es2015",
  "types": ["highcharts"]
},

anikets43 · 2019-02-24T17:41:30Z

I have a problem similar to this when I run the tests E2E

Angular CLI version:

Angular CLI: 1.7.3
Node: 8.9.1
OS: linux x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.7.2
webpack: 3.11.0

tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "baseUrl": ".",
        "paths": {
            "@service/*": ["src/app/shared/service/*"],
            "@directive/*": ["src/app/shared/directive/*"],
            "@component/*": ["src/app/shared/component/*"],
            "@entity/*": ["src/app/entity/*"],
            "@enum/*": ["src/app/enum/*"],
            "@environment/*": ["src/environments/*"],
            "@shared/*": ["src/app/shared/*"],
            "@guest/*": ["src/app/guest/*"],
            "@dashboard/*": ["src/app/dashboard/*"],
            "@validator/*": ["src/app/validator/*"],
            "@interface/*": ["src/app/interface/*"],
            "@mask/*": ["src/app/mask/*"],
            "@pipe/*": ["src/app/shared/pipe/*"],
            "@e2e/*": ["e2e/*"],
            "@factory/*": ["factory/*"],
            "@mock/*": ["mock/*"],
            "@database/*": ["database/*"]
        },
        "lib": [
            "es2017",
            "dom"
        ]
    }
}

tsconfig.e2e.json

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/e2e",
        "module": "commonJS",
        "types": [
            "jasmine",
            "jasminewd2",
            "node"
        ]
    }
}

Error: Error: Error: Cannot find module '@e2e/utils/utils'

@ivanguimam Did you find solution for this?

danielpcampagna · 2019-02-27T18:59:37Z

I am having trouble getting paths to work when building packages. ie in the tsconfig.lib.json
I have added:
"paths": {"@lib/*": ["lib/*"], },
to tsconfig.lib.json and then try to utilise it with a path such as
import { CrossfilterDataComponent } from "@lib/bids/crossfilter-data/crossfilter-data.component";
the target file is src/lib/bids/crossfilter-data/crossfilter-data.component.ts

@Bengreen I have the same problem. Did you find the solution?

skwny · 2019-07-23T20:40:43Z

Came here b/c I just experienced this same issue. I pieced together a work around from @swimmadude66 solution. For anyone else:

tsconfig.json compiler options looks like this:

// tsconfig.json
"paths": {
  @client/services/*": [
    "src/services/*"
  ]
}

When importing a service anywhere, I do this:

// somewhere in the app
import { Auth_Service } from '@client/services/index';

index.ts is located in the services dir, and contains:

// index.ts
export { Auth_Service } from './auth.service';
export { Loading_Service } from './loading.service';
export { Store_Service } from './store.service';

There are no more circular dependency warnings after this.

veerabhadraraochikka · 2019-07-31T12:31:01Z

I commented out baseUrl property in tsconfig.app.json and now everything works including intellisense and ng serve.
Previously intellisense worked but ng serve failed with "Cannot find module" errors.

tsconfig.json:
"baseUrl": "./",
"paths": {
  "@services/*": ["src/app/components/services/*"],
  ...
}
tsconfig.app.json relevant config
"compilerOptions": {
  "outDir": "../out-tsc/app",
  //"baseUrl": "./",
  "module": "es2015",
  "types": ["highcharts"]
},

while migration from mono app to multi app we should look at baseurl in tsconfig.json

angular-automatic-lock-bot · 2019-09-09T19:41:30Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

lehresman closed this as completed Jan 3, 2017

lehresman reopened this Jan 3, 2017

filipesilva closed this as completed Jan 24, 2017

FieldMarshallVague mentioned this issue Nov 20, 2017

Getting import errors on modules using alias in tsconfig microsoft/TypeScript#20132

Closed

matheo mentioned this issue Feb 24, 2018

tsconfig.json compilerOptions.paths doesn't support @ microsoft/vscode#44338

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

tsconfig "paths" config is not recognized #3837

tsconfig "paths" config is not recognized #3837

Comments

lehresman commented Jan 3, 2017 • edited Loading

ValeryVS commented Jan 3, 2017 • edited Loading

lehresman commented Jan 3, 2017

ValeryVS commented Jan 3, 2017

lehresman commented Jan 3, 2017 • edited Loading

lehresman commented Jan 3, 2017

lehresman commented Jan 3, 2017

dzonatan commented Jan 4, 2017

filipesilva commented Jan 24, 2017

Parziphal commented Aug 5, 2017

filipesilva commented Aug 10, 2017

duncanwerner commented Aug 14, 2017 • edited Loading

ZiruZanrgeiff commented Aug 14, 2017

duncanwerner commented Aug 14, 2017

glebinsky commented Aug 16, 2017 • edited Loading

duncanwerner commented Aug 17, 2017

glebinsky commented Aug 18, 2017 • edited Loading

Parziphal commented Aug 29, 2017

duncanwerner commented Aug 29, 2017

Parziphal commented Aug 29, 2017

duncanwerner commented Aug 29, 2017

Parziphal commented Aug 29, 2017

duncanwerner commented Aug 29, 2017

ivanguimam commented Apr 9, 2018

dabruns commented Jun 22, 2018

Bengreen commented Aug 23, 2018

alan-agius4 commented Aug 23, 2018

YuriiZadorozhnyi commented Sep 18, 2018

ivanguimam commented Sep 18, 2018

seabass223 commented Nov 5, 2018

Fiontan commented Nov 6, 2018

seabass223 commented Nov 7, 2018

clydin commented Nov 7, 2018

seabass223 commented Nov 8, 2018

Setup

When we add barrel files in order to simplify our imports

Resolution

clydin commented Nov 8, 2018 • edited Loading

seabass223 commented Nov 8, 2018

MarcosMeli commented Nov 11, 2018

seabass223 commented Nov 12, 2018

localyost3000 commented Nov 16, 2018 • edited Loading

MarcosMeli commented Nov 16, 2018

localyost3000 commented Nov 16, 2018

luckylooke commented Dec 10, 2018

gogakoreli commented Jan 16, 2019 • edited Loading

anilvangari2005 commented Feb 8, 2019

anikets43 commented Feb 24, 2019

danielpcampagna commented Feb 27, 2019

skwny commented Jul 23, 2019

veerabhadraraochikka commented Jul 31, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

lehresman commented Jan 3, 2017 •

edited

Loading

ValeryVS commented Jan 3, 2017 •

edited

Loading

lehresman commented Jan 3, 2017 •

edited

Loading

duncanwerner commented Aug 14, 2017 •

edited

Loading

glebinsky commented Aug 16, 2017 •

edited

Loading

glebinsky commented Aug 18, 2017 •

edited

Loading

clydin commented Nov 8, 2018 •

edited

Loading

localyost3000 commented Nov 16, 2018 •

edited

Loading

gogakoreli commented Jan 16, 2019 •

edited

Loading