Angular: LowerCase Serializer as Injection

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

import { DefaultUrlSerializer, UrlSegmentGroup, UrlTree } from '@angular/router';

@Injectable()

//*simple version as injection

export class Url_to_LowerCase_Serializer {

    private defaultSerializer: DefaultUrlSerializer = new DefaultUrlSerializer();

     parse(url: string): UrlTree {

      console.log ('URL=' + url);  

      var lower_url=url.toLowerCase();

      console.log('lower=' + lower_url);

      //return super.parse(lower_url);

      return this.defaultSerializer.parse(lower_url);

    }

     serialize(tree: UrlTree): string {

        console.log('tree=' + tree)

        return this.defaultSerializer.serialize(tree);

      }

}

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

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

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';  //*for url to web-api

import { AppRoutingModule } from './app-routing.module';

import { CookieService } from 'ngx-cookie-service';

import { FormsModule } from '@angular/forms';

//*for case inSensitiveURL

import { UrlSerializer } from '@angular/router';                                      //*for lowercase all urls

import { Url_to_LowerCase_Serializer } from './services/url_to_lowercase_serializer.service';

//import { Url_to_LowerCase_Serializer } from './services/url_to_lowercase_serializer.service';  //*for lowercase all urls inSensitiveURL .ts file in services

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

import { ListArticlesComponent } from './components/articles/list-articles/list-articles.component';

import { EditArticleComponent } from './components/articles/edit-article/edit-article.component';

import { ReadArticleComponent } from './components/articles/read-article/read-article.component';

import { UserComponent } from './components/user/user.component';

import { AuthenticationInterceptor } from './services/authentication.interceptor';

import { RegisterComponent } from './components/user/register/register.component';

import { LoginComponent } from './components/user/login/login.component';

import { HeadbarComponent } from './shared/headbar/headbar.component';

import { AdHorizontalComponent } from './components/ads/ad-horizontal/ad-horizontal.component';

import { AdVerticalComponent } from './components/ads/ad-vertical/ad-vertical.component';

import { AdBlockComponent } from './components/ads/ad-block/ad-block.component';

@NgModule({

  //*Insert Components in Declatation

  declarations: [

    AppComponent, //*main page

    ListArticlesComponent,

    EditArticleComponent,

    ReadArticleComponent,

    UserComponent,

    RegisterComponent,

    LoginComponent,

    HeadbarComponent,

    AdHorizontalComponent,

    AdVerticalComponent,

    AdBlockComponent,

  ],

  //*Insert Modules in Import

  imports: [

    BrowserModule,

    AppRoutingModule, //*imports app-routing file

    HttpClientModule,  //for web-api cll

    FormsModule

  ],

  //*authenticate intercepter

  providers: [

    {

    provide: HTTP_INTERCEPTORS,

    useClass:AuthenticationInterceptor,

    multi:true,

  },

  {provide: CookieService      } ,

  {

    //*for lowercase all urls, so /Images in path will find /images as files

    provide: UrlSerializer,                

    useClass: Url_to_LowerCase_Serializer  

 }

  ],

  bootstrap: [AppComponent]

})

export class AppModule { }