What a pain…!!
I’ve been trying to use HashLocationStrategy in my Angular 2 application to get URLs with a # in (tghe old style URLs) and my Angular application ran fine when I launched it from its original URL
http://localhost:58035/Admin
and I could go to a sub-page like this
http://localhost:58035/Admin/#/adm-products
once the Angular 2 app had loaded.
However, whenever I tried to go to the sub-page URL directly (before angular had been loaded), I got the following error
“boot:Error: patchProperty/desc.set/wrapFn@http://localhost:58035/libs/zone.js/dist/zone.js:794:27
Zone Zone ZoneTask/this.invoke@http://localhost:58035/libs/zone.js/dist/zone.js:433:29
Error loading http://localhost:58035/scripts/boot”
I ‘m using TypeScript and I have a gulp task that turns the boot.ts file into boot.js, I could see that the boot.js file was created under the scripts folder and as I said, the Angular 2 app loaded fine when visiting the original URL.
Took me long enough to figure out what was going on!!!
Turns out I changed from the default location strategy to the Hash Location Strategy later on and set my base location to
<base href=”/Admin/” />
You don’t need a base element when using HashLocationStrategy and I’m pretty sure it would have been quite happy with life if I had taken out the last backslash in that base href… YEP… just tested it now
<base href=”/Admin” />
works fine.
Makes sense right. these are two completely different URL:
http://localhost:58035/Admin/#/adm-products
http://localhost:58035/Admin#/adm-products