1

I've hosted my Angular 11 app to IIS on a remote server. The application routing works fine for 2 out of my 3 routs. The first two are routings from the login page to the 'home' page and from 'home' to 'design' page (clicking on home gets me back to the home page as well). These two routes are accessed by

this.router.navigate(['design']);

or

this.router.navigate(['home']);

What does not work is going from the 'design' page to the 'preview' page. This routing is done by opening a new Window (new tab in the browser)

window.open('preview');

404 - File or directory not found. The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.

I've read that I should configure my IIS for it to URL Rewrite but I don't get that concept. This all works when doing it from VSCode and ng serve

My question is, what I am missing, is it the IIS configuration, and if so what am I getting by URL Rewriting - the examples on MS webpage do not seem relevant to me when I am aiming for the proper URL - http://servername:port/preview and getting the 404 error
or is it the issue with window.open()?

I am presented by the same 404 - File not found error when trying to refresh the page that is not the login page.

I've read this thread but I still don't get the need for URL Rewriting

This is the app-routing.module.ts code:

const routes: Routes = [
    {path: '', component: LoginComponent},
    {path: 'design', component: PaletaFormaComponent},
    {path: 'preview', component: PreviewFormaComponent},
    {path: 'home', component: FirstPageComponent},
  
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
1
  • window.open() without protocol provided (http / https) will open child instance with path relative the current one of parent. Are you sure that path generated on your IIS environment is correct? If it's hosted as sub-application of a page (i.e. myserver.com/AngularApp) you might need to mess around with baseHref in your angular.json Apr 12, 2021 at 12:43

2 Answers 2

3

An Angular application is a Single Page Application, which means the whole application is located in a single page index.html

When the client browser requests the /index.html resource it loads the angular application. Since index.html is defined as the default page, this resource will also be returned by the web server when the client requests /

Once the angular application is loaded, if the user clicks on a router link to the /home route, angular will change the url on the user browser and will display the component for the selected route, but the browser doesn't make an HTTP request to the /home resource which doesn't exist on the server. The page displayed on the browser is still index.html.

But when the user opens a new tab to /home or presses F5, the browser makes a request to the server for the /home resource, since it doesn't exist it returns a 404 error.

For the application to work, the server needs to respond to the request to /home by returning index.html. That way when the user request /home he loads the angular application and once it's loaded on the browser the angular routing kicks in and display the home component.

So the server needs to return index.html, but the angular application will use other resources than index.html such as scrips, styles, images, APIs, ... so the server needs to return index.html only when it's not a request for one of these resources. One way to do this is with URL Rewriting rules. In IIS you can do it with :

  <rules>
    <rule name="Angular Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>

These rules will make the server return the resource / (so index.html) when the request doesn't match a file, a directory and doesn't start with /api

This could also be done without url rewriting by coding this behavior directly into the web server. In aspnet core this is done with the SpaStaticFiles Middleware.

When you run your application with ng serve, angular cli launches a web server that is already configured to do the URL rewrite. That's why you don't have this issue with localhost.

1
  • The additional issue that we figure out we had when we used URL Rewriting is that Microsoft Deployed did not install the IIS module correctly, so if you have any problems with IIS Rewrite check if everything is installed correctly as well. @J.Loscos, your answer was everything and then some, thank you very much Apr 20, 2021 at 12:32
0

[routerLink]=‘/preview’ href=‘_blank’

Inside your tag should bring you to the correct route in a new tab

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.