title: Troubles with importing classes from Angular 2 modules with Typescript 1.7
body: <p>I am having some trouble understanding how to import classes from Modules in TypeScript, specifically for Angular 2 in Visual Studio 2015 (update 1) with TypeScript 1.7.</p>
  
  <p>Everywhere in the Angular 2 documentation I see import statements such as:
  <code>import {Component} from 'angular2/core';</code>. These files are in <code>node_modules/angular2/*</code>. What makes just <code>angular2/*</code> work? </p>
  
  <p>I can only get rid of the errors in Visual Studio when I have a relative path from the app directory such as: <code>./../node_modules/angular2/platform/browser';</code>. This fixes the Visual Studio build errors, but when I try and run the app with <code>System.import('app/boot')</code> I get a bunch of errors like this:</p>
  
  <blockquote>
    <p>system.src.js:1049 GET <a href="http://localhost:8080/node_modules/angular2/platform/browser" rel="nofollow">http://localhost:8080/node_modules/angular2/platform/browser</a> 404 (Not Found)</p>
  </blockquote>
  
  <p>Another issue is being able to use statements such as: <code>import {SearchComponent} from './Components/Search/search.component';</code> in Visual Studio, but then when I run it there are a lot of GET errors at <code>system.src.js:2476</code>.</p>
  
  <p>I thought that setting the <code>defaultExtension: 'js'</code> for <code>System.config</code> should have taken care of that issue.</p>
  
  <p><strong>UPDATE</strong>
  Here are all the files that I think are relevant:</p>
  
  <p><strong>views/home/index.html</strong></p>
  
  <pre><code>&lt;script src="node_modules/es6-shim/es6-shim.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
  System.config({
          packages: {
              app: {
                  format: 'register',
                  defaultExtension: 'js'
              }
          }
      });
  System.import('app/app')
      .then(null, console.error.bind(console));
  </code></pre>
  
  <p><strong>test.csproj</strong></p>
  
  <pre><code>&lt;TypeScriptToolsVersion&gt;1.7&lt;/TypeScriptToolsVersion&gt;
  &lt;TypeScriptExperimentalDecorators&gt;True&lt;/TypeScriptExperimentalDecorators&gt;
  &lt;TypeScriptModuleResolution&gt;Node&lt;/TypeScriptModuleResolution&gt;
  &lt;TypeScriptTarget&gt;ES5&lt;/TypeScriptTarget&gt;
  &lt;TypeScriptJSXEmit&gt;None&lt;/TypeScriptJSXEmit&gt;
  &lt;TypeScriptCompileOnSaveEnabled&gt;True&lt;/TypeScriptCompileOnSaveEnabled&gt;
  &lt;TypeScriptNoImplicitAny&gt;False&lt;/TypeScriptNoImplicitAny&gt;
  &lt;TypeScriptModuleKind&gt;CommonJS&lt;/TypeScriptModuleKind&gt;
  &lt;TypeScriptRemoveComments&gt;False&lt;/TypeScriptRemoveComments&gt;
  &lt;TypeScriptOutFile /&gt;
  &lt;TypeScriptOutDir /&gt;
  &lt;TypeScriptGeneratesDeclarations&gt;False&lt;/TypeScriptGeneratesDeclarations&gt;
  &lt;TypeScriptNoEmitOnError&gt;True&lt;/TypeScriptNoEmitOnError&gt;
  &lt;TypeScriptSourceMap&gt;True&lt;/TypeScriptSourceMap&gt;
  &lt;TypeScriptMapRoot /&gt;
  &lt;TypeScriptSourceRoot /&gt;
  </code></pre>
  
  <p><strong>typings/tsd.d.ts</strong></p>
  
  <pre><code>export * from './../node_modules/angular2/core';
  export * from './../node_modules/angular2/common';
  export * from './../node_modules/angular2/http';
  export * from './../node_modules/angular2/router';
  export * from './../node_modules/angular2/platform/browser';
  </code></pre>
  
  <p><strong>File structure:</strong></p>
  
  <pre><code>app/
      app.ts
      components/
      models/
      services/
  node_modules/ (npm install using Angular 2 quickstart's package.json)
      angular2/ (not all the files listed)
          bundles/ (not all the files listed)
              angular2.dev.js
          platform/
          src/
          ts/
          typings/
          common.d.ts
          core.d.ts
          http.d.ts
          router.d.ts
      es6-module-loader/
      es6-promise/
      es6-shim/
      rxjs/
      systemjs/
      zone.js/
      typescript/ (not sure if this needs to be here)
  </code></pre>
  
  <p>I am unfamiliar with TypeScript, could there be an error caused by different Typescript module systems? Angular 2 recommended System.config be set with <code>format: 'register'</code> but <a href="https://www.npmjs.com/package/angular2" rel="nofollow">https://www.npmjs.com/package/angular2</a> says that the files can be consumed using CommonJs.</p>
  
  <p>With these files, I get these two console errors:</p>
  
  <pre><code>app.ts:1 Uncaught ReferenceError: require is not defined(anonymous function) @ app.ts:1
  angular2-polyfills.js:143 Uncaught TypeError: Cannot read property 'split' of undefined
  </code></pre>