0

I am building an Ionic PWA, in which I have implemented the Deep linking. 

 IonicModule.forRoot(MyApp, {}, {
            links: [
                { component: FeaturedPage, name: 'FeaturedPage', segment: ':title' },
                { component: HomePage, name: 'HomePage', segment: ':title' },
                { component: LatestPage, name: 'LatestPage', segment: ':title' },
                { component: TopPage, name: 'TopPage', segment: ':title' },
                { component: TrendingPage, name: 'TrendingPage', segment: ':title' },
                { component: ListPage, name: 'ListPage', segment: ':title' },
                { component: ItemDetailsPage, name: 'ItemDetailsPage', segment: 'Categories/:category' }
            ]
        }),

By default, it is generating an URL which contains "#". enter image description here

As per the requirement, I had to remove the "#" so I did research and found that, with the help of following I can remove the "#" from the URL.

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

{ provide: LocationStrategy, useClass: PathLocationStrategy },

I got success in results. Now the URL does not contain "#" enter image description here

However, when I am refreshing this page, then I am getting an error enter image description here

I know that, in order to overcome this type of error, there is the need of putting "#" in the URL, but now I do not want to have "#" nor I want the error after refreshing the page, Is there anybody, who can let me know, how to get rid of this?

N Sharma
  • 33,489
  • 95
  • 256
  • 444
  • I think this might be helpful https://stackoverflow.com/questions/35284988/angular-2-404-error-occur-when-i-refresh-through-the-browser – Paresh Gami Jun 28 '18 at 05:15
  • Which server are you using to serve your application? If it's webpack-dev-server then look at `devServer.historyApiFallback` option – yurzui Jun 28 '18 at 05:15
  • @yurzui Right now, I am testing it on Localhost, but will use Apache later. – N Sharma Jun 28 '18 at 05:16
  • See also https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml – yurzui Jun 28 '18 at 05:17
  • @yurzui So I need to configure it on Apache and to do so, I need to rewrite the rule for .htaccess file in the root of the Apache server. Is there any configuration that I will need to do in my project ? How can I get rid of this problem on localhost too? – N Sharma Jun 28 '18 at 05:39
  • `Which server are you using to serve your application?` What are you using for localhost? – yurzui Jun 28 '18 at 05:39
  • I am using Ionic and by using command `ionic serve`, it runs on 8100 port. – N Sharma Jun 28 '18 at 05:43
  • https://github.com/ionic-team/ionic-app-scripts/issues/1263 – yurzui Jun 28 '18 at 05:47
  • I have done all of them, but issue is still there – N Sharma Jun 28 '18 at 05:53

0 Answers0