Angular 2 404 error occur when I refresh through the browser

Question

I m new to Angular 2  I have stored my single-page application in my server within a folder named as  quot myapp quot   I have changed the URL in the base to http   example com myapp    My project has two pages  So I implement Angular 2 routing  I set the default page as login  When I type http   example com myapp  in my browser it will redirect automatically to http   example com myapp login  But if refresh that page I get a 404 error  saying that http   example com myapp login is not found  But if I run my project using the lite server everything is working  In this case the base URL in index html will be  quot   quot   How do fix it

User · Answer

For people  like me  who really want PathLocationStrategy  i e  html5Mode  instead of HashLocationStrategy  see How to  Configure your server to work with html5Mode from a third-party wiki      When you have html5Mode enabled  the   character will no longer be used in your URLs  The   symbol is useful because it requires no server side configuration  Without    the URL looks much nicer  but it also requires server side rewrites    Here I only copy three examples from the wiki  in case the Wiki get lost  Other examples can be found by searching keyword  URL rewrite   e g  this answer for Firebase    Apache   lt VirtualHost   80 gt      ServerName my-app      DocumentRoot  path to app       lt Directory  path to app gt          RewriteEngine on            Don t rewrite files or directories         RewriteCond   REQUEST FILENAME  -f  OR          RewriteCond   REQUEST FILENAME  -d         RewriteRule   -  L             Rewrite everything else to index html to allow HTML5 state links         RewriteRule   index html  L       lt  Directory gt   lt  VirtualHost gt    Documentation for rewrite module  nginx  server       server name my-app       root  path to app       location             try files  uri  uri   index html            Documentation for try files  IIS   lt system webServer gt     lt rewrite gt       lt rules gt          lt rule name  Main Rule  stopProcessing  true  gt           lt match url        gt           lt conditions logicalGrouping  MatchAll  gt             lt add input   REQUEST FILENAME   matchType  IsFile  negate  true    gt             lt add input   REQUEST FILENAME   matchType  IsDirectory  negate  true    gt           lt  conditions gt           lt action type  Rewrite  url       gt         lt  rule gt       lt  rules gt     lt  rewrite gt   lt  system webServer gt

User · Answer

Update for Angular 2 final version In app module ts   Add imports    import   HashLocationStrategy  LocationStrategy   from   angular common     And in NgModule provider  add     provide  LocationStrategy  useClass  HashLocationStrategy     Example  app module ts   import   NgModule         from   angular core   import   BrowserModule    from   angular platform-browser   import   AppComponent     from    app component   import   HashLocationStrategy  LocationStrategy   from   angular common     NgModule       declarations   AppComponent       imports   BrowserModule       providers    provide  LocationStrategy  useClass  HashLocationStrategy        bootstrap   AppComponent      export class AppModule      Alternative Use RouterModule forRoot with the  useHash  true  argument  Example  from angular docs  import   NgModule   from   angular core        const routes  Routes      routes in here     NgModule     imports        BrowserModule      FormsModule      RouterModule forRoot routes    useHash  true           bootstrap   AppComponent     export class AppModule

User · Answer

For people reading this that use Angular 2 rc4 or later  it appears LocationStrategy has been moved from router to common  You ll have to import it from there   Also note the curly brackets around the  provide  line   main ts     Imports for loading  amp  configuring the in-memory web api import   XHRBackend   from   angular http       The usual bootstrapping imports import   bootstrap        from   angular platform-browser-dynamic   import   HTTP PROVIDERS   from   angular http    import   AppComponent           from    app component   import   APP ROUTER PROVIDERS   from    app routes   import   Location  LocationStrategy  HashLocationStrategy  from   angular common    bootstrap AppComponent        APP ROUTER PROVIDERS      HTTP PROVIDERS       provide  LocationStrategy  useClass  HashLocationStrategy

User · Answer

In fact  it s normal that you have a 404 error when refreshing your application since the actual address within the browser is updating  and without     hashbang approach   By default  HTML5 history is used for reusing in Angular2   To fix the 404 error  you need to update your server to serve the index html file for each route path you defined   If you want to switch to the HashBang approach  you need to use this configuration   import  bootstrap  from  angular2 platform browser   import  provide  from  angular2 core   import  ROUTER PROVIDERS  from  angular2 router   import  LocationStrategy  HashLocationStrategy  from   angular common    import  MyApp  from    myapp    bootstrap MyApp      ROUTER PROVIDERS     provide  LocationStrategy  useClass  HashLocationStrategy        In this case  when you refresh the page  it will be displayed again  but you will have a   in your address    This link could help you as well  When I refresh my website I get a 404  This is with Angular2 and firebase   Hope it helps you  Thierry

User · Answer

Perhaps you can do it while registering your root with RouterModule  You can pass a second object with property useHash true like the below   import   NgModule         from   angular core   import   BrowserModule    from   angular platform-browser   import   AppComponent     from    app component   import   ROUTES     from    app routes     NgModule       declarations   AppComponent       imports   BrowserModule       RouterModule forRoot ROUTES    useHash  true           providers          bootstrap   AppComponent      export class AppModule

User · Answer

If you re running Angular 2 through ASP NET Core 1 in Visual Studio 2015  you might find this solution from J  rgen Gutsch helpful  He describes it in a blog post  It was the best solution for me  Place the C  code provided below in your Startup cs public void Configure   just before app UseStaticFiles     app Use  async   context  next     gt        await next         if  context Response StatusCode    404  amp  amp   Path HasExtension  context Request Path Value               context Request Path     index html           await next

User · Answer

I had the same problem  My Angular application is running on a Windows server   I solved this problem by making a web config file in the root directory    lt  xml version  1 0  encoding  UTF-8   gt   lt configuration gt     lt system webServer gt       lt rewrite gt         lt rules gt           lt rule name  AngularJS  stopProcessing  true  gt             lt match url        gt             lt conditions logicalGrouping  MatchAll  gt               lt add input   REQUEST FILENAME   matchType  IsFile  negate  true    gt               lt add input   REQUEST FILENAME   matchType  IsDirectory  negate  true    gt             lt  conditions gt             lt action type  Rewrite  url       gt           lt  rule gt         lt  rules gt       lt  rewrite gt     lt  system webServer gt   lt  configuration gt

[angular] Angular 2: 404 error occur when I refresh through the browser

Apache

nginx

IIS

Examples related to angular

Examples related to angular2-routing