Converting Angular 2 routing to Angular 5

Question

I've got a site that I'm in the middle of converting from Angular 2 to Angular 5. What I've got a question on is how is the preload in Angular 5 now handled in comparison. For example the code on the old angular 2 code was :

       .state('data', {
        url: "/data",
        templateUrl: "data/data.tpl.html",*emphasized text*
        resolve: {
            preLoad:['dataService', function(service) {
                return service.primeData();
            }]
        },
        caption: "Search",
        navOrder: 1

My question is how does the preload: above get handled now on Angular 5. Thank you for any comments or help with this.

This might help you: angular.io/guide/router#resolve-pre-fetching-component-data — R. Richards
– R. Richards, Commented Apr 18, 2018 at 22:00

Arielle Nguyen · Accepted Answer · 2018-04-27 08:12:59Z

1

To preload your module/service in Angular 5, you can do it through route config:

app-routing.module.ts

import { NgModule }     from '@angular/core';
import {
  RouterModule, Routes,
} from '@angular/router';

import { DataComponent } from './data.component';
import { PageNotFoundComponent }   from './not-found.component';


const appRoutes: Routes = [
  {
    path: 'data',
    loadChildren: 'app/data/data.module#DataModule'
  },
  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
    )
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

You can enable preload all modules (or add your own custom preloading):

RouterModule.forRoot(
  appRoutes,
  {
    enableTracing: true, // <-- debugging purposes only
    preloadingStrategy: PreloadAllModules
  }
)

answered Apr 27, 2018 at 8:12

Arielle Nguyen

3,1721 gold badge22 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

yams Over a year ago

quick question. In the case of custom preloading how would I achieve that. In my example I return service.primeData();?

Arielle Nguyen Over a year ago

I would call "service.primeData()" to get the data in the Data module

yams Over a year ago

Also not all of the components will have preload The route I show does have it but others don't

CornelC Over a year ago

@yams have a look at custom preloading

Klodian · Accepted Answer · 2018-04-18 22:30:42Z

app.router.ts

import { NgModule ,ModuleWithProviders } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { dataService } from './service/dataService';


const router: Routes = [
   { path: 'DataService, redirectTo: '/dashboard', pathMatch: 'full' },

   { 
      path: 'detail/:id', 
      component: HeroDetailComponent,
      resolve: {
        data: dataService 
      },
  }

];
export const routes: ModuleWithProviders = RouterModule.forRoot(router);

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule , APP_INITIALIZER    } from '@angular/core';

import {routes} from './app.router';

import { dataService } from './service/dataService';

@NgModule({

   declarations: [

      your component here 
   ],

   imports: [

      routes,

   ],

   providers: [

      dataService 

   ]

})
export class AppModule { }

dataService.ts

import { Injectable } from '@angular/core';

import { Router, Resolve, ActivatedRouteSnapshot} from '@angular/router';

@Injectable()

export class dataService implements Resolve {

   constructor(private heroService: HeroService, private router: Router) { }

   resolve(route: ActivatedRouteSnapshot): Promise | boolean {

      let id = route.params['id'];

      let result = this.check_id(id);

      if ( result ) {

          return result ;

      } else { // id not found

          this.router.navigate(['/dashboard']);

          return false;
      }

   }

 check_id(id){

     // check somthing return somthing or false

    return true;
 }
}

Promise requires the use of a parameter in the definition :interface Promise<T> { readonly [Symbol.toStringTag]: "Promise"; }

Collectives™ on Stack Overflow

Converting Angular 2 routing to Angular 5

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related