Angular Routing not working without using Hash

Question

I am using Angular to build a single-page application with routing in SharePoint. The only way I have been able to successfully use routing is to use Angular's HashLocationStrategy URL style but I would like to eliminate using this if possible.

The project's HTML file is injected into a page, myPage.aspx, using a Content Editor web part.

This is what my RoutingModule looks like:

const routes: Routes = [
  {
    path: 'transactions',
    component: TransactionComponent,
  },
  {
    path: '',
    component: AppComponent,
  },
];

@NgModule({
  imports: [
    // useHash eliminates "Cannot retrieve the URL specified in the Content Link property" error in SharePoint
    RouterModule.forRoot(routes, { useHash: true })
  ],
  exports: [RouterModule]
})

If I do not use HashLocationStrategy and navigate to https://mySite/SitePages/myPage.aspx/transactions, I am shown the following error message:

Cannot retrieve the URL specified in the Content Link property. For more assistance, contact your site administrator.

I am using the following build command: ng build --prod --deploy-url=https://mySite/_catalogs/masterpage/Custom/myPage/dist/ --base-href=https://mySite/SitePages/myPage.aspx. I have found it necessary to use the --deploy-url flag so the page can locate the project's other files and the --base-href flag so features in SharePoint like page editing work.

How can I get routing to work without using HashLocationStrategy?

robinalaerts · Accepted Answer · 2020-02-05 14:48:52Z

2

When using the browser history api for routing, you need to make sure that the hosting server is configured to rewrite all requests to you entry file.

If urls to your domain are not rewritten, the server will try to serve a (server-side) page that does not exist. Rewriting will make sure that all requests are routed back to the entry file of your application, then the application will take care of visualising the correct (client-side) route.

check https://angular.io/guide/deployment for more information.

answered Feb 5, 2020 at 14:48

robinalaerts

5694 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Routing not working without using Hash

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related