No Angular autocomplete for project if angular is not in package.json

Answered

I have a project that uses a single dependency in the package.json
that dependency is a internal framework that includes and installs angular into the project.

However, I can't get any of the angular autocomplete features while developing because for example @angular/core is not in the package.json

I can constantly reproduce, i try to add an "implements OnDestroy" onto a component, and i can't get the autocomplete or the autoimport to work.when i add @angular/core to the package.json then I get the bells and whistles.Same goes for every other angular module for example @angular/forms.

I have tried adding the node_modules to the project (canceling exclude) and then purging the caches and restarting, not working. I have added node modules to the Javascript Global library/project library. I have tried adding it to the tsconfig file an absolute and relative path to the @angular/core module.

The only thing that works is adding it to the package.json.and for my setup, that is not an option.

Is there a way that I let InteliJ know to import the angular aswell?

11 comments
Comment actions Permalink

The Angular support heavily depends on node_modules contents to provide you with most of the code insight support. There are few exceptions like code highlighting, but otherwise none of Angular components and directives, like *ngIf, *ngFor, etc. from libraries will work and you'll get a lot of validation issues unless the @angular modules are indexed.

If adding @angular/core dependency to package.json is not an option for you, try un-excluding node_modules/@angular folder in the Project explorer (Mark Directory As/Not Excluded) and re-open the project - does it help?

1
Comment actions Permalink

It does not help. I have tried that and indvalidated the cache and restarted. No dice.

1
Comment actions Permalink

it works for me. What IDE version do you use?

1
Comment actions Permalink

Tried it once again and it did not work. Intelij Ultimate 2019.3 Build #IU-193.5233.102

0
Comment actions Permalink

Works fine for me even if there are no dependencies/devDependencies at all in package.json:

 

please share a sample project the issue can be reproduced with

1
Comment actions Permalink

HTML template stuff and referencing is working fine for me too. It all gets wired up with the component, the TS stuff is not working
I'll make a sample project and post it here, but could you try to auto import on a TS component?



Then when i just add the string to package.json don't run the npm install or anything. then it pops up



 

the node modules is included in the project (the @angular folder only)

1
Comment actions Permalink

>HTML template stuff and referencing is working fine for me too. It all gets wired up with the component, the TS stuff is not working

So this is not about Angular support, it's about TypeScript auto-import. It works only for those packages that are either listed among direct dependencies in package.json or explicitly included (via "include: []") in tsconfig.json. This is a way auto-import is designed; we can't search for possible symbol occurrences throughout all indirect dependencies because of the huge performance impact

1
Comment actions Permalink

Alright, i think i got my answer.
So i think I manage this by adding the definition files in the tsconfig include, then excluding them also in the tsconfig, that way I can "trick" the intelliJ to get the references but also so that those files don't get included in the build.
And I have tested this and I get the same build size (byte size checked) so this would be a workaround.

1
Comment actions Permalink

I seem to be having this problem. or at least i have the symptoms. I'm not sure if it's the same cause

possibly important details about my setup:

* angular was added to an existing project

* we're using yarn workspaces so the `node_modules` directory with the angular libs are in the root of the project rather than in the angular directory

* not sure if this matters, but it is non-standard, so i will mention it. I converted the project to use eslint instead of tslint using https://github.com/angular-eslint/angular-eslint

any assistance would be greatly appreciated 

0
Comment actions Permalink

Elena Pogorelova, should I create a separate ticket for this?

0
Comment actions Permalink

I figured it out. It indeed had to do with yarn workspaces. the `$schema` key in `angular.json` pointed to the local `node_modules`. I had to updated it to point at the `node_modules` in my project root

For anyone else coming along, similarly, i had to update all the other paths that referenced node_modules as well, mostly under `styles` 

1

Please sign in to leave a comment.