当我禁用redux-devtools时，路由器导航需要很长时间。

Posted 2023-02-07

我正在使用angular 8和ngrx的应用程序。一切都很顺利，直到我测试我的应用程序在Incognito模式。突然，一个网址开始工作非常慢，几乎50秒之间的导航开始和导航结束。我观察到启用redux-devtool扩展似乎解决了这个问题（每次工作）。不知道这里发生了什么。占用时间的路由的resolver有3个api调用，但这些调用在我点击路由的那一刻就发生了，但resolver却需要50秒才能到达该组件。下面是详细情况。如果还需要什么，请告诉我。

包.json

    
  "name": "sfe",
  "version": "0.0.0",
  "scripts": 
    "ng": "ng",
    "start": "ng serve  --configuration=proxy --proxy-config proxy.config.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  ,
  "private": true,
  "dependencies": 
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@auth0/angular-jwt": "^4.0.0",
    "@ngrx/effects": "^8.6.0",
    "@ngrx/entity": "^8.6.0",
    "@ngrx/router-store": "^8.6.0",
    "@ngrx/schematics": "^8.6.0",
    "@ngrx/store": "^8.6.0",
    "@ngrx/store-devtools": "^8.6.0",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "core-js": "^2.5.4",
    "include-media": "^1.4.9",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.28",
    "node-sass": "~4.13.0",

    "rxjs": "~6.4.0",
    "rxjs-compat": "~6.4.0",
    "tslib": "~1.9.0",
    "webcomponents.js": "^0.7.24",
    "zone.js": "~0.9.1"
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "~0.803.25",
    "@angular-devkit/build-webpack": "^0.803.2",
    "@angular/cli": "~8.3.25",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  

app.module

import  AppEffects  from './app.effects';
import  BrowserModule  from '@angular/platform-browser';
import  NgModule, CUSTOM_ELEMENTS_SCHEMA, ErrorHandler   from '@angular/core';
import  TranslateModule, TranslateService, TranslateLoader  from '@ngx-translate/core';
import  AppRoutingModule  from './app-routing.module';
import  AppComponent  from './app.component';
import  StoreModule  from '@ngrx/store';
import  reducers, metaReducers  from './reducers';
import  CoreModule  from './core/core.module';
import  AuthModule  from './features/auth/auth.module';
import  StoreDevtoolsModule  from '@ngrx/store-devtools';
import  environment  from '../environments/environment';
import  EffectsModule, Actions  from '@ngrx/effects';
import RouterState, StoreRouterConnectingModule  from '@ngrx/router-store';
import  HttpClient  from '@angular/common/http';
import  TranslateHttpLoader  from '@ngx-translate/http-loader';
import  GlobalErrorHandler  from './core/error-handling/global-exception-handling';
import  JwtHelperService, JWT_OPTIONS  from '@auth0/angular-jwt';
import  HashLocationStrategy, LocationStrategy   from '@angular/common';
import  WindowRefService  from './core/services/window-ref.service';


export  function  HttpLoaderFactory(http:  HttpClient) 
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');


@NgModule(
  declarations: [
    AppComponent
  ],
  imports: [   
    BrowserModule,

    AuthModule.forRoot(),
    TranslateModule.forRoot(),    
    CoreModule.forRoot(),
    AppRoutingModule,
    StoreRouterConnectingModule.forRoot(
      stateKey: 'router',
      routerState:RouterState.Minimal
    ),

    StoreModule.forRoot(reducers, 
      metaReducers,
      runtimeChecks: 
        strictStateImmutability: true,
        strictActionImmutability: true
      
    ),
    StoreDevtoolsModule.instrument( maxAge: 25, logOnly: environment.production ),
    EffectsModule.forRoot([AppEffects]),
    StoreRouterConnectingModule.forRoot(),
    TranslateModule.forRoot(
      loader: 
        provide:  TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      
    )
  ],
  providers: [
    WindowRefService,
    provide : LocationStrategy , useClass: HashLocationStrategy,
    
      provide: TranslateService,
      useClass: I18nService
    ,
    
      provide: I18nService,
      useExisting: TranslateService
    ,
    
      provide: JWT_OPTIONS, useValue: JWT_OPTIONS
    ,
    JwtHelperService,
     provide: "BASE_API_URL", useValue: environment.apiUrl ,
     provide: ErrorHandler, useClass: GlobalErrorHandler 
  ],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
)
export class AppModule  

RoutingModule.ts(lazy loaded)

import  NotificationsResolver  from './resolvers/notifications.resolver';
import  NgModule  from '@angular/core';
import  Routes, RouterModule, CanActivate  from '@angular/router';
import  AuthGuard  from '../../auth/auth.guards';

const settingsroutes: Routes = [
  
    path: '',
    component: SettingsComponent,
    children: [
       path: 'notifications', component: SettingsComponent, data:  'index': 1 , resolve:NotificationsResolver,
    ],
    canActivate: [AuthGuard]
  
];

@NgModule(
  imports: [RouterModule.forChild(settingsroutes)],
  exports: [RouterModule]
)
export class SettingsRoutingModule  

Resolver.ts

