Core: 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!!!
      })
    );
  }
}