0

In my Excel Angular Web Add-In I get the following error, when navigating to new routes:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'index.html'

However, the routes still work. How can I fix this?

Joshua Wright
  • 81
  • 9

1 Answers1

1

For some reason, when Office.js is included, Angular 2+ appends a # to the route. For example, the default url path for my add-in was http://localhost:3000/#/.

Therefore, I had to update my routing module to use a hash:

RouterModule.forRoot(appRoutes, { useHash: true })

instead of:

RouterModule.forRoot(appRoutes)

Reference: https://learn.microsoft.com/en-us/office/dev/add-ins/develop/add-ins-with-angular2#use-the-hash-location-strategy-in-the-angular-application

Joshua Wright
  • 81
  • 9
  • 2
    I'm glad you are unblocked, but for the record, Office.js does not add # to routes. The Angular infrastructure will do this in some scenarios. Whether you get the # or not depends on your Angular location strategy and routing configuration. Your change implemented the hash location strategy. – Rick Kirkham Apr 05 '18 at 17:11
  • @RickKirkham I think there is more to this. Before the fix, if I opened the web add-in in Edge or Chrome, the URL was constantly appended with a "/#", and actually crashed Chrome. Experimentally I removed office.js, and then restarted the application. The "/#" was no longer appended and changing routes produced no error. Why does including office.js result in this behavior? – Joshua Wright Apr 06 '18 at 17:56
  • 1
    I'm afraid I don't know why loading Office.js affects the Angular location strategy. I just wanted to make clear that Office.js does not have code that adds "/#" to URLs. The loading of Office.js causes Angular to add that string. As you have discovered, you have to use the hash location strategy. I discovered the same thing when making this sample: https://github.com/OfficeDev/Word-Add-in-Angular2-StyleChecker/blob/master/app/app-routing.module.ts – Rick Kirkham Apr 06 '18 at 22:05