How to fix 404 Not Found Error for opening a new tab in Angular

Question

How to fix 404 Not Found Error for opening a new tab in Angular

I used 'Window.open()' for opening new tab in Angular.

My code is:

let windowRef: Window = window.open('inspection/' + sheetId + '/' + equipmentId, '_blank');

It works very well for my local machine. However, it did not work when I used IIS. When a new tab is open, it shows:

HTTP Error 404.0 - Not Found The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

Detailed information for the error:

Detailed Error Information:
Module             IIS Web Core
Notification       MapRequestHandler
Handler            StaticFile
Error Code         0x80070002
Requested URL      http://www.testinspection.com:80/inspection/2/GBRX700775
Physical Path      C:\inetpub\wwwroot\Inspection\inspection\2\GBRX700775
Logon Method       Anonymous
Logon User         Anonymous

This is my routing code:

 {
        path: 'inspection/:sheetId/:carId', component: InspectionTabComponent, resolve: { inspectionData: InspectionResolve },
        canActivate: [AuthGuard], canDeactivate: [CanDeactiveGuard]
 },

How can I fix it? What did I miss for this program? Please help me and I appreciate you in advance.

angular

asked on Stack Overflow Sep 13, 2019 by

P.Lee

2 Answers

Its definitely IIS configuration, If your local is working fine. You should configure inbound rule using this documentation

Hope it will help you :)

answered on Stack Overflow Sep 13, 2019 by

Jargal

this is how it is supposed to work: you open mysite.com/. the static server returns you index.html and this html contains links to scripts with all the logic, required for your application.

Now lets try to navigate to mysite.com/preview/ mostly all the servers will try to look for /preview.html or /preview/index.html, or idk... and there is no such page. that is why you need to rewrite this request and return the original /index.html which does contain everythin your app needs. the /preview navigation will be handled inside of client javascript - inside of angular library and that is it.

config could look like config from this post

<rewrite>
    <rules>
        <rule name="SPA Routes" stopProcessing="true">
        <!-- match everything by default -->
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
            <!-- unless its a file -->
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <!-- or a directory -->
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <!-- or is under the /api directory -->
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
            <!-- list other routes or route prefixes here if you need to handle them server side -->
        </conditions>
        <!-- rewrite it to /index.html -->
        <action type="Rewrite" url="/index.html" />
        </rule>
    </rules>
</rewrite>

answered on Stack Overflow Apr 12, 2021 by

Andrei

User contributions licensed under CC BY-SA 3.0