Angular project hosting causing malfunctions in route parameters

Encountering a problem with route parameters after deploying my website on namecheap hosting.

Routes Setup:

const routes: Routes = [

    { path: 'women', component: ProductlistingComponent }, 
    { path: 'women/:search_1', component: ProductlistingComponent },
    { path: 'women/:search_1/:search_2', component: ProductlistingComponent }, 

    { path: 'men', component: ProductlistingComponent }, 
    { path: 'men/:search_1', component: ProductlistingComponent },
    { path: 'men/:search_1/:search_2', component: ProductlistingComponent }, 
]

Issue in Local Testing

During local testing, the ProductlistingComponent loads successfully and retrieves values for search_1 and search_2 parameters.

For example:

localhost:4200/women/winter/black

The above URL displays dresses for winter in black color... Correct results are shown based on parameters like winter and black.

In the ProductlistingComponent component, I capture the values of search_1 and search_2 as follows:

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) { }

some_function() {

    this.route.snapshot.paramMap.get("search_1") // received winter 
    this.route.snapshot.paramMap.get("search_2") // received black
}

Problem Encountered:

After publishing the website to namecheap, accessing the URL https://my-domain.com/women works fine and displays the ProductlistingComponent. However, passing values like

https://my-domain.com/women/black/winter 

or

https://my-domain.com/women/black

results in a blank page being displayed.

The reason behind this issue is unclear. Previously, there was an issue with the # in the URL which was resolved by defining some APACHE rules in the .htacess file.

.htaccess file code



<IfModule mod_rewrite.c>
  RewriteEngine On

  RewriteBase /dist/dress/
  # Redirection of requests to index.html
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^.*$ - [NC,L]
  RewriteRule ^(.*) index.html [NC,L] 
</IfModule>

Additionally, the website was also deployed on firebase hosting without encountering this issue. The reason for hosting on namecheap was per instructions from my boss.

Any assistance would be highly appreciated.

Answer №1

Namecheap Hosting

When setting up my project in Namecheap Hosting, I encountered an issue where my project folder was not located in the root directory but inside another folder.

--public_html
    --dist
        --dress
            --index.html
            --.htaccess
            --rest-of-the-project-files

To address this problem, I found a solution by running a specific command to build my Angular project:

ng build --prod --base-href=yoursubfolder // your sub-folder

ng build --base-href=/dist/dress/  // in my case

instead of just running:

ng build

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for hiding a <div> styled as a tooltip in an Angular application when the user clicks elsewhere

I am currently developing an Angular 7 application. One of the features I have implemented is an interactive icon that reveals an absolutely positioned tooltip component when clicked on by the user. However, I am faced with the challenge of making the too ...

Emphasize the search term "angular 2"

A messenger showcases the search results according to the input provided by the user. The objective is to emphasize the searched term while displaying the outcome. The code snippets below illustrate the HTML and component utilized for this purpose. Compon ...

Is there a way to incorporate my getter into a computed property?

