Troubles with importing classes from Angular 2 modules with Typescript 1.7

Question

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.

Answer 1

I had to make a couple edits to the 5 minute quickstart to get it working with MAMP.

You've got to tell SystemJS where to find your custom modules, but you can't set baseURL to do it. Setting baseURL seems to mess up module resolution for the node modules(like angular). Add this to your systemjs config instead:

map: {
    app: 'path/to/app/folder'
},

But don't change the angular import statements. Those aren't paths, they're module names and systemjs should resolve them just fine if you've included angular2.dev.js in a head script tag, as you have.

You also may have to include:

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

at the top of your app.ts(or wherever you call bootstrap)

Answer 2

"I resolved this problem but I still have the "Uncaught ReferenceError: require is not defined " problem."

systemjs can be configured to use require format:

System.config({
  packages: {
    app: {   // must be replaced 
      format: 'amd'
    }
  }
});

but if it is in your own code typescript compiler output can be set in tsconfig:

{
  "compilerOptions": {
    ...
    "module": "system"
    ... 
  }
}

in your visual studio configuration file it might means:

<TypeScriptModuleKind>system</TypeScriptModuleKind>

Answer 3

The little red squiggly lines are probably because of your tsconfig.json. At least that is what caused the problem for me. The problem I had was I was using both files[] and excludes[]. This doesn't work as expected and is not a valid config.

I resolved this problem but I still have the "Uncaught ReferenceError: require is not defined " problem.

Answer 4

The following worked for me.

System.config({    
          transpiler: 'typescript', 
          typescriptOptions: { emitDecoratorMetadata: true }, 
          packages: {       
          app: {
              defaultExtension: 'ts'
          }
        }
      });

I also included the typescript int the header

<script src="https://code.angularjs.org/tools/typescript.js"></script>

Answer 5

How does your HTML file load the Angular 2 library? It should be as simple as

<script src="path/to/my/libs/angular2.dev.js"></script>

You'll notice that file contains the entirety of the built/concatenated Angular 2 library. You shouldn't point your web page at the raw source files.

SystemJS knows what angular2/core means because the built library defines what that pattern means. Although it appears to be some directory structure (which it probably is in the unbuilt library) it's actually just some name for a module the built library. Search for this text in the built library and you'll see it defined:

System.register("angular2/core", ...