title: Angular2 redirecting to root folder
body: <p><br><br>
  I am new to Angular 2 and trying to create my first application. I am following  <a href="https://www.barbarianmeetscoding.com/blog/2016/03/25/getting-started-with-angular-2-step-by-step-1-your-first-component/" rel="nofollow noreferrer">this</a> tutorial to develop first application. I created application as suggested and my main files are:<br><br>
  <strong>systemjs.config.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function (global) {
    System.config({
      paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
      },
      // map tells the System loader where to look for things
      map: {
        // our app is within the app folder
        app: 'app',
  
        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  
        // other libraries
        'rxjs':                       'npm:rxjs',
        'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
      },
      // packages tells the System loader how to load when no filename and/or no extension
      packages: {
        app: {
          main: './main.ts',
          defaultExtension: 'ts'
        },
        rxjs: {
          defaultExtension: 'js'
        },
        'angular2-in-memory-web-api': {
          main: './index.js',
          defaultExtension: 'js'
        }
      }
    });
  })(this);</code></pre>
  </div>
  </div>
  </p>
  
  <p><br>
  <strong>main.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  
  import { AppModule } from './app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule);</code></pre>
  </div>
  </div>
  </p>
  
  <p><br>
  <strong>app.module.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  
  import { AppComponent }  from './app.component';
  
  @NgModule({
    imports: [ BrowserModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
  })
  export class AppModule { }</code></pre>
  </div>
  </div>
  </p>
  
  <p><br>
  <strong>app.component.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'my-app',
      template: '&lt;h1&gt;My First Angular 2 App&lt;/h1&gt;'
  })
  export class AppComponent { }</code></pre>
  </div>
  </div>
  </p>
  
  <p><br>
  And I am initializing angular from following code in index.html<br></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
  
      &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
      
      &lt;script&gt;
        // import the 'app' module to boostrap the application
        System.import('app')
              .catch(function(err){ console.error(err); });
      &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><br>
  My project folder name is myangular. So, My request is <a href="http://localhost/myangular/index.html" rel="nofollow noreferrer">http://localhost/myangular/index.html</a>
  <br><br>
  <strong>Problem</strong></p>
  
  <blockquote>
    <p>As you can see in below image, Third request moved to root of localhost(Apache server). Here dashboard of default page of Apache. This result in error.</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/0INIx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0INIx.png" alt="enter image description here"></a></p>
  
  <p><br>
  Please help me where I am missing configuration.<br>
  Thanks in advance.</p>