My Vuex Store is built using Vuex module decorators and I am facing an issue with using a getter for a computed property. Here is my code: @Module export default class WorkoutModule extends VuexModule { _workout: Workout; @Mutation startWork ...

Retrieving the inner text of a dragged element using Angular Material's DragAndDrop feature

Can the inner text of a dragged element be retrieved and utilized in the "onDrop" function within Angular's cdkDragAndDrop feature? onDrop(event: CdkDragDrop<string[]>) { if (event.previousContainer === event.container) { moveItemIn ...

*ngFor is not rendering the array data and no error is being shown

Currently utilizing mongoDB's $filter aggregation feature, which has successfully generated the expected output from my query. However, I am encountering an issue with my HTML code as *ngFor is not displaying the data and no errors are being shown in ...

Uploading files in Angular alongside other data within the same HTTP post request

Can a file be added along with other information in a single post? export class ProfileExtraData { public id: number; public fullName: string; public file: any } return this.httpClient.post<void>(`${this.apiBaseUrl}/save`, profileExtraD ...

Using ts-node-dev (and ts-node) with ECMAScript exports and modules

Currently, we are in the process of upgrading TypeScript to a more modern standard due to changes in libraries like nanoid that no longer support commonjs exports. Our goal is to integrate the ts-node-dev library with exporting to ECMAScript modules. The ...

Angular user profile update button not functioning as expected

We are currently implementing Angular alongside Node.js Express. Our issue arises when attempting to update user details from the settings page, as clicking the update button triggers the following error: Failed to load resource: net::ERR_CONNECTION_RESET ...

OpenID Connect does not provide confirmation when handling user logouts

We have integrated the angular-oauth2-oidc plugin into our system. Specifically, we are using: angular 13 angular-oauth2-oidc 13.0.1 Our OAuth IDP is WSO2 Identity Server, and here is a sample of the discovery service implemented by WSO2 IS: { // ...

Managing errors with the RxJS retry operator

I'm facing an issue with my RxJS code where I need to continuously retry a data request upon failure while also handling the error. Currently, I am using the retry operator for this purpose. However, when attempting to subscribe to the retry operator ...

Having trouble utilizing the DatePicker component in my react native application

I've encountered an issue while using DatePicker in react native. Whenever I try to use it, an error pops up saying: "render error a date or time must be specified as value prop". Here is the link to my repository: my github repository const [date, se ...

How can methods from another class be accessed in a TypeScript constructor?

I need to access a method from UserModel within the constructor of my UserLogic class. How can I achieve this? import { UserModel, ItUser } from '../../models/user.model'; export class UserLogic { public user: ItUser; constructor() { ...

Steps for utilizing field labels to transmit values in Protractor

Could someone offer guidance on how to send values using field labels? I understand that it's generally not recommended to use labels for sending values since they can change, but in my case, the labels remain constant. I have attached screenshots of ...

What is the best approach for setting up a global pipe that can be utilized across various modules?

One of my Angular projects includes a custom pipe called CurrConvertPipe. import {Pipe, PipeTransform} from '@angular/core'; import {LocalStorageService} from './local-storage'; @Pipe({name: 'currConvert', pure: false}) expor ...

Exploring the Comparison Between Angular RxJS Observables: Using takeUntil and unsubscribing via Subscription

When it comes to unsubscribing from observables in Angular components utilizing ngOnDestroy, there are multiple approaches available. Which of the following options is more preferable and why? Option 1: takeUntil The usage of RxJS takeUntil for unsubscri ...

Primeng virtualscroll's offset function works similarly to pagination

Can Primeng Table be used for lazy loading? I am currently using the onLazyLoad function this.apiService.getUsers(this.searchQuery,event.sortField,event.sortOrder===-1? "desc" : "asc",****** PAGE ******).subscribe( res=>{ if(r ...

Utilizing Angular and Typescript for Enhanced Modal Functionality: Implementing Bootstrap Modals in Various Components

When working in Angular, I have a component called Modal. I need to open the same Modal Component from two different places. The catch is, I want the button text in the Banner image to say "Get Started Now". Check out the Image linked below for reference. ...

Incorporate the ID of a newly created document into another document using Mongoose

Is there a way in mongoose to save the id of one document after creation into another document within the same collection using just a single query? ...

Tips for setting up a listener for when the month changes in an ion-datetime object

When the user selects a different month, I need to update the highlightedDates by calling a query to retrieve all the dates of that specific month. This currently works if the user manually chooses a month and year using the top button, but not when they c ...

When using Sequelize, you may notice that extra spaces are automatically added at the end of the DataTypes.CHAR data type

Here is an example of how I structure my Store.ts file: import {DataTypes, Model, ModelAttributes} from "sequelize"; export default class Store extends Model { declare id: number declare name: string declare phone: string } export const S ...