Angular application loading weirdly when I add "/" at the end of URL

Question

I am having an issue. It just published my first project and now I am realising if you add an "/" to the end of the URL it does load in a very different way I cant even explain. When you add a "Trailingslash" some of the Buttons of the Website are not clickable and if I do this with ng serve the font is changing, I cant click buttons and I get a white border to the side. You can try it yourself on https://22ndspartans.de the issue is only on the discord page at https://22ndspartans.de/discord and the issues appear with https://22ndspartans.de/discord/.

I tried it on my localhost, I tried to do it with other browsers and other devices. I found this issue when I set up my google search indexing. When I clicked my Discord page directly from the search results it doesn't load any backgroundimage. At the begining the issue was on the other pages aswell. I am abolutely confused. Sorry for the english I gave my best to explain it. you can see the white border and font here with Trailingslash ----> How it should be (without trailingslash)

Edit: I found out in the published version the Anchor to the homepage is not working when you have a trailingslash on any other page. The rest seems to be working. I am hosting with cloudflare. Maybe this has something to do with google search aswell. Idk

2nd Edit: Okay I found out that the main problem is the Trailingslash so how do I tell my application to redirect to no trailingslash if a trailingslash is called? Or how do I get my website to load correctly with Trailingslash

Updated code: HTML of DiscordComponent---->TS of DiscordComponent---->New appo.routes.ts

Answer 1

Here are some potential causes and solutions:

1. Angular Route Configuration: Make sure that your route configuration is correctly set up to handle trailing slashes. You can do this by setting the trailingSlash option to true or false in your route configuration. For example:

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: '',
        component: HomeComponent,
        pathMatch: 'full',
        trailingSlash: true // or false
      }
    ])
  ]
})

This will tell Angular to either add or remove the trailing slash from the URL.

See this blog on trailing slash.

2. Server Configuration: If you're using a server-side rendering (SSR) setup, your server configuration might be affecting the way Angular handles routes. Make sure that your server is configured to handle trailing slashes correctly. For example, if you're using Node.js and Express.js, you can use the express-urlrewrite package to rewrite URLs and remove trailing slashes.
3. HTML Base Tag: The tag in your HTML header can also affect how Angular handles routes. Make sure that the tag is set to the correct URL, including the trailing slash. For example:

4. CSS and Layout Issues: The issues with button clickability and font changes could be related to CSS and layout problems. Make sure that your CSS is correctly loaded and that there are no layout issues causing the buttons to become unclickable.
5. ng serve: When using ng serve, Angular uses a development server that can sometimes behave differently than a production environment. Try building your application with ng build and serving it with a production server to see if the issues persist.

Answer 2

If you're using standalone components you don't need in your routes any lazyloading, standalone it is already lazyLoading strategy. Also, your homeComponent with pash: "" must be at first place, and you don't need this one with path: "home". Make sure you are imported all necessary modules and components directly to your discordComponent due to your standalone strategy.