You provided 'undefined' where a stream was expected

[jnavarrovera]

Hi!,

I'm trying to use the HttpLoader in an angular 8 project, I've followed all the steps in the guide and in this tutorial and i get allways the same error at the chrome console:

"ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable."

I think i'm using the correct version (11+ core and 4+ loader) for Angular 8, anyway here are my dependencies form package.josn:

  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/cdk": "~7.3.7",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/flex-layout": "^7.0.0-beta.24",
    "@angular/forms": "~8.2.0",
    "@angular/material": "^7.3.7",
    "@angular/material-moment-adapter": "^7.3.7",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "@fortawesome/fontawesome-free": "^5.9.0",
    "@ng-bootstrap/ng-bootstrap": "^5.1.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "angular-bootstrap-md": "^8.0.0",
    "animate.css": "^3.7.2",
    "chart.js": "^2.8.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "moment": "^2.24.0",
    "ngx-device-detector": "^1.3.6",
    "ngx-malihu-scrollbar": "^8.0.0",
    "ngx-skeleton-loader": "^1.2.2",
    "rxjs": "~6.5.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  }

And my app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, LOCALE_ID } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginModule } from './login/login.module';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { IntranetModule } from './intranet/intranet.module';
import { AlmacenModule } from './intranet/almacen/almacen.module';
import { httpInterceptorProviders } from '../core/interceptors/index';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import localeEs from '@angular/common/locales/es';
import localePt from '@angular/common/locales/pt';
import { registerLocaleData } from '@angular/common';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';


registerLocaleData(localeEs, 'es-ES');
registerLocaleData(localePt, 'pt-PT');

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    LoginModule,
    NgxSkeletonLoaderModule,
    IntranetModule,
    AlmacenModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
      }
  })
  ],
  providers: [
    httpInterceptorProviders,
    { provide: LOCALE_ID, useValue: 'es-ES' },
    // { provide: LOCALE_ID, useValue: 'pt-PT' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

I've searched in the issues, even google, but I've not found anything to solve my problem.

Thank you.

[jnavarrovera]

I've been investigating and I found that if I remove my interceptor, it works. I have others applications with both, interceptors and ngx-translate, and they works, the only diference is angular version (7 working, 8 not working)

Someone has any clue?

Thanks!

[Schmaga]

I have started to observe the same problem after upgrading to Angular 8. Can't pin it down to anything specific, yet.

What is strange is the fact that the application still works, it just throws this error from time to time...

[Schmaga]

I've been investigating and I found that if I remove my interceptor, it works. I have others applications with both, interceptors and ngx-translate, and they works, the only diference is angular version (7 working, 8 not working)

Someone has any clue?

Thanks!

Have you tried changing the order in which interceptors are provided? Just a guess. Sometimes the little things do the trick.

[treussart]

High criticality!

[Schmaga]

I do have a feeling that the issue has something to do with the interceptor problem that started appearing with ngx-translate and Angular 8. There are multiple issues open about this, but this is the one that fixed my problem: https://github.com/ngx-translate/core/issues/921

Can you please check if the workaround from that issue fixes your problem as well?

[treussart]

Thank you, for me that solved my problem.

[nschmit]

I got the same error in my angular application (and #921 did not solve it). In my case, the error was in my http-interceptor. I did some error-handling in catchError(...), and accidentally returned undefined in some cases.

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const timestamp = Date.now();
    return next.handle(request).pipe(
      timeout(HTTP_TIMEOUT_MS),
      retry(1),
      catchError((error: any) => {
          // pseude code ->
          if (error instanceOf SomeError) {
              return throwError(error);
          }
         // for errors that are not instanceOf SomeError
         // undefined was returned!!!
      })
    );
  }
}

[hugoebarboza]

any help about this issue ?

[trantoi99]

I can't find any help about issue :(

[hugoebarboza]

Hi @trantoi99 this issue normally occurs when 1) lost the internet connection, 2) the API does not respond or 3) the HTTP method is wrong.

[trantoi99]

Hi @trantoi99 this issue normally occurs when 1) lost the internet connection, 2) the API does not respond or 3) the HTTP method is wrong.

thank u so much

[info2ankit]

just throw error at the end.

return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          this._auth.logout();
          return throwError(error);  //  <========== like this
        } else if (error.status === 500) {
          this._swalAlertService.error('Oopss! looks like server issue.');
          return throwError(error);  // <=========== like this
        }
      })
    );

[on21life]

hi, in my case, I launched at local system with NestJS project, and there was no error but when I deployed at AWS EB it occurred with the same message!

nevertheless, i solved this problem with this approach. REMOVE THIS IN @Module decorator's providers item

import { APP_INTERCEPTOR } from '@nestjs/core';

{
      provide: APP_INTERCEPTOR,
      useClass: SkipInterceptor,
    }

i assumed that only one APP_INTERCEPTOR is safe. because another provider already loaded APP_INTERCEPTOR.