angular - Angular 语言服务无法解析 vscode 中管道调用的签名

Question

我有一个 pipesModule在 Angular 库 项目当我将模块导入另一个项目时，我得到一个错误提示:Unable to resolve signature for pipe invocation在 vs 代码中，它仍然有效，构建没有错误，但我不知道如何修复它，我得到了这么多红线......

现在，升级后错误提示发生了变化，如下所示:Unable to resolve signature for call of pipeName ，但我认为这意味着同样的事情

每个管道都会出现这个错误，我受不了红线...，但可以通过webstorm解决。



仅此而已，有什么问题？

Angular 库项目

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

隐藏电话.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);
  }
}

管道模块.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
├─src
│  ├─my-common
│  │  └─my-common.module.ts
│  ├─app
│  │  └─some
│  │     ├─some.component.html
│  │     ├─some.component.scss
│  │     └─some.component.ts
│  ├─app.module.ts
...

我的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
========================================================

Answer 1

可以通过 "preserveSymlinks": true 解决tsconfig.json 中的选项

tsconfig.json

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