CODEWITHSUNDEEP
node.jsangulartypescript
uruk
uruk

Reputation: 1316

Typescript Compiler Error TS2307: Cannot find module "angular2/core" when loading from CDN without NPM

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:

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

Upvotes: 3

Views: 2644

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202276

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.

Upvotes: 1

Related Questions