web-dev-qa-db-fra.com

Comment résoudre Erreur NetworkError à XMLHTTPQUEST.SEND (... dist \ FXCore \ Server \ Main.js: 200768: 19)

Je suis nouveau à angulaire. Je viens de finir de développer mon angular. Lorsque j'utilise NG Servir pour servir mon application pendant la production, tout fonctionne bien. J'ai ajouté angularIVERSAL. MAINTENANT QUE I Exécution de l'un des NPM Run Dev: SSR ou NPM Run Build: SSR && NPM Run Servir: SSR, mon application refusera d'ouvrir une réponse de NetworkError dans la console. J'ai remarqué que cette erreur se produit pour le nombre de requêtes HTTP dans lesquelles via des constructeurs de classe () {..} '. J'ai parcouru plusieurs solutions mais je ne pouvais pas oublier ce que je ne fais pas bien. Mon backend est développé avec nodejs et express. Je vais apprécier toute aide peut obtenir. Voici un exemple complet de la réponse d'erreur que j'invite toujours dans la console.

ERROR NetworkError
    at XMLHttpRequest.send (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:200768:19)
    at Observable._subscribe (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:19025:17)
    at Observable._trySubscribe (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:186304:25)
    at Observable.subscribe (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:186290:22)
    at scheduleTask (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:105897:32)
    at Observable._subscribe (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:105959:13)
    at Observable._trySubscribe (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:186304:25)
    at Observable.subscribe (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:186290:22)
    at subscribeToResult (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:196385:23)
    at MergeMapSubscriber._innerSub (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:191575:116)```
javascriptnode.jsangularxmlhttprequestangular9
6
Benito

J'avais toujours ça ERROR NetworkError Mais j'ai trouvé une autre façon de faire disparaître cette erreur. Je pense que cette réponse est pertinente puisque je reçois la même erreur postée ci-dessus. Si cela peut aider quiconque avec cette même erreur de serveur, c'est génial.

Si la demande d'API est apportée au serveur OnInit lors de la recharge de la vérification isPlatformBrowser d'abord lorsque vous utilisez ng-universal Exemple.

import { Component, OnInit, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { HttpClient, HttpHeaders } from '@angular/common/http';

public testBrowser: boolean;
export class HomeComponent implements OnInit {

  public testBrowser  : boolean;
  public data         : any;
  
  constructor(private http: HttpClient, @Inject(PLATFORM_ID) platformId: string) {
    this.testBrowser = isPlatformBrowser(platformId);
  }

  ngOnInit() {
    if (this.testBrowser) {
      //avoid server NETWORK error
      this.data = this.http.get('/api');
    }
  }
}

J'avais cette même erreur en essayant de faire des appels de serveur du client avant de vérifier isPlatformBrowser === true Premier OnInit et cela a résolu mon problème. Espérons que cela peut aider ce bogue.

Pour référence, cette réponse m'a aidé à courtrer ce long bogue debout. https://stackoverflow.com/a/46893433/468418

2
Ian Poston Framer

Je reçois la même erreur. Essayez de supprimer TransferHttpCacheModule de votre app.module et créer votre propre fichier intercepteur de transfert HTTP personnalisé.

J'ai fait un fichier appelé transfer-state.interceptor.ts puis l'a ajouté à app.moduleproviders:[] Pour gérer cela. Les exemples ci-dessous montrent comment je l'ai accroché. Je ne sais pas si cela fonctionnera certainement pour vous, mais cela a fait que cette erreur m'a disparu.


//app.module.ts

import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
//import {TransferHttpCacheModule } from '@nguniversal/common';

import { AppRoutingModule } from './app-routing/app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './modules/home/home.component';
import { SliderComponent } from './components/slider/slider.component';
import { WindowRefService } from './services/window-ref.service';
//import { TransferHttpInterceptorService } from './services/transfer-http-interceptor.service';
import { TransferStateInterceptor } from './interceptors/transfer-state.interceptor';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    SliderComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserTransferStateModule,
    AppRoutingModule,
    HttpClientModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    WindowRefService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TransferStateInterceptor,
      multi: true
    }
],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ceci est une version d'un fichier d'état de transfert personnalisé, mais il existe quelques façons de le faire si celui-ci ne fonctionne pas.


//transfer-state.interceptor.ts

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { Observable, of } from 'rxjs';
import { StateKey, TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import { tap } from 'rxjs/operators';

@Injectable()
export class TransferStateInterceptor implements HttpInterceptor {

  constructor(
    private transferState: TransferState,
    @Inject(PLATFORM_ID) private platformId: any,
  ) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // For this demo application, we will only worry about State Transfer for get requests.
    if (request.method !== 'GET') {
      return next.handle(request);
    }


    // Use the request url as the key.
    const stateKey: StateKey<string> = makeStateKey<string>(request.url);

    // For any http requests made on the server, store the response in State Transfer.
    if (isPlatformServer(this.platformId)) {
      return next.handle(request).pipe(
        tap((event: HttpResponse<any>) => {
          this.transferState.set(stateKey, event.body);
        })
      );
    }

    // For any http requests made in the browser, first check State Transfer for a 
    // response corresponding to the request url.
    if (isPlatformBrowser(this.platformId)) {
      const transferStateResponse = this.transferState.get<any>(stateKey, null);
      if (transferStateResponse) {
        const response = new HttpResponse({ body: transferStateResponse, status: 200 });

        // Remove the response from state transfer, so any future requests to 
        // the same url go to the network (this avoids us creating an 
        // implicit/unintentional caching mechanism).
        this.transferState.remove(stateKey);
        return of(response);
      } else {
        return next.handle(request);
      }
    }
  }
}

Si vous souhaitez ajouter un cache personnalisé à celui-ci, vous pouvez en installer memory-cache Mais je n'ai pas encore essayé ça. Pour plus de références, ces articles m'ont aidé beaucoup et peut-être qu'ils peuvent vous aider aussi.

https://itnext.io/angular-universal-caching-transferstate-96eaaa386198

https://willtaylor.blog/angular-universal-for-angular-Developers/

https://bcodes.io/blog/post/angular-universal-relative-à-aabsolu-http-interceptor

Si vous n'avez pas encore, vous devrez peut-être ajouter ServerTransferStateModule sur votre fichier app.server.module.


//app.server.module

import { NgModule } from '@angular/core';
import {
  ServerModule,
  ServerTransferStateModule
} from "@angular/platform-server";

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerTransferStateModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

bonne chance!

2
Ian Poston Framer