Angular-cli: tsconfig "paths" config is not recognized

[lehresman]

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?

[ValeryVS]

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]

No, just plain ng serve

[ValeryVS]

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]

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]

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]

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]

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

[filipesilva]

Fixed by https://github.com/angular/angular-cli/pull/3831, thanks @dzonatan !

[Parziphal]

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]

@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]

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]

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]

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

[glebinsky]

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]

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]

@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]

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]

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]

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]

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]

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]

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

[ivanguimam]

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]

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]

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]

@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]

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

[ivanguimam]

@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]

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]

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]

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]

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

[seabass223]

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]

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]

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]

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]

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.

[swimmadude66]

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.

1. Circular dependency errors for any service which imports another service, since the both resolve to @services/index`
2. 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]

@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

[swimmadude66]

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]

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

[gogakoreli]

In my case tsconfig.spec.json was overwriting baseUrl

[anilvangari2005]

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]

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]

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]

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.

[bhadramtuity]

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[bot]]

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._}