Angular2 import modules Error: TS2307

Question

I am going to write a simple hello word app with angular2 and systemjs to import module in phpStorm.

Here is the directory of my project:

ProjectName
     |--app
        |--app.ts
        |--app.js
     |node_modules
     |index.html
     |package.json
     |tsconfig.json

Here is a piece of code:

import { bootstrap } from "angular2/platform/browser";
import { Component } from "angular2/core";

Question:
How does it know where to find this file? When I moved node_modules to app folder, there comes error.

score 0 · Answer 1 · answered Feb 09 '16 at 03:14

It's a little confusing: angular2/platform/browser and angular2/core are the names of modules, not the names of files. These modules loaded from the main Angular2 script, which could be node_modules/angular2/angular2.min.js or node_modules/angular2/angular2.dev.js.

If your code can access angular2.js, you can import many different Angular modules.

score 0 · Answer 2 · edited May 23 '17 at 12:25

Here angular2/core or angular2/platform/browser etc is not a path but a predefined systemjs bundle for angular. if you look at the source code of angular bundal you can see there's

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

and that tells systemjs what to do. You can find more here... for the same we have already imported system.js before our angular in the index.html.

https://stackoverflow.com/a/34804834/5043867 List of imports for angular2

actuly system.js is a module loader there are variety of module loader are there but i have used system.js module loader like commonJs, systemJs etc.

both loader load the module in their own way like for example we took a code

 import {Component} from 'angular2/core';

this piece of code load by the commonJs in es6 like this

var core_1 = require('angular2/core'); ...

and systemJs bind this module like this:

System.register(['angular2/core'], function(exports_1) { ...

both the loader are good but quickstart uses SystemJS.

Angular2 import modules Error: TS2307

2 Answers2