Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
300 views
in Technique[技术] by (71.8m points)

javascript - How to load RxJS (and zone.js / reflect-metadata) with Angular 2 (beta and newer)?

As of Angular 2 Alpha 54 (changelog), RxJS is no longer included in Angular 2.

Update: Turns out that zone.js and reflect-metadata are also excluded.

As a result, I now get the following errors (as seen in the Chrome dev console):

system.src.js:4681 GET http://localhost:3000/rxjs/Subject 404 (Not Found)F @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681
system.src.js:4681 GET http://localhost:3000/rxjs/observable/fromPromise 404 (Not Found)F @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681
localhost/:1 Uncaught (in promise) Error: XHR error (404 Not Found) loading http://localhost:3000/rxjs/Subject(…)t @ system.src.js:4681g @ system.src.js:4681(anonymous function) @ system.src.js:4681
system.src.js:4681 GET http://localhost:3000/rxjs/operator/toPromise 404 (Not Found)F @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681
system.src.js:4681 GET http://localhost:3000/rxjs/Observable 404 (Not Found)

I have RxJS in my package.json file (^5.0.0-beta.0), and it has been installed with npm, but the issue is I just am not familiar enough with SystemJS at this time to get things running. Here's the body section from my index.html file:

<body>
<app></app> <!-- my main Angular2 tag, which is defined in app/app as referenced below -->

<script src="../node_modules/systemjs/dist/system.js"></script>
<script src="../node_modules/typescript/lib/typescript.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
<script>
    System.config({
        packages: {'app': {defaultExtension: 'js'}}
    });
    System.import('./app/app');
</script>

<script src="http://localhost:35729/livereload.js"></script>
</body>

I have been playing around with other configurations, but none have gotten me all the way there. My guess is that this is relatively simple, it's just my lack of understanding or the way the tools get used that is stopping me.

Here's my app.ts file that is the app/app referred to in the SystemJS config:

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {COMMON_DIRECTIVES} from 'angular2/common';

@Component({
    selector: 'app',
    directives: [],
    template: `<div>{{greeting}}, world!</div>`
})
export class App {
    greeting:string = 'Hello';
}

bootstrap(App, [COMMON_DIRECTIVES]);

I'm serving the app with a livereload Express server that uses static mappings so that calls like http://localhost:3000/node_modules/rxjs/Rx.js are able to get the needed file even though index.html is served from /src as the root of the server and node_modules is actually at the same level as src and not inside it.

Any help would, as always, be appreciated.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

So it turns out that the problem was fixed easily by changing the SystemJS config to the following in my index.html file:

System.config({
    map: {
        rxjs: 'node_modules/rxjs' // added this map section
    },
    packages: {
        'app': {defaultExtension: 'js'},
        'rxjs': {defaultExtension: 'js'} // and added this to packages
    }
});
System.import('app/app');

I had actually tried that, but what I failed to realize was that zone.js and reflect-metadata were also no longer included in Angular 2, and I was running into that problem as well.

For those interested, I got around the lack of zone.js and reflect-metadata most easily by including the angular2-polyfills.js file in my index.html:

<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>

Now my app works just as it did with Alpha 53.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...