Angular 2 in dev and production with IIS and webpack - iis

Question

I'm building an Angular 2 web application that communicates with webapis to get data, the app will be hosted on IIS with Windows authentication and I have some questions :
Should I use system.config as the main examples of Angular 2 work with?
If so, what about production and how can I work with sass?
Should I use webpack as angular-cli? If so, how can I combine with the advantages of the webpack Dev server (Hot reloading, sass trans-pilers, etc.)
and IIS hosting with Windows authentication?
Sorry if the questions are irrelevant but I'm a .NET developer and new to Angular 2 and Webpack.

Answer 1

You can use the angular-cli to develop the angular 2 app. To deploy the app on production on IIS you can use:
ng-build --prod command from angular-cli command prompt to build the app. This will generate the files required for deployment in dest folder. These are just HTML, javascript, css and other assets that your app uses.
You can copy contents of dest folder and deploy in folder of your IIS web application.
Note:
Angular 2 routing (with hash) will work without any issue on IIS. Just create default URL rewrite rule which will redirect all the requests to index.html file of your angular app. Rule will redirect all requests to index.html except for required js files and actual angular app urls (i.e. index.html or index.html#/{route-value}.
EX: <rules> <rule name="Default"> <match url="(.* ).js|index.html(.*)" negate="true" /> <action type="Rewrite" url="/index.html" /> </rule> </rules>
Angular 2 routing (without hash) will not work with IIS. In case of pure HTML application IIS will be routing the incoming request and it will redirect the request to error page if such page does not exist at that location.
In case of .Net MVC application you can create a default route to handle all the incoming request url's and redirect it to your angular index view.
Ex Route for MVC application:
routes.MapRoute(
name: "Angular",
url: "{*url}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
constraints: new { url = new AppFeatureUrlConstraint() }
public class AppFeatureUrlConstraint : IRouteConstraint
{
public bool Match(HttpContextBase httpContext, Route route, string parameterName, RouteValueDictionary values, RouteDirection routeDirection)
{
if (values[parameterName] != null)
{
var url = values[parameterName].ToString();
if (url.StartsWith("angular/", StringComparison.InvariantCultureIgnoreCase))
return true;
else
return false;
}
return false;
}
}

Answer 2

I recommend Angular cli with webpack. It has hot module reloading already integrated and has out of the box development and production environments with bundling and tree shaking functionality.