angular - Experimental decorators warning in TypeScript

Question

My app can't be compliled with this option. I googled a lot for this problem but i can't find some fully working solution.

This problem came when i tried to implement http interceptor in my angular 10 app, which worked in the previous versions. When i have

@Injectable()
export class AppHttpInterceptor implements HttpInterceptor {

  constructor(
    @Inject('API_URL') private baseUrl: string,
    public router: Router,
    public toasterService: ToastrService
  ) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    
    // API url
    request = request.clone({ url: `${this.baseUrl}/${request.url}` });

    // notifications
    return next.handle(request).pipe(
      tap(evt => {
        if (evt instanceof HttpResponse && evt.body && typeof evt.body.success != "undefined") {
          if(evt.body.success) {
            this.toasterService.success(evt.body.message);
          } else {
            this.toasterService.error(evt.body.message);
          }
        }
      })
    );
  }
}

by INJECT_URL i have this warning

Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option `to remove this warning.

when i googled i found one solution that worked

In VSCode, Go to File => Preferences => Settings (or Control+comma) and it will open the User Settings file. Search "javascript.implicitProjectConfig.experimentalDecorators": true and then check the checkbox for experimentalDecorators to the file and it should fix it. It did for me.

but after that my auto import feature of angular was somehow disabled. For example when i create soem component after that when i type ctrl . i don't get reccomendation for the angular component path.

How can i solve this issue ?

question from:https://stackoverflow.com/questions/65935101/experimental-decorators-warning-in-typescript

Answer 1

Waitting for answers