Angular-CLI with paths in tsconfig

Please can you provide your tsconfig.json?

Please have a look at this sample project: https://github.com/antonkarsten/sample

The tsconfig file is src/tsconfig.app.json (so it is not the one in the root). This is particular to angular-cli (https://cli.angular.io/)

If you look on line 8 in src/app/app.module.ts you can see how I imported the button component. This only works beause I configured the paths property in the tsconfig.app.json.

when you run the project (with thte command ng serve) everything is fine, but webstorm show it as an error. ( I believe this way of creating an alias is relatively new to Typescript )

thank you for your help in this issue

Anton

>The tsconfig file is src/tsconfig.app.json (so it is not the one in the root).

sorry, but tsconfig.app.json is not tsconfig.json - it's just a config file internally used by the cli build process. TypeScript compiler doesn't consider such files, only tsconfig.json files are respected. If you run tsc in terminal, you will see the same error:

C:\downloads\sample-master\sample>tsc
src/app/app.module.ts(8,33): error TS2307: Cannot find module '@app'.

Adding

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

to the tsconfig.json in the root solves the issue

I'm using Intellij IDEA Ultimate and I'm seeing the same problem.

It shows an error, and provides no code completion.  Here's my tsconfig.json, and below is the IDEA build info.  Note, I had to use 

"@app/*": ["app/*"]

(note the /*) to get ng serve to compile.

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

IntelliJ IDEA 2017.2.3
Build #IU-172.3968.16, built on August 21, 2017
Licensed to FUJIFILM TeraMedica / Mike Conner
Subscription is active until December 14, 2017
JRE: 1.8.0_152-release-915-b11 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Windows 7 6.1

Running tsc in terminal gives similar result for your mappings:

C:\WebstormProjects\untitled>tsc
app/test.ts(1,25): error TS2307: Cannot find module '@app/services/myService'.

Try changing mappings to

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

Yeah, my mistake.  Between when I originally posted it and you responded, I had already seen the error and updated my comment. 

I originally had it as @app/*, based on a stackexchange post, but changed it, per your response to Anton ("Adding "paths": {
"@app": ["app/"]
},... to the tsconfig.json in the root solves the issue, and didn't realize that it broke the build before I first posted.   

Anyway, even after fixing it (switching back to "@app/*": "app/*"), I was still getting a problem.   

However, based on another post, I saw that someone was using "src for baseUrl:  

"baseUrl": "./src",

And appears to work.  I'm guessing you don't have the problem because app is at the root of your project, for some reason.  Looking at your screencap, the tooltip says:

C:\WebstormProjects\untitiled\app\service\...

Where untitled is presumably your project.  But a project I generated with angular-cli is of the form:

myproject\src\app

That is, with a src in between.  So app/*  would not match anything. I'm guessing I could have instead changed the path mapping to "src/app/*", and not changed the baseUrl, too.  Haven't tried it, yet.... OK tried it, that didn't work. Don't get it.  Oh well, in any case, the baseUrl:src seems to do the trick.

I have the same issue it would be nice to have a commonly applicable solution that works both with angular-cli, IntelliJ and Typescript.

Is there an issue for this problem in YouTrack that I can follow?

What issue, sorry? No bugs are reported in this thread, so there is nothing to track

Hi, I have same problems on Mac OS.

My tsconfig.json (root):

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

The WebPack success compile and application correct work if I import the client as:

import {ApiClient} from '@api/api-client';

But the PhpStorm write the error

Cannot resolve directory '@api'

You don't have "baseUrl" specified in your tsconfig.json. And "paths" are resolved relative to "baseUrl", so this property is required.

See https://www.typescriptlang.org/docs/handbook/module-resolution.html

Note that passing your tsconfig.json to tsc in terminal results in

tsconfig.json(18,5): error TS5060: Option 'paths' cannot be used without specifying '--baseUrl' option.

error.

Adding 

"baseUrl": "."

to your tsconfig.json should solve the issue:

@Elena Pogorelova, thank. All works!

Hi,

I have a project created using the Ionic CLI: https://github.com/Robinyo/big-top

I have configured 'compilerOptions' in 'tsconfig.json':

"compilerOptions": {

  ...
  
  "target": "es5",
  "typeRoots": [
    "../node_modules/@types"
  ],
  "baseUrl": "./src",
  "paths": {
    "@app/*": [ "app/*" ],
    "@assets/*": [ "assets/*" ],
    "@env": [ "environments/environment" ],
    "@pages/*": [ "pages/*" ],
    "@services/*": [ "services/*" ],
    "@theme/*": [ "theme/*" ]
  }
}

...

Everything works as expected (e.g., npm run dev, npm run build, npm run test, etc.) except in WebStorm 2017.2 I receive the following error for '*.spec.ts' files:

All other '*.ts' file are fine:

Cheers
Rob

Hi,

Just noticed that if I remove "**/*.spec.ts" from 'exclude' the error goes away:

"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"src/test.ts",
"e2e"
]

Does WebStorm support a 'tsconfig.spec.json' ?

Cheers
Rob

>Just noticed that if I remove "**/*.spec.ts" from 'exclude' the error goes away

as the file is excluded from tsconfig.json, path mappings specified there are not applied to it - this is the expected behavior

>Does WebStorm support a 'tsconfig.spec.json' ?

No, it doesn't. TypeScript compiler service doesn't consider such files, only tsconfig.json files are respected.

Hello, 

Same problem for me. 

My tsconfig.json: 

And in my component.ts:

The error is :

Angular: Can't resolve all parameters for myComponent.

Someone can help me ? :)

