0

I am trying to bundle an Angular 2 app with the help of system js builder using gulp. I have followed mostly written in https://github.com/smmorneau/tour-of-heroes. I am able to create bundles. After creating bundle, I tried to deploy the app in IIS as a web application under Default website. enter image description here

Inside my app, I have placed templates and css inside the respective component folder. But during application startup, my html templates are not getting loaded, since the url does not contain virtual directory name and resulting a 404. E.g. http://localhost/app/app.component.html should be http://localhost/Angular2Test/app/app.component.html. This url is requested by my bundled app.min.js as xhr request. In order to solve the normal requests, I have IIS rewrite rule like below

 <system.webServer>
    <rewrite>
      <rules>
        <rule name="angularjs 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="/Angular2Test/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

Can someone help me on this? Do I need to set something in Angular2 side as base path or something. I have uploaded my example to GitHub https://github.com/sajanep/Angular2PackagingTrial.

Sajan
  • 135
  • 15

1 Answers1

0

I think you need

  • add <base href="/someDir/"> to the <head> element
  • or alternatively provide {provide: APP_BASE_HREF, useValue: '/someDir'}
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567