While reloading the page I got 404 error for angular.

-

 

   I am using angular application; I have no problem in running on localhost when I hosted my application on server. When I clicked the employee button it loads the employee details. However I refreshed the same page, It gives me 404 file or directory not found error.




                I have fixed the issue using routing strategies(HashLocationStrategy) approach. This will make the links look like http://domain.com/#/page for the url  http://domain.com/page.

In app.module.ts, we need to import HashLocationStrategy, LocationStrategy. And then in NgModule Provider add {{provide: LocationStrategy, useClass: HashLocationStrategy}}.




App.Module.Ts


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

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

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

 

@NgModule({

declarations: [

  AppComponent,

 

],

  imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule,

  ],

  providers: [SharedService,{ provide: LocationStrategy, useClass: HashLocationStrategy}],

  bootstrap: [AppComponent]

})

export class AppModule { }


Comments

Post a Comment

Popular posts from this blog

Angular Best Practices and Coding Standards: A Guide for Developers

-
Image
  Angular Best Practices and Coding Standards: A Guide for Developers Angular, a powerful and widely used front-end framework, empowers developers to build robust and scalable web applications. However, harnessing its full potential requires adherence to best practices and coding standards. In this blog, we'll explore essential Angular best practices and coding standards to help developers write clean, maintainable, and efficient code. 1. Follow the Angular Style Guide: Angular provides an official style guide that outlines conventions for formatting, naming, and organizing code. Adhering to this guide ensures consistency across projects and enhances collaboration among developers. 2. Module Organization: Feature Modules: Organize your application into feature modules based on functionality. Aim for a flat structure with a dedicated module for each feature. Shared Module: Create a shared module for components, directives, and pipes used across multiple modules. Import the shared mo...
Read more

How to SSH AWS EC2 instance?

-
Image
 How to SSH AWS EC2 instance? 1.2.1. We are going to use putty to SSH into EC2 1.2.2. Download Putty and Install (https://www.putty.org/) 1.2.3. To connect using Putty we required .ppk file. 1.2.4. Let’s create .ppk file using .pem file generated in Step 1.1.5 1.2.5. Click on PuTTYgen -> File > Load Private Key -> select .pem file created in Step 1.1.5 -> Save Private Key -> Yes -> Save create ppk file in secure location 1.2.6. Open 1.2.5. Click on PuTTYgen -> File > Load Private Key -> select .pem file created in Step 1.1.5 -> Save Private Key -> Yes -> Save create ppk file in secure location 1.2.6. Open Putty 1.2.7. Enter Hostname as EC2 public IPv4 DNS (ubuntu@hostname as Ubuntu is default username) 1.2.8. Expand SSH > Auth and select Private key file for Authentication (.ppk file generated in 1.2.5) 1.2.9. Click on Open to start SSH 1.2.10. Enter sudo su – to get root access
Read more

Top 7 ways to use Interceptors in Angular

-
  Top 7 ways to use Interceptors in Angular It Intercepts and handles an HttpRequest or HttpResponse. Most interceptors convert the outgoing request before passing it on to the next interceptor in the chain. Handle (transformed rake). An interceptor can also alter the response event stream by applying additional RxJS operators to the stream returned by the next.take care (). An interceptor may rarely fully handle the request and create a new event stream instead of invoking nextHandle(). This is acceptable behavior, but be aware that further interceptors will be skipped altogether. interface HttpInterceptor {     intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>   }   It is rare but valid for an interceptor to return multiple responses on the event stream for a single request. 1. Authentication And first on the list is authentication! It is just so fundamental for many applications that we have a pro...
Read more