CODEWITHSUNDEEP
node.jsangulartypescriptsystemjs
Nico Ul
Nico Ul

Reputation: 127

SystemJS Typescript typing conflict

I'm currently in the process of looking into Angular2, coming from an AngularJS background. In that matter I'm also looking into SystemJS and Typescript.
 
However, I've got an issue getting Angular2 running using Typescript typings and SystemJS. Using Typescript without any typings works as expected, but as soon as I try to load any modules from the Angular2 typing, SystemJS can't seem to resolve it.
From what I've read, the typings are shipped with the angular2.dev.js, so as long as I import that, I should be fine?
 
The error has some similarity with https://github.com/systemjs/systemjs/issues/610, but unfortunately his solutions didn't work for me.

Unfortunately my experience with SystemJS as well as Typescript is null, and I'm just trying to set up a system to learn with. All the libraries are up to date, and have just been installed with npm. The resulting build is hosted by a NodeJS express server, while the Typescript files as well as their typings are not.

The error I'm getting is: 

GET http://localhost:8000/angular2/angular2 404 (Not Found)

Here's a head-extract of my 'index.html': 

<head>
    <script src="assets/js/lib/traceur.js"></script>
    <script src="assets/js/lib/system.src.js"></script>
    <script src="assets/js/lib/Rx.js"></script>
    <script src="assets/js/lib/angular2.dev.js"></script>

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

 

The boot.ts Typescript-file ( I've only added the bootstrap(), so that angular2 actually gets included into the compilation ): 

import { bootstrap } from 'angular2/angular2';
bootstrap();
console.log( 'test' );

and the resulting boot.js after tsc compilation: 

System.register(['angular2/angular2'], function(exports_1) {
    var angular2_1;
    return {
        setters:[
            function (angular2_1_1) {
                angular2_1 = angular2_1_1;
            }],
        execute: function() {
            angular2_1.bootstrap();
            console.log('test');
        }
    }
});

//# sourceMappingURL=boot.js.map

tsdconfig.json:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

Any help appreciated a lot, have yourself some good holidays! :)

Upvotes: 0

Views: 2084

Answers (1)

Pardeep Jain
Pardeep Jain

Reputation: 86740

According to me you have to setup your index.html into particular manner i have found best setup for startup is https://github.com/pkozlowski-opensource/ng2-play/blob/master/index.html.

you can refer to my repo too for project setup/structure here

https://github.com/MrPardeep/Angular2-DatePicker

my index.html is 

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script>
        System.config({
                    defaultJSExtensions: true,
                    map: {
                        rxjs: 'node_modules/rxjs'
                    },
                    packages: {
                        rxjs: {
                        defaultExtension: 'js'
                      }
                    }
                });
    </script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>

<script>
    System.import('dist/bootstrap');
</script>

further for more info i just write down this list for someone else this may help to someone

import {Component, View, Directive, Input, Output, Inject, Injectable, provide} from 'angular2/core'; 

import {bootstrap} from 'angular2/platform/browser';

import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgIf  NgForm, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';

import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router, LocationStrategy, HashLocationStrategy} from 'angular2/router';

import {Http, HTTP_PROVIDERS, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http'

Upvotes: 4

Related Questions