I have Express serving up a local Angular2 app. To expose various node_modules to the Angular2 app from express I have something like the below setup
config.dependencies = [
{
staticPath: './node_modules/@angular/',
mntPath: '/angular'
},
...
config.dependencies.forEach((dependency) => {
app.use(dependency.mntPath, express.static(path.resolve(dependency.staticPath)));
})
In my index.html in the Angular2 app I have
<script src="angular/shim.min.js"></script>
<script src="angular/zone.js"></script>
<script src="angular/Reflect.js"></script>
<script src="angular/system.src.js"></script>
<script src="systemjs.config.js"></script>
<base href="/">
This has always worked great. I can route to any page (like localhost/settings for example). My problems arise when I try to use sub-routes or parameters, such as settings/:id. I setup the route and from within* the app can navigate to settings/5, but if I reload the page all hell breaks loose.
The crux of the issue is on a hard reload the browser tried to grab shim.js, zone.js, etc... from the relative path of localhost/settings/angular/zone.js, instead of localhost/angular/. How can I force the app to try and get the resource from the proper location?