How to configure an application linked to the TypeScript sources of Angular2

68 views
Skip to first unread message

Thierry Templier

unread,
Jan 8, 2016, 4:21:43 AM1/8/16
to AngularJS
Hi all,

First of all, sorry if my question is a silly one!

I would like to contribute implement a patch for a small bug / strange behavior I saw. My problem is that I would like to be comfortable to implement this. I mean having a small project that shows the problem linked with the TypeScript sources of Angular2 and when I update something it's taken into account without having to build the whole framework.

So my question actually is: how to link the TypeScript sources of Angular2 to this application? I'm using the `tsc` module to compile TypeScript files. I did some tries. The TypesScript files of Angular2 are compiled into JavaScript but have some JavaScript errors when loading my test application. The remaining error I have is:

Error: Cannot read property 'resolve' of undefined(…)Promise.reject (async)g @ system.src.js:4597(anonymous function) @ system.src.js:4597y @ system.src.js:4597w @ system.src.js:4597p @ system.src.js:4597h @ system.src.js:4597(anonymous function) @ system.src.js:4597run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305Promise.resolve (async)(anonymous function) @ angular2-polyfills.js:235asap @ angular2-polyfills.js:1232scheduleMicrotask @ angular2-polyfills.js:250(anonymous function) @ angular2-polyfills.js:242lib$es6$promise$$internal$$fulfill @ angular2-polyfills.js:1454lib$es6$promise$$internal$$resolve @ angular2-polyfills.js:1435resolvePromise @ angular2-polyfills.js:1559f @ system.src.js:4597run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111

extensions::uncaught_exception_handler:8 Error in event handler for extension.onRequest: TypeError: Q.updateOutliners is not a function
    at Object.x.Messenger.handlers.globalDataChanged (chrome-extension://pnhplgjpclknigjpccbcnmicgcieojbh/js/content/diigolet.js:312:493)
    at Object.x.Messenger.onMessage (chrome-extension://pnhplgjpclknigjpccbcnmicgcieojbh/js/content/diigolet.js:309:171)
    at chrome-extension://pnhplgjpclknigjpccbcnmicgcieojbh/js/content/diigolet.js:308:74handler @ extensions::uncaught_exception_handler:8exports.handle @ extensions::uncaught_exception_handler:100EventImpl.dispatch_ @ extensions::event_bindings:376EventImpl.dispatch @ extensions::event_bindings:393target.(anonymous function) @ extensions::SafeBuiltins:19publicClass.(anonymous function) @ extensions::utils:94messageListener @ extensions::messaging:179target.(anonymous function) @ extensions::SafeBuiltins:19EventImpl.dispatchToListener @ extensions::event_bindings:387target.(anonymous function) @ extensions::SafeBuiltins:19publicClass.(anonymous function) @ extensions::utils:94EventImpl.dispatch_ @ extensions::event_bindings:371EventImpl.dispatch @ extensions::event_bindings:393target.(anonymous function) @ extensions::SafeBuiltins:19publicClass.(anonymous function) @ extensions::utils:94dispatchOnMessage @ extensions::messaging:310


Here is the content of my `index.html` file:

<!DOCTYPE html>

<html>
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Angular 2 Tests</title>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script>
      System.config({
        packages: {        
          angular2: {
            format: 'register',
            defaultExtension: 'js'
          },
          src: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('src/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>
  <body>
    <test-app>Loading...</test-app>
  </body>
</html>

If someone could give me some hints or link(s) to some docs, it would be awesome. Thanks a lot by advance!

Thierry

Sujith Surendran

unread,
Jan 8, 2016, 4:36:05 AM1/8/16
to AngularJS
Angular.io has quick start tutorial which has section on setting development environment.


If you still face issue, check below 

Hope this helps.

Thierry Templier

unread,
Jan 8, 2016, 5:07:52 AM1/8/16
to AngularJS
Hi Sujith,

Thanks very much for your answer!

In fact, I implemented Angular2 applications yet and I know how to configure my project to use the Angular2 dist.
In this case, I rely on the following JavaScript files and configure my project to use TypeScript for my application source.

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>

What I would like to do is to use the TypeScript sources of Angular2 within my application. So if I update some lines in these
sources, they will automatically be taken into account in my application.

Unless I am mistaken, I think it's something that it's not covered within the quickstart you mentionned...

Otherwise thanks for the link to the project! There are a lot of interesting thing in it that will be helpful for me ;-)

Thierry
Reply all
Reply to author
Forward
0 new messages