So doing my normal development workflow, I tend to forget how I completed or did different tasks. This led to me running into issues when I set up a new development project involving angular route. So I set a simple route like the code inside my app.module.ts
[{path:'test/test', component: LoginComponent, pathMatch: 'full'},
{path:'**', redirectTo: 'test/test'}
The route worked like normal when I visited localhost:4200( as shown below). When I ran ng serve, I could visit the web page without any issue
However, when I tried to reload the route or go directly to URL, I got this error
GET http://localhost:4200/test/runtime.js net::ERR_ABORTED 404 (Not Found)
test:1 GET http://localhost:4200/test/polyfills.js net::ERR_ABORTED 404 (Not Found)
test:1 GET http://localhost:4200/test/vendor.js net::ERR_ABORTED 404 (Not Found)
test:1 GET http://localhost:4200/test/main.js net::ERR_ABORTED 404 (Not Found)
test:1 GET http://localhost:4200/test/styles.js net::ERR_ABORTED 404 (Not Found)
test:1 Refused to execute script from 'http://localhost:4200/test/styles.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
When I googled around, there were many posts around setting up the route, but it never addressed my issue.
The issue is that when you navigate to http://localhost:4200/test/test , angular does not know where the entry files are. Thus, you get the errors below. To quick fix is to update the LocationStrategy to use HashLocation as shown below
App.module.ts
providers: […, {provide: LocationStrategy, useClass: HashLocationStrategy}],
This will add the # to the URL so now you can have direct links and refresh with no issue
