I'm having a strange issue with some javascript files in my index.html file. I recently added a Not Found Component to my project by adding the following route:
{ path: '**', component: NotFoundComponent },
My Not Found Component works great if I add text to the end of the url. But if I add a "/" to the route, my javascript files change the path where the .html is looking for the javascript files. These javascript files are all located in the src directory of the project.
A snippet of my code: index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EEOI</title>
<!-- <base href="/"> -->
<script src="env.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
For example, I have a route called 'instructions'. If I'm on http://localhost:4200/instructions, all the browser correctly looks in http://localhost:4200/env.js for env.js, and everything loads correctly.
However, if I type a route that doesn't exist, like "http://localhost:4200/instructions/foo", my browser gets javascript loading errors because it's trying to load env.js from "http://localhost:4200/instructions/foo/env.js".
How can I make the browser always load the .js file from the root directory of the project?
In your file app-routing.module.ts you could add a redirection to the base route as follows:
//previous code
const routes: Routes = [{
path:'instructions',
component:NotFoundComponent
},{
path:'instructions/:var',
pathMatch:'prefix',
redirectTo:'instructions'
}]
// more code
However this redirection rule is rather a workaround as it is not allowing to start your .js code from a different address than http://localhost:4200/instructions.