Deploy Angular2 on IIS

1. Creating Rewrite Rules for the URL Rewrite Module
   - Link: https://docs.microsoft.com/en-us/iis/extensions/url-rewrite-module/creating-rewrite-rules-for-the-url-rewrite-module
2. Build Angular2 Project
    ng build --prod --aot(option)
3. Config IIS to dist folder
- Copy dist folder to another folder (ex: deploy)
- Add new Website and pointer to this folder (ex: deploy/dist)
- Add web.config file to the root folder to re-write url (ex: deploy/dist)

<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="Angular Routes" 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> </rules> </rewrite> </system.webServer> </configuration>

Result on IIS

ReactJs Webpack Deploy F5 Not Found Router

Issue: 

- Run project with command `npm run  serve` all router working fine.

- After build with command ` npm run build` and deploy to Apache or Xamp or Wamp, only root "/" router working, other route is not found 404 when Reload page or F5 key press.

Solution:

- Create file .htaccess in the root deploy project(after run build)

- Copy all code below to .htaccess file:

RewriteEngine On RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d  RewriteRule ^ - [L]  RewriteRule ^ /index.html [L]

- Restart your server, It's Ok.

Disable scroll of body when scroll to bottom of the child div

PROBLEM
Your body of the web show scroll bar and the child div of body has scroll bar. You want to prevent effect scroll of body when you scroll to the bottom of the child div by mouse wheel.

SOLUTION
Add this lib to the bottom of body: https://rawgit.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js
Origin lib link: https://plugins.jquery.com/mousewheel/

JAVASCRIPT
$(function() {
  $('.container-scroll').bind('mousewheel', function(e, d) {
    var height=$(e.currentTarget).height(),
    scrollHeight= e.currentTarget.scrollHeight;  
    if((this.scrollTop === (scrollHeight - height) && d < 0) || (this.scrollTop === 0 && d > 0)) {
      e.preventDefault();
    }
  });

});