Using newer system.js with Angular 2?

[Vern Jensen]

I'm wondering what I need to do to use the latest version of system.js with an Angular 2 application (I'm currently using alpha 35).

In the Angular 2 Quickstart page, they use this line:

<script src="https://jspm.io/sys...@0.16.js"></script>

 

If I change that to use the latest system.js (and also include the latest traceur.js and rx.js), I get these errors:

Failed to load resource: the server responded with a status of 404 (Not Found)

http://localhost:50924/pages/study Failed to load resource: the server responded with a status of 404 (Not Found)

http://localhost:50924/pages/report Failed to load resource: the server responded with a status of 404 (Not Found)

http://localhost:50924/pages/home Failed to load resource: the server responded with a status of 404 (Not Found)

http://localhost:50924/pages/prefs Failed to load resource: the server responded with a status of 404 (Not Found)

From my app.ts:

import { Component, View, bootstrap, bind } from 'angular2/angular2';
import { RouteConfig, RouterLink, RouterOutlet, routerInjectables, LocationStrategy, HashLocationStrategy } from 'angular2/router';


    // Pages
import { Home } from "./pages/home"
import { UserPreferences } from "./pages/prefs"
import { Study } from "./pages/study"       // We don't have to specify the .js extension
import { Report } from "./pages/report"


    // Directives
import { Multiselect } from "./directives/multiselect"
import { Polarmap } from "./directives/polarmap"


 // Dialogs
//import { EditAllControlsDlg } from "./dialogs/editAllControlsDlg"
//import { EditControlDlg } from "./dialogs/editControlDlg"


@Component({ selector: 'csreport' })        // This component is injected into <csreport></csreport> tags in HTML
@View({
    templateUrl: 'navbar.html',
    directives: [RouterLink, RouterOutlet]
})   // View: defines HTML that represents the component


   
@RouteConfig([
    { path: '/', redirectTo: '/home' },
    { path: '/study/:id', as: 'study', component: Study },
 { path: '/report', as: 'report', component: Report },
    { path: '/home', as: 'home', component: Home },
    { path: '/prefs', as: 'prefs', component: UserPreferences }
])

It *appears* that the issue is related to the @RouteConfig, since the console errors listed above are the same as everything I have in my @RouteConfig setup at the bottom there.

Any idea why changing from sys...@0.16.11.js to the latest system.js would trigger this error?

            

            <!-- Upgraded system.js to 0.19.4 on 10/14/2015. https://github.com/systemjs/systemjs -->
           <!--    <script src="3rdParty/Utils/sys...@0.16.11.js"></script>-->
           <script src="3rdParty/Utils/rx.js"></script>
            <script src="3rdParty/Utils/traceur.js"></script>
            <script src="3rdParty/Utils/system.js"></script>

My hunch is this may be due to using router.js from Angular Alpha 35... and maybe that's incompatible with the latest system.js?

If that's the case, could someone point me in the right direction to get a minified "everything that's required" latest-source Angular 2 setup up-and-running, where all files are local to my machine? (no external references that require a network connection... that's a requirement for the project I'm working on)

-Vern

[Eric Martinez]

Vern,

documentation is being rewrritten, most of it, if not all, is obsolete, deprecated. I recommend you strongly to move on to the latest alpha version (alpha 42)

 At alpha 42 there are some points to consider :

- Traceur was removed, you don't need it anymore.

- Systemjs was upgraded to 0.18.x (this was prior to alpha 42, but still)

See this configuration file from pkozwloski : https://github.com/pkozlowski-opensource/ng2-play/blob/master/index.html

That's all the configuration you need!

Note : this line is important

System.config({defaultJSExtensions: true});

I'm pretty sure that line would solve the issue you have right now.

Check the changelog from alpha 35 there have been a lot of breaking changes https://github.com/angular/angular/blob/master/CHANGELOG.md#200-alpha35-2015-08-19

Trying to sum up what you need so far :

- @View is now optional, you won't have issues there, just in case you want to save a few keystrokes...

- bind was renamed to provide

- routerInjectables was renamed to ROUTER_BINDINGS, and ROUTER_BINDINGS was renamed to ROUTER_PROVIDERS

- In your RouteConfig, the "as" is written with PascalCase now, so if you have

{ path: '/study/:id', as: 'study', component: Study },

Now it should be

{ path: '/study/:id', as: 'Study', component: Study },

Note the uppercase in 'as: Study' (in future releases 'as' will be renamed to 'name'). This will also affect your router-links. 

Again, if your router-link looks like 

[router-link]="[/study]"

It should now look like

[router-link]="[/Study"]

That's what I can see in your code to jump from a35 to a42. My recommendation is always stick to the last alpha release, so you don't have to make too many breaking changes in your projects. There's not point in stick to something that is changing constantly and is being deprecated and unsupported (if you go to their github repo and ask for help with alpha35 all of the answers will be : "we are in a42, upgrade.")

Regards

PS : Sorry for the messy answer :P

[Vern Jensen]

Thanks Eric!

My question, then, is how do you properly use the latest alpha? I use TypeScript, which requires a .d.ts file for Angular. I currently use the ones provided by DefinitelyTyped. They are always behind the current release though. The currently have a definition file for alpha 39.

With the latest Angular release, it comes with .d.ts file for Angular, but that file requires that you use the Angular 'raw' source code (spread over dozens of files, not minified). Is that the 'proper' way to use it then, to be on the latest release? I've not tried using Angular directly from the repository's source, but maybe that's what I should be doing, instead of using DefinitelyTyped's .d.ts files.Thoughts?

[Vern Jensen]

Hmm, so I tried pkozwloski's project and did the steps on that page (npm and gulp). I only get "Loading..." in the browser with these console errors:

Error: Array.from is not a function

Error loading http://localhost:9000/dist/hello.js

    at http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:3:8514

    at Function.e.values (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:3:9076)

[SNIP]

http://localhost:9000/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)

I tried switching to angular2.dev.js to hopefully get better errors, and now instead get this:

angular2.dev.js:138 Error: m.values is not a function

Error loading http://localhost:9000/dist/hello.js

    at createArrayFromMap (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:4050:43)

    at Function.MapWrapper.values (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:4096:14)

    at _createListOfProviders (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:20422:36)

    at Object.resolveProviders (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:20401:22)

    at Function.Injector.resolve (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:22503:25)

    at Function.Injector.resolveAndCreate (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:22506:40)

    at Object.platformCommon (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:19891:48)

    at platform (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:26538:30)

    at Object.commonBootstrap (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:26549:13)

    at Object.bootstrap (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:27379:33)

Don't really know where to go from here.

-Vern

[Vern Jensen]

(To clarify, this is for pkozwloski's Hello World project, downloaded as-is, and using Angular Alpha 42 and other dependencies as specified in his project. )

[Eric Martinez]

Vern,

Regarding your comment about TypeScript I couldn't really tell you, I would be lying. I use it too, but I use another IDE, not VSCode, so I really care about the code being transpiled not the typing. So I'm kinda lost in that regard. I know you can get the last typings from doing npm install angular2@latest under the path node_modules/angular2/bundles/typings/angular2

and that's pretty much all I know about typings (I would see this comment too https://github.com/angular/angular/issues/4026#issuecomment-147104405 and this https://github.com/alexeagle/angular2-distro/blob/master/README.md)

With the latest Angular release, it comes with .d.ts file for Angular, but that file requires that you use the Angular 'raw' source code (spread over dozens of files, not minified).

I didn't really understand that. What do you mean by the entire sentence? Lol..

 

And regarding the error you're seeing see this comment https://github.com/angular/angular/issues/4754#issuecomment-148320793

 

[Eric Martinez]

Just wanted to tell you that docs has been updated to a42 with a LOT of improvements, a LOT.

https://angular.io/docs/ts/latest/quickstart.html

They released today a44, with a few bug fixes.

[Pawel Kozlowski]

On Fri, Oct 16, 2015 at 12:04 AM, Vern Jensen <raging...@gmail.com> wrote:
> Hmm, so I tried pkozwloski's project and did the steps on that page (npm and
> gulp). I only get "Loading..." in the browser with these console errors:
>
> Error: Array.from is not a function

Vern, if you are using a pre-ES6 browser you need to have shims for
ES6 APIs, including Array.from.
Out of curiosity - what was the browser (and version) that you were using?

In any case I've just pushed commits to add a shim. You might want to
pull + do npm install.

Cheers,
Pawel


--
AngularJS book:
http://www.packtpub.com/angularjs-web-application-development/book
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/

[Vern Jensen]

Thanks again Eric! Switching to es6-shim did fix that Array.from error.

Don't worry about my other question that was confusing... I'll look into some of those links you posted and see where I get.

[Vern Jensen]

Pawel -- I'm using Chrome Version 43.0.2357.134 m

 Ultimately the project I'm doing will be embedded inside a C++ project that uses QtWebKit to run everything. I'm sure the version of WebKit Qt 5 uses is a bit older than what's currently in Chrome.

[Vern Jensen]

Eric -- that's GREAT news that the docs have been updated! I hope they have examples that demonstrate how to use Router with the latest alpha release. :-) Heading over there now...