Unable to get to the specific product route

[samsur]

I can think of a common use case where you email a link to a specific product to someone

Example : http://localhost:3000/product/1

When I type this route on the browser address bar, I am seeing a bunch of console error, including "System is not defined".
Tried hosting this on IIS with the rewrite rule in web.config as follows and it does work only for links like
http://localhost:3000/products

 <system.webServer>
 <rewrite>
      <rules>
        <rule name="ClientRouting" stopProcessing="true">
          <match url="^(.*)$" ignoreCase="false" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
          </conditions>
          <action type="Rewrite" url="index.html" appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

How to create a rule so that the proper component is loaded. - Thanks

[DeborahK]

There are two ways to specify client-side routes:

• HTML 5 style URLS
• Hash style URLs

By default, Angular 2 uses the HTML 5 style URLs, which mean that the server needs to be configured to support them, as you have shown above. Here is a post with a suggested web.config http://stackoverflow.com/questions/12614072/how-do-i-configure-iis-for-url-rewriting-an-angularjs-application-in-html5-mode (The post is for Angular 1, but the server side info is the same.)

It may be easier to instead use Hash style URLs. If you are using the new router and the RC5+ modules, you can specify hash style URLs as follows:

export const appRoutingModule: ModuleWithProviders =
              RouterModule.forRoot(appRoutes, { useHash: true});

[samsur]

Thanks Deborah. This was very useful information and solved my problem.