Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Angular: Groß-Kleinschreibung Case Insensitive

03.03.2023 (👁5122)


Groß Klein Schreibung in Angular Projekten

In Angular wird der URL-Pfad mit Groß-klein-Schreibung verarbeitet.

Das heißt, dass alle Dateien, auf die man zugreift, am besten klein geschrieben werden und ansonsten nicht gefunden werden.

Das betrifft auch alle statischen Dateien wie Images, Files und Folders

Zur Lösung kann man zur Laufzeit den URL Pfad in url umwandeln

Als Lösung kann man die URL zur Laufzeit in kleinschreibung zwingen.

hierzu

kann man einen service einfügen, welcher die URL bei einer Anfrage in url kleinschreibung zwingt.

Die Angular App / node.js findet Dateien nur, wenn der Pfad und der Dateiname exakt richtig geschrieben ist inklusive Camel-Case schreibweise.

Eine Differenzierte Änderung ist leider nicht möglich.

Das setzen von CaseSensitive in der app-routing.module.ts kann für Assets nicht angewendet werden.

App.module.ts

 

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';  //*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 { }

 

 

 

 

url_to_lowercas_serializer.ts

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

 

export class Url_to_LowerCase_Serializer extends DefaultUrlSerializer {

    //--------< class >--------

    //----< Url_to_LowerCase_Serializer >----

    override parse(url: string): UrlTree {

        //*get the url-tree

        console.log('--Url_to_LowerCase_Serializer--: URL=' + url)

 

        const url_in_lower_case = super.parse(url);

        //*do modifications here

 

        this.lowerCaseSegments(url_in_lower_case.root);

 

        //*return the lowercase url

        return url_in_lower_case;

 

        //----</ Url_to_LowerCase_Serializer >----

    }

 

    //-< Helper >-

    //Helper: to set only url path to lowercase but not the query-part

    private lowerCaseSegments(urlSegmentGroup: UrlSegmentGroup) {

        if (urlSegmentGroup.hasChildren()) {

            Object.entries(urlSegmentGroup.children).forEach(

                ([key, value]) => this.lowerCaseSegments(value)

            );

        }

        urlSegmentGroup.segments.forEach((segment) => segment.path = segment.path.toLowerCase());

    }

    //-</ Helper >-

    //--------</ class >--------

}

 

//*simple version

// export class LowerCaseUrlSerializer extends DefaultUrlSerializer {

//     override parse(url: string): UrlTree {

//       return super.parse(url.toLowerCase());

//     }

// }