The paths setting in tsconfig.json causes issues

[maxisam]

I have TSLint (5.7.0), codelyzer (3.2.1) and angular lang service 0.1.7 installed on vscode 1.17.0 (windows)

In my angular cli (1.4.5) project

If I have the following setting in tsconfig

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

and my import would be like
import { SharedModule } from '@app/shared/shared.module';

I will have lots of error like this in my template showing in vscode with red underlines.

[Angular] Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".

But if I import it with relative path

import { SharedModule } from '../../shared/shared.module';

The problem goes away.

at first, I thought it was vscode-tslint https://github.com/Microsoft/vscode-tslint/issues/276#event-1292520818

But it seems like it is from Angular Language Service

[taos-thiagoaos]

Here i have the same problem.

[aitboudad]

related to angular/angular#16382

[jahmani]

i have the same problem

• vscode show error when using path alias
• vs code show error when using *ngIf... in template

[juraj0137]

@maxisam Could you write here how you code structure looks like? Especially where app.module.ts and shared.module.ts are located. Do you use barels (index.ts)?

I would like to mention that if you use "paths" in yout tsconfig, you have to specify "baseUrl". (according to this stackoverflow answer)

[maxisam]

root
|--src
|--app
|--share

I don't use barrels. It is a normal CLI layout. The project is generated by cli.

It has paths setting.

[Dunos]

Same issue here, the baseUrl parameter is already set with "src" and yet it does not work.

[ghost]

This config solved the problem for me:

"baseUrl": "./",
"paths": {
  "@app/*": ["app/*"],
  "@env/*": ["environments/*"],
  "@services/*": ["app/modules/core/services/*"],
  "@models/*": ["app/models/*"],      
  "@components/*": ["app/components/*"],
  "@modules/*": ["app/modules/*"],
  "@core/*": ["app/modules/core/*"],
  "@shared/*": ["app/modules/shared/*"],
  "@features/*": ["app/modules/features/*"]
}

[ghiscoding]

I'm using Angular-CLI and also have this problem when using an external component library (which I'm the author). I tried to change the tsconfig.app.json with the mentioned config but that didn't change anything on my side. Is there any other workaround? And/or, do I have to do any kind of changes in my library?

[aitboudad]

@thiagoaos see angular/angular#16382 (comment)

[ghiscoding]

Thanks @aitboudad but that didn't work for me. I finally took the time to update my App to Angular 5 and updated as you suggested in that other issue to "@angular/language-service": "5.1.0-beta.1" but still get this error. It comes from a library that I made called Angular-Slickgrid and in my Dev environment using relative paths ./ I don't see this problem, but using the lib in an external App as import ... from 'angular-slickgrid' and switch to my View completely it becomes completely red as shown below.

You can see the error being

[Angular] Cannot read property 'isSkipSelf' of null

[aitboudad]

@ghiscoding after installing @angular/language-service you should restart vscode

[ghiscoding]

@aitboudad Yes I had done that too but still got the error.

[Dunos]

This is not working for me either, even after installing @angular/language-service

[ghost]

I can also report the same problem. This is only occurring in VS Code with the language service extension. WebStorm has no problem with it by default and resolves everything.
See also: angular/angular#16382 and nrwl/nx#73.

[fxck]

any updates on this?

[jwuliger]

Hello, I thought I was the only one.

I am working on an Angular Mono Repo, and this started happening to me a little while ago.

Hoping it gets fixed soon! Thanks, Guys!

[fxck]

@chuckjaz any ideas?

[kyliau]

angular/angular#16382 fixed this and it was released as Angular.ng-template 0.1.9. @fxck Can you please check if you're running the latest version?

[ghiscoding]

@kyliau
I don't see the issue on my side anymore, so I can confirm that it does work for me now. Thanks

[kyliau]

Closing this for now since issue is fixed.

[angular-automatic-lock-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.}