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()); // } // }
|