About the forRoot method of the Router module in the SAP e-commerce cloud Spartacus UI

The configuration data for the default route is defined in the default-routing-config.tsfile :

Some examples:

login: {
    
    
    paths: ['login'],
    protected: false,
    authFlow: true,
  },
  register: {
    
    
    paths: ['login/register'],
    protected: false,
    authFlow: true,
  },

The forRoot method of RoutingModule:

When webpack.require is called, the forRoot method will be triggered:

• RoutingModule：projects\core\src\routing\routing.module.ts - 初始化 configurable route
• RoutingModule: projects\storefrontlib\cms-structure\routing\routing.module.ts - provides default route configuration
• AppRoutingModule：projects\storefrontlib\router\app-routing.module.ts：

If you do not import in AppModule AppRoutingModule:

Spartacus couldn't finish loading, which is expected, since No provider for Routerthe error message for 's is clear:

After the AppRoutingModule is annotated @angular/router, RouterModule, is not imported AppModuleinto .

Print out the value of Spartacus Router.config:

The print out is all this generic configuration:

Customize the routing path:

provideConfig(<RoutingConfig>{
    
    
      // custom routing configuration for e2e testing
      routing: {
    
    
        routes: {
    
    
          product: {
    
    
            paths: ['product/jerry/:productCode/:name', 'product/:productCode'],
            paramsMapping: {
    
     name: 'slug' },
          },
        },
      },
    }),

Customized effect:

http://localhost:4000/electronics-spa/en/USD/product/jerry/816379/dt-16-80mm-f3.5-4.5

These default routing settings of Spartacus correspond to the label field of the page in the Commerce Cloud backend CMS:

Angular provides the implementation of singleton services through the forRoot method. The so-called Singleton Service is a service that only has one instance in the application.

There are two ways to make a service a singleton in Angular:

• Set the providedIn property of @Injectable() toroot

As of Angular 6.0, the preferred way to create a singleton service is on the @Injectable() decorator implemented by the Service, providedInsetting to root. This tells the Angular DI framework to provide the service instance in the application's root directory.

The following is an example of a singleton service for SAP E-Commerce Cloud Spartacus UI:

• Include the service in an AppModule or just a module imported by AppModule

Before Angular 6.0, we needed to import services in NgModule's providers array.

@NgModule({
    
    
  …
  providers: [UserService],
  …
})

If the NgModule that imports UserService is the root AppModule, then UserService will be a singleton and available throughout the application. Although this method is theoretically possible, starting from Angular 6.0, Angular recommends that, on the service implementation file, use the providedIn attribute of the @Injectable()decorator , and only the service obtained in this way supports Tree Shaking optimization.