title: Angular 2 is not picking index.html as start page from build directory and give error give Status 403 error (Gulp)
body: <p>I am trying to build my first Angular 2 app with Gulp in Visual Studio 2015 and it's an Asp.net 4.5.2 empty project. Project layout --> src and it has app folder and here are my files:</p>
  
  <p>app.component.ts file:</p>
  
  <pre><code>import {Component, OnInit} from "@angular/core";
  
      @Component({
          selector: "app",
          templateUrl: "./app/app.html"
      })
      export class AppComponent implements OnInit {
  
          ngOnInit() {
              console.log("Application component initialized ...");
          }
      }
  </code></pre>
  
  <p>app.html file:</p>
  
  <pre><code>&lt;p&gt;Angular 2 is running ... &lt;/p&gt;
  </code></pre>
  
  <p>main.ts file:</p>
  
  <pre><code>/* Avoid: 'error TS2304: Cannot find name &lt;type&gt;' during compilation */
  ///&lt;reference path="../../typings/index.d.ts"/&gt;
  
  import {bootstrap} from "@angular/platform-browser-dynamic";
  import {AppComponent} from "./app.component";
  
  bootstrap(AppComponent);
  </code></pre>
  
  <p>app.html, app.component.ts and main.ts are in src/app folder.</p>
  
  <p>Here is my gulp.js file  on project root which compiles the typscript files and also pushes nodemodules into lib folder:</p>
  
  <pre><code>const gulp = require("gulp");
  const del = require("del");
  const tsc = require("gulp-typescript");
  const sourcemaps = require('gulp-sourcemaps');
  const tsProject = tsc.createProject("tsconfig.json");
  
  
  /**
   * Remove build directory.
   */
  gulp.task('clean', (cb) =&gt; {
      return del(["build"], cb);
  });
  
  /**
   * Compile TypeScript sources and create sourcemaps in build directory.
   */
  gulp.task("compile", () =&gt; {
      var tsResult = gulp.src("src/**/*.ts")
          .pipe(sourcemaps.init())
          .pipe(tsc(tsProject));
      return tsResult.js
          .pipe(sourcemaps.write("."))
          .pipe(gulp.dest("build"));
  });
  
  /**
   * Copy all resources that are not TypeScript files into build directory.
   */
  gulp.task("resources", () =&gt; {
      return gulp.src(["src/**/*", "!**/*.ts"])
          .pipe(gulp.dest("build"))
  });
  
  /**
   * Copy all required libraries into build directory.
   */
  gulp.task("libs", () =&gt; {
      return gulp.src([
              'core-js/client/shim.min.js',
              'systemjs/dist/system-polyfills.js',
              'systemjs/dist/system.src.js',
              'reflect-metadata/Reflect.js',
              'rxjs/**',
              'zone.js/dist/**',
              '@angular/**'
      ], { cwd: "node_modules/**" }) /* Glob required here. */
          .pipe(gulp.dest("build/lib"));
  });
  
  /**
   * Build the project.
   */
  gulp.task("build", ['compile', 'resources', 'libs'], () =&gt; {
      console.log("Build finished ...")
  });
  </code></pre>
  
  <p>In src folder I have systemjs.config.js and index.html files</p>
  
  <p>systemjs.config.js file where I have map to point build app since I don't want to map it to the files that are in <code>src/app</code>. In the folder <code>build/app</code> which are moved after gulp build task or by building app it picks up from tsconfig.js and move to outDir to build folder:</p>
  
  <pre><code>(function (global) {
  
      // map tells the System loader where to look for things
      var map = {
          'app': '../build/app',
          'rxjs': '../build/lib/rxjs',
          '@angular': '../build/lib/@angular'
      };
  
      // packages tells the System loader how to load when no filename and/or no extension
      var packages = {
          'app': { main: 'main.js', defaultExtension: 'js' },
          'rxjs': { defaultExtension: 'js' }
      };
  
      var packageNames = [
          '@angular/common',
          '@angular/compiler',
          '@angular/core',
          '@angular/http',
          '@angular/platform-browser',
          '@angular/platform-browser-dynamic',
          '@angular/router',
          '@angular/router-deprecated',
          '@angular/testing',
          '@angular/upgrade'
      ];
  
      // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
      packageNames.forEach(function (pkgName) {
          packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
      });
  
      var config = {
          map: map,
          packages: packages
      };
  
      // filterSystemConfig - index.html's chance to modify config before we register it.
      if (global.filterSystemConfig) {
          global.filterSystemConfig(config);
      }
  
      System.config(config);
  
  })(this);
  </code></pre>
  
  <p>My tsconfig.json file in project root:</p>
  
  <pre><code>{
    "compilerOptions": {
       "outDir" : "build/app",
      "target": "es5",
      "module": "system",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "noImplicitAny": false
    },
    "exclude": [
      "node_modules",
      "build"
    ]
  }
  </code></pre>
  
  <p>Above I am excluding node_modules and build directory which compiling ts files and placing them in build/app folder.</p>
  
  <p>My typings.json file in project root folder:</p>
  
  <pre><code>{
    "globalDependencies": {
      "core-js": "registry:dt/core-js#0.0.0+20160602141332"
    }
  }
  </code></pre>
  
  <p>My package.json file in root folder:</p>
  
  <pre><code>{
    "name": "angular2framework",
    "author": "Vijender Reddy",
    "version": "0.1.0",
    "scripts": {
      "postinstall": "typings install",
      "typings": "typings"
    },
    "license": "ISC",
    "dependencies": {
      "@angular/common": "2.0.0-rc.3",
      "@angular/compiler": "2.0.0-rc.3",
      "@angular/core": "2.0.0-rc.3",
      "@angular/forms": "0.1.1",
      "@angular/http": "2.0.0-rc.3",
      "@angular/platform-browser": "2.0.0-rc.3",
      "@angular/platform-browser-dynamic": "2.0.0-rc.3",
      "@angular/router": "3.0.0-alpha.7",
      "@angular/router-deprecated": "2.0.0-rc.2",
      "@angular/upgrade": "2.0.0-rc.3",
      "systemjs": "0.19.27",
      "core-js": "^2.4.0",
      "reflect-metadata": "^0.1.3",
      "rxjs": "5.0.0-beta.6",
      "zone.js": "^0.6.12",
      "angular2-in-memory-web-api": "0.0.12",
      "bootstrap": "^3.3.6"
    },
    "devDependencies": {
      "del": "^2.2.0",
      "gulp": "^3.9.1",
      "gulp-clean": "^0.3.2",
      "gulp-concat": "^2.6.0",
      "gulp-sourcemaps": "^1.6.0",
      "gulp-tsc": "^1.1.5",
      "gulp-typescript": "^2.13.6",
      "path": "^0.12.7",
      "typescript": "^1.8.10",
      "typings": "^1.3.0"
    }
  }
  </code></pre>
  
  <p>My index.html page which is in src folder :</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Angular 2 TypeScript Gulp QuickStart&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;!-- 1. Load libraries --&gt;
      &lt;!-- Polyfill(s) for older browsers --&gt;
      &lt;script src="../build/lib/core-js/client/shim.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="../build/lib/zone.js/dist/zone.js"&gt;&lt;/script&gt;
      &lt;script src="../build/lib/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
      &lt;script src="../build/lib/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
  
      &lt;!-- 2. Configure SystemJS --&gt;
      &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          System.import('app')
                  .then(null, console.error.bind(console));
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;!-- 3. Display the application --&gt;
  &lt;body&gt;
      &lt;app&gt;Loading...&lt;/app&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I am pointing rsjx and zone.js from build directory which is created from gulp build task not from node_modules.</p>
  
  <p>When I run my application it should pick index.html file by default but it doesn't pick it up and I get error:</p>
  
  <blockquote>
    <p>(Forbidden) <a href="http://localhost:34756/" rel="nofollow noreferrer">http://localhost:34756/</a> Failed to load resource: the server responded with a status of 403 (Forbidden)</p>
  </blockquote>
  
  <p>However when I am running the application when I am in index.html page, I can run the app but the url path is : <a href="http://localhost:57722/src/index.html" rel="nofollow noreferrer">http://localhost:57722/src/index.html</a></p>
  
  <p>It is src/index.html, which I don't want. I want to pickup index.html as default and the url <a href="http://localhost:57722" rel="nofollow noreferrer">http://localhost:57722</a> should work even if I am on any file in project not just on index.html. It should automatically pick from build directory which is create by gulp build task.</p>