Thank you !

And your problem is also different. Guys, would you be so kind to create new threads for new issues/queries? Instead of adding comments to age-old threads, commenting on issues that have almost nothing in common with yours?

Your error is thrown by Angular language service, not by the IDE itself. Looks related to https://github.com/angular/angular/issues/18484 and https://github.com/angular/angular/issues/16382
Try disabling the service (in Settings | Languages & Frameworks | TypeScript, clear the Angular language service checkbox) - does the problem persist?

Sorry, I'll open a new topic next time!

It works well with the change.

Thank you very much Elena

I have the same issue (Webstorm 2018.2.5, Ubuntu 18.04.1 LTS).
Angular language service is turned off. Running ng build works fine, but I have an error in my editor.
My tsconfig.json:

I have the following project structure:
--lab5
    --backend
        --api.ts
    --frontend
        --tsconfig.json (baseUrl:"..", paths: { "@backend/*": ["backend/*"] })
        --src
            --app
                --users
                    --users.component.ts (import { UsersAjaxAPI} from '@backend/api')

Webstorm still reports me an error, though it provides me a link and opens me the correct file if I press Ctrl+Mouse1

Similar configuration works fine for me:

BTW, what is a result of running tsc -p . in frontend directory? Do you have any other tsconfig.json files in your project?

Sample project that shows up the issue would be helpful

It's a miracle, but yesterday I left my project with that error untouched. Today everything works fine, no errors are reported. I can't reproduce that issue, no matter what I do, though I still have to disable Angular language service.

SOLUTION

I had the same issues. This is my path:

1. editing alias paths in tsconfig.json
2. the IDE offers me to shorten corresponding import-paths (good thing)
3. I take the advice and use the auto-correction methods of IntelliJ
4. import is shortened and IntelliJ answers with TS2307 error (cannot resove path...). Also the compiler for angular throws the error.
5. re-running the compiler solves the issue for the compiler but the IDE still shows me TS2307.
6. HERE COMES THE SOLUTION (thank you @Elena): restarting the TypeScript Service (or IntelliJ) solves the issue for me. Have a look at the next comment to see how to restart the Service.

Using the latest IntelliJ 2019.1.1

@Elena: Thank you, that solves the problem for me, too! I updated the comment.

This is still an issue.

what issue?

I have this

"baseUrl": "."

"@portal": [
  "dist/portal"
],
"@portal/*": [
  "dist/portal/*"
]

Restarted everything a hundred times, still get cannot find module

similar path mappings work fine for me. Please share a project that can be used to recreate the issue

And, please, would you be so kind to create new threads for new issues/queries? Instead of adding comments to age-old threads, commenting on issues that have almost nothing in common with yours?