angular: Language Service: does not work with "paths" from .tsconfig

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior Set “paths” and “baseUrl” in tsconfig. for example:

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

Then import a component in a module using the path set via paths.

import {HeaderComponent} from  "@myapp/header/header.component";

Add {{foo}} to header.component.html. The error reported is “Unresolved variable or type foo”. The import seems to work fine, otherwise.

Expected behavior The error should be: “Angular: Identifier ‘foo’ is not defined. The component declaration, template variable declarations, and element references do not contain such a member”. This is the error that is reported if the import is done via a relative link, e.g, “./header/header.component”

Minimal reproduction of the problem with instructions As described above.

What is the motivation / use case for changing the behavior? To get proper errors via language service when using absolute paths for imports.

Please tell us about your environment: PhpStorm 2017.1.3, MacOS 10.12.4.

Angular version: 4.1.0
Browser: N/A
Language: Typescript
Node (for AoT issues): node --version = 7.9.0

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 21
Comments: 37 (15 by maintainers)

Most upvoted comments

I was getting this error, for the fix in tsconfig.json in root folder, I needed to set baseUrl to “src” and in the “path” the same paths in src/tsconfig.app.json. In src/tsconfig.app.json I’ve just added the paths and the baseUrl should be ‘./’… Now it’s everything working fine.

+11

thismarcoantonio on Feb 7, 2018

Como Configurar Path absoluto en angular 5.2.0 ?

Buenas estoy tratando de configurar el path para cuando importe un component, servicio y otro pueda utlizar el path absoluto.

import { foo } from ‘../bar’;
para que cuando importe sea de la siguiente forma. 
import { foo } from ‘app/bar’;

alguien puede ayudarme intente con baseUrl": “src”, de los archivos tsconfig.json y tsconfig.app.json

+10

armandoaepp on Apr 27, 2018

I think this has been fixed by #20222, to try it install the beta version of language-service:

npm install --save-dev @angular/language-service@5.1.0-beta.1

aitboudad on Nov 22, 2017

Still present on angular 4.3.6. On vscode 1.15.1 i have few errors related to: Error encountered resolving symbol values statically of symbols declared through paths property on tsconfig.json file . Any eta here? Thanks.

meriturva on Aug 28, 2017

I’m with @karptonite, removing the @ does not fix issue.

mmukarram on Oct 31, 2017

I have the same problem. Trying to dig into it a bit more to see if I can find why

deebloo on Sep 27, 2017

It does look like this has been fixed by #20222. Everything seems to work properly with language-service 5.1.0-beta.1, so I’m going to close this issue. Thanks, @kyliau!

karptonite on Nov 21, 2017

Well, I’ve installed "@angular/language-service": "^5.2.8" on my Angular 4.4 project and it seems to work properly 😄 thanks a lot

matheo on Mar 13, 2018

I was having the same issue in PhpStorm with Angular 5 and CLI 1.5. Installing snapshot build of language-service fixed it - as per https://github.com/angular/angular/issues/16382#issuecomment-343603683

darrenmothersele on Nov 17, 2017