3

I have an example of an angular2 application with typescript, but without all the node_modules in my project (like this). The necessary files are embedded in the head of my index.html (as described in example 1 here):

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2.dev.js"></script>

Since I want to pre-compile my typescript-files, I installed node.js and tsc. My editor (PHPStorm 2016.1) automatically compiles the files to assets/js as defined in tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "system",
        "declaration": true,
        "noImplicitAny": false,
        "preserveConstEnums": true,
        "removeComments": true,
        "outDir": "../assets/js",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "emitBOM": true,
        "moduleResolution": "node"
    }
}

The application is loaded with (as described here):

System.config({
    packages: {
        'assets/js': {
            format: 'register',
            defaultExtension: 'js'
        }
    }
});
System.import( 'assets/js/main' ).then( null, console.error.bind( console ) );

On compiling, I always get the (kind of classic) error

error TS2307: Cannot find module 'angular2/core'

PHPStorm tells me that it cannot resolve the imports:

curly underline in editor

even when all the external libraries are loaded:

external libraries in PHPStorm

But after compiling (even with the above errors) the application is working fine in the browser.

Maybe the Typescript Definition (TSD) is missing (link here), but tsd is deprecated. I read about typings install angular --ambient but I am not sure if this is really necessary (and it throws out a bunch of other errors like this).

So my question:

Is this just a side-effect of my setup (without node_modules) which I can ignore, or do I have to install other things?

My environment:

  • node 5.4.1
  • npm 3.3.12
  • tsc 1.8.9
  • Mac OS X 10.11.4
  • PHPStorm 2016.1

I am a little bit lost. Any hints would be greatly appreciated.

1
  • I think module needs to be change from "module": "system", to "module": "commonjs", Commented Apr 1, 2016 at 7:26

1 Answer 1

1

You have the problem since the TypeScript compiler can find the Angular2 .d.ts files. They are provided when installing Angular2 using NPM (see files .d.ts under the folder node_modules/angular2).

When setting the module property within your tsconfig.json file, the compiler will try to find them within the node_modules folder.

You can notice that is an issue when compiling the source code but this code will be however compiled and your application able to run...

There are tools like typings and tsd (deprecated) to install manually such typings but Angular2 isn't present in corresponding registries.

Sign up to request clarification or add additional context in comments.

1 Comment

Thank you for this explanation. Is it correct then that I have to wait until the typings registries are updated accordingly?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.