import  loadContactInfo, loadNotificationMobileCarriers  from './../ngrx/settings.actions';
import  areNotificationSettingsLoaded, areContactInfoLoaded, areNotificationMobileCarriersLoaded  from './../ngrx/settings.selectors';
import  getUserDetails  from '../../../auth/ngrx/auth.selectors';
import  User  from 'src/app/core/models/User';
import  tap, filter, finalize, first  from 'rxjs/operators';
import  Observable, concat, merge  from 'rxjs';
import  Store, select  from '@ngrx/store';
import  AppState  from '../../../../reducers/index';
import  Resolve, ActivatedRouteSnapshot, RouterStateSnapshot  from '@angular/router';
import  Injectable  from '@angular/core';
import  NotificationsRequestModel  from '../models/requestmodel/notifications-request.model';
import  loadNotificationSettings  from '../ngrx/settings.actions';



@Injectable()
export class NotificationsResolver implements Resolve<any>
    loadingNotifications = false;
    loadingContactInfo = false;
    loadingMobileCarriers = false;
    notificationsRequest :NotificationsRequestModel = new NotificationsRequestModel();
    userDetail$ : Observable<any>;
    userDetail :User;

    constructor(private store: Store<AppState>)
        this.notificationsRequest.userId = 4000;

    

    resolve(route:ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<any>

        const notificationSettingsData$=  
        this.store.pipe(
            select(areNotificationSettingsLoaded),
            tap(notificationSettingsLoaded => 
                if(!this.loadingNotifications &&  !notificationSettingsLoaded)
                    this.loadingNotifications = true;
                    this.store.dispatch(loadNotificationSettings(requestParameter :this.notificationsRequest));
                  

            ),

            filter(NotificationSettingsLoaded => NotificationSettingsLoaded),
            first(),
            finalize(()=> 
                this.loadingNotifications = false;
            )
        );
        const contactInfoData$ =this.store.pipe(
            select(areContactInfoLoaded),
             tap(areContactInfoLoaded => 
                if(!this.loadingContactInfo &&  !areContactInfoLoaded)
                    this.loadingContactInfo = true;
                    this.store.dispatch(loadContactInfo(requestParameter :this.notificationsRequest));
                  

            ),

            filter(ContactInfoLoaded => ContactInfoLoaded),
            first(),
            finalize(()=> 
               this.loadingContactInfo = false;
            )
        );
        const noificationMobileCarriers$ =this.store.pipe(
            select(areNotificationMobileCarriersLoaded),
             tap(areNotificationMobileCarriersLoaded => 
                if(!this.loadingMobileCarriers &&  !areNotificationMobileCarriersLoaded)
                    this.loadingMobileCarriers = true;
                    this.store.dispatch(loadNotificationMobileCarriers());
                  

            ),

            filter(NotificationMobileCarriersLoaded=> NotificationMobileCarriersLoaded),
            first(),
            finalize(()=> 
               this.loadingMobileCarriers = false;
               console.log("third one")
            )
        );
 //This is done to enable two calls being made simultaneoulsy
        return merge(contactInfoData$, notificationSettingsData$, noificationMobileCarriers$)
    

appComponent.ts

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
)
export class AppComponent implements OnInit 
  t1 : any;
  t0 : any;
  constructor(translate: TranslateService, private router: Router, private activatedRoute: ActivatedRoute,
    private store: Store<AppState>) 
  
  ngOnInit(): void 


    this.router.events.subscribe(event => 
      switch (true) 
        case event instanceof NavigationStart: 
          this.t0 = performance.now();
          this.loading = true;
          break;
        
        case event instanceof NavigationEnd:
        case event instanceof NavigationCancel:
        case event instanceof NavigationError: 
          this.t1 = performance.now();
          this.loading = false;
          console.log(this.t1-this.t0);
          break;
        
        default: 
          break;
        
      
    );

    //load sub params    
    

答案

我看到的问题 - 是名称碰撞减速器，也而不是 merge 你可以用 forkJoin 以并行执行所有请求。

this.store.dispatch(loadNotificationMobileCarriers()) - 它是否需要 requestParameter 也是？

请尝试下面的代码，如果不成功，请检查控制台日志，如果它打印了所有的3个代码 done 并在下面的评论中告诉我。

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> 
    const notificationSettingsData$ =
        this.store.pipe(
            select(areNotificationSettingsLoaded),
            tap(flag => 
                if (!this.loadingNotifications && !flag) 
                    this.loadingNotifications = true;
                    this.store.dispatch(loadNotificationSettings(requestParameter: this.notificationsRequest));
                
            ),

            filter(flag => flag),
            first(),
            finalize(() => 
                this.loadingNotifications = false;
            ),
        );

    const contactInfoData$ = this.store.pipe(
        select(areContactInfoLoaded),
        tap(flag => 
            if (!this.loadingContactInfo && !flag) 
                this.loadingContactInfo = true;
                this.store.dispatch(loadContactInfo(requestParameter: this.notificationsRequest));
            

        ),
        filter(flag => flag),
        first(),
        finalize(() => 
            this.loadingContactInfo = false;
        ),
    );

    const noificationMobileCarriers$ = this.store.pipe(
        select(areNotificationMobileCarriersLoaded),
        tap(flag => 
            if (!this.loadingMobileCarriers && !flag) 
                this.loadingMobileCarriers = true;
                this.store.dispatch(loadNotificationMobileCarriers());
            

        ),
        filter(flag => flag),
        first(),
        finalize(() => 
            this.loadingMobileCarriers = false;
        ),
    );

    return forkJoin(
        contactInfoData: contactInfoData$.pipe(tap(() => console.log('contactInfoData$ done'))),
        notificationSettingsData: notificationSettingsData$.pipe(tap(() => console.log('notificationSettingsData$ done'))),
        noificationMobileCarriers: noificationMobileCarriers$.pipe(tap(() => console.log('noificationMobileCarriers$ done'))),
    );