Angular windows.open 404 error, works on local but not on webserver-CodePudding

I got an Angular app that calls a window.open that works for with ng serve with http://localhost:4200/newWindow

I can copy and paste this on my ng serve and chrome. it works locally

When the code is deployed to a webserver I get "status":404 "error":"Not Found"

window.open('https://myWebserver.com/newWindow', "_blank");
window.open('/newWindow', "_blank");

Not sure how I can debug or step into the code on the web server.

When I copy and paste the url on chrome ,https://myWebserver.com/newWindow

I get the 404 error but on my local with http://localhost:4200/newWindow, this works.

only thing I can think of is the route

const routes: Routes = [
  { 
    path: '', 
    component: MyLayoutComponent,
    children: [
      { path: '', component: HomeComponent},
    ]
  },
  { path: 'newWindow', component: NewWindowComponent},
];

I tried using the '#' in the url with the following

https://myWebserver.com/#/newWindow

but no luck

Thanks in advance

CodePudding user response：

Angular uses the history API to update the URLs.

The History API is designed to let a developer say: I have modified the document using JavaScript, it is now in the same state as you would get if you just loaded the HTML document from this URL.

Unfortunately, Angular doesn't do much to make that statement true outside of the development server (as you've observed).

The usual ways to solve this problem are with Server-Side Rendering or with Static Site Generation.

A hacky approach is to deliver the same HTML document for all unknown URLs and depend on client-side code to load all the page content for it. (This is bad food for search engines, breaks your ability use to Status 404 when a URL really isn't found, and for situations where the JS fails to load or run for any reason.) How you go about that depends on your server, this page has an example for Apache HTTP.

CodePudding user response：

You need to serve index.html in case of 404 in that domain, this depend on what web-server you're using. Firebase deployments have an option for SPA. while Apache and Nginx requires you to edit the configurations

See Angular SPA returns 404 on Google PageSpeed Insights for Apache

The reason it works in development that ng serve is already handling this

CodePudding user response：

you can add target with the routerLink like below, it will work

<a [routerLink]="newWindow" target="_blank">newWindow</a>