Unable to resolve signature for pipe invocation in vscode by Angular Language Service

问题

I have a pipesModule in Angular library project when I import the module to another project, I got an error tip: Unable to resolve signature for pipe invocation in vs code, it still works, build without errors, but I have no idea how to fix it, I got so many red lines...

Now, the error tip changed after an upgrade, like this: Unable to resolve signature for call of pipeName, but I think that means the same thing

Every pipe can get this error, I can't bear the red line..., but it can be resolved by webstorm.

That's all, and what's wrong?

Angular Library Project

Angular Library Project
├─src
│  ├─pipes
│  │  ├─hide-tel.pipe.ts
│  │  ├─pipes.module.ts
│  │  └─index.ts
│  ├─public_api.ts
...

• hide-tel.pipe.ts

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'hideTel'
})
export class HideTelPipe implements PipeTransform {
  transform(value: string): string {
    return value.slice(0, 3) + '****' + value.slice(-4);
  }
}

• pipes.module.ts

import { NgModule } from '@angular/core';
import { HideTelPipe } from './hide-txt.pipe';

const PIPES = [
  HideTelPipe,
];

@NgModule({
  declarations: [ ...PIPES ],
  exports: [ ...PIPES ],
})
export class PipesModule {}

• index.ts

export * from './hide-tel.pipe';
export * from './pipes.module';

• public_api.ts

export * from './pipes/index';

Question Project

Question Project
├─src
│  ├─my-common
│  │  └─my-common.module.ts
│  ├─app
│  │  └─some
│  │     ├─some.component.html
│  │     ├─some.component.scss
│  │     └─some.component.ts
│  ├─app.module.ts
...

• my-common.module.ts

import {ModuleWithProviders, NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {CommonModule} from '@angular/common';

const MODULES = [
  CommonModule,
  FormsModule,
  PipesModule,
];

@NgModule({
  imports: [
    ...MODULES,
  ],
  declarations: [],
  exports: [
    ...MODULES,
  ],
  providers: [],
})
export class MyCommonModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: MyCommonModule,
      providers: [],
    };
  }
}

• app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {ErrorHandler, NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {AppComponent} from './app.component';
import {TransferHttpCacheModule} from '@nguniversal/common';
import {HttpClientModule} from '@angular/common/http';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {environment} from '../environments/environment';
import {APP_ROUTES} from './app.routing';
import {MyCommonModule} from './my-common/my-common.module';

import {SomeComponent} from './app/some/some.component.ts';

@NgModule({
  declarations: [
    AppComponent,
    SomeComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    BrowserAnimationsModule,
    MyCommonModule.forRoot(),
    BrowserModule.withServerTransition({appId: 'my-app'}),
    RouterModule.forRoot(APP_ROUTES, {
      useHash: false
    }),
    TransferHttpCacheModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

• some.component.html

<div>{{ telNumber | hideTel }}</div>
       〰️〰️〰️〰️〰️〰️〰️〰️〰️
=======^================================================
  x some.component.html 1 of 1 problems
--------------------------------------------------------
  Unable to resolve signature for call of hideTelng
========================================================

回答1:

It could be resolved by "preserveSymlinks": true option in tsconfig.json

• tsconfig.json

{
    ...
    "compilerOptions": {
        ...
        "preserveSymlinks": true,
    },
}

来源：https://stackoverflow.com/questions/60701385/unable-to-resolve-signature-for-pipe-invocation-in-vscode-by-angular-language-se