1

I've been working on an Angular 10 (now 11, same issue) app and it seems like suddenly the ability to refresh the page or go back is no longer working. I know things don't just suddenly break, and the only thing that I've changed is adding a new "details" component that is supposed to open from a list of records, meaning I've added routing to another component. When I load the app the first time, everything seems fine, and clicking on the record in the list does navigate to the details component. If I try to refresh the page (ie, for debugging) or click the back button, only the raw JSON data from the server loads. No styling at all or other HTML markup. No errors show in the console either and I'm getting a 200 response back from the server, so I guess some JS is still working.

My guess is it's something with routing since that's what I've just added but it's nothing fancy.

const routes: Routes = [
  { path: '', redirectTo: 'customers', pathMatch: 'full' },
  { path: 'customers', component: CustomersListComponent },
  { path: 'customers/:id', component: CustomerDetailComponent }
];

Surely it's some silly Angular config issue but I'm at a loss. I did see this AngularJS post and I checked that just to be sure but my index.html is fine (as far as I can tell):

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

Anyone want to show me the simple thing I'm missing?

Edit: Also if I retype localhost:4200 manually in the address bar it's fine, but I can't retype localhost:4200/customers. Also tried deleting node_modules, npm update, npm install, and rebooting which seem to have fixed other somewhat similar issues

nateha1984
  • 99
  • 3
  • 14
  • Can you create a stackblitz for the same and provide the link. It'll be easy to look into the issue, how exactly it's behaving. – Chaitanya Nov 20 '20 at 02:55
  • try remove the files in "dist" folder, and run again `ng serve` – Eliseo Nov 20 '20 at 07:49
  • What location strategy are you using? Using hash location? If not, is your your sever set up to properly handle routing? When you first hit `http://example.com`, the server throws back the `index.html` which has the scripts to load Angular. Angular routing takes over from there. However, if you're on page `http://example.com/foo` and hit refresh, the server will try and find `foo.html` to return. If you use the hash location strategy that gives a URL like `http://example.com/#/foo`, everything after the hash is ignored and the server returns `index.html` again allowing Angular to load. – Krenom Nov 21 '20 at 16:25
  • I don't believe ng serve creates a dist folder, I think it just serves the files from memory. In any case, I tried that and the same issue is still happening. Here's a stackblitz but of course everything works fine there: https://stackblitz.com/edit/angular-ivy-5ejj5o Location strategy is the default/no hash strategy – nateha1984 Nov 21 '20 at 17:31

1 Answers1

1

Turns out I had some sort of conflict between the Angular routing and the server routes. I only saw one reference to this, but I guess you can't have a path on the server be the same as an Angular path? Basically I had an Angular route for /customers to take me to the Customers component, and that in turn made a call to the backend server to get the list of customers with a call to /customers. This for some reason works when the page is initially loaded, but refreshing causes the component to not load but the call to the server is made, hence only loading the JSON data and nothing else.

I was using the Angular/Webpack proxy config to attempt to route from localhost:4200/ to localhost:8080/ with something like

{ "/" : "target": "http://localhost:8080" }

I changed my server routes to have an api prefix and the Angular services to make calls to api/whatever and that seems to have fixed it after much frustration. Hopefully this helps someone, but I still don't fully understand why the Angular routing settings and its http client conflict like that, it seems like these shouldn't interfere with each other, but I'm mostly a backend dev and don't understand much about this voodoo front end stuff :) .

nateha1984
  • 99
  • 3
  • 14