CODEWITHSUNDEEP
angulariisbuild
Long Hoàng Nguyễn
Long Hoàng Nguyễn

Reputation: 453

Deploy Angular To IIS 7.5 Not Working Normal

I', want to deloy My Angular Project But It Lost Component

My Process

Step 1:

I execute cmd:

ng-build --prod

Step 2:

I'm Add Website In IIS With Path Inside dist

Step 3:

Index page working Normal but other component login not found 404

http://localhost/login HTTP Error 404.0 - Not Found

In file App.Module.Ts I'm Config Routes

const routesConfig:Routes=
[
  {path:"kinds",component:KindsComponent},
  {path:"",component:FilmsComponent},
  {path:"films",component:FilmsComponent},
  {path:"login",component:LoginComponent},
  {path:"accounts",component:AccountsComponent},
  {path:"customers",component:CustomersComponent},
  {path:"director",component:DirectorComponent}
];

Note Again: http://localhost working normal but other component not found when i build project and deploy in IIS

Finally:

How to it working? Where is my mistake?

Upvotes: 4

Views: 5605

Answers (1)

Bernie
Bernie

Reputation: 5055

You need to create a redirect to index.html in the IIS for any route because in an Angular SPA the app is responsible for the routing not the server See here Angular routing.

Once e.g. http://yourdomain/ is requested -> index.html gets served and finally the app gets bootstrapped.

But once e.g. http://yourdomain/login is requested and there is no server side redirect to index.html the server doesn't have any resources mapped to that route and resolves the request with a 404 - Not Found Error.

Once you serve the index.html for any request that would end in a 404 - Not Found Error (except the assets like css, images fonts) the Angular router takes over and shows the according view once the app is bootstrapped.

Here an example rewrite rule for the IIS: 

<rule name="Angular" stopProcessing="true">
  <match url=".*" />
    <conditions logicalGrouping="MatchAll">
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    </conditions>
    <action type="Rewrite" url="/" />
</rule>

Upvotes: 7

Related Questions