Подтвердить что ты не робот

Как загрузить RxJS (и zone.js/reflect-metadata) с помощью Angular 2 (бета и новее)

По состоянию на Angular 2 Alpha 54 (changelog), RxJS больше не включается в Angular 2.

Обновление: Оказывается, также исключены zone.js и reflect-metadata.

В результате я теперь получаю следующие ошибки (как показано в консоли Chrome dev):

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)

У меня есть RxJS в моем файле package.json(^ 5.0.0-beta.0), и он был установлен с npm, но проблема в том, что я просто недостаточно знаком с SystemJS at на этот раз, чтобы все получилось. Здесь раздел тела из моего файла index.html:

<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>

Я играю с другими конфигурациями, но никто не довел меня до конца. Я предполагаю, что это относительно просто, это просто мое отсутствие понимания или способ использования инструментов, которые останавливают меня.

Здесь мой файл app.ts, который является app/app, указанным в config SystemS:

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]);

Я обслуживаю приложение с сервером с загрузкой Express, который использует статические сопоставления, так что вызовы типа http://localhost:3000/node_modules/rxjs/Rx.js могут получить необходимый файл, хотя index.html обслуживается от /src в качестве корня сервер и node_modules на самом деле находится на том же уровне, что и src, а не внутри него.

Любая помощь будет, как всегда, оценена.

4b9b3361

Ответ 1

Таким образом, выясняется, что проблему легко устранили, изменив конфигурацию SystemJS следующим образом в файле index.html:

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');

Я действительно пробовал это, но я не понял, что zone.js и reflect-metadata также больше не включены в Angular 2, и я тоже сталкивался с этой проблемой.

Для тех, кого интересует, я легко обошел отсутствие zone.js и reflect-metadata, включив файл angular2-polyfills.js в свой индекс index.html:

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

Теперь мое приложение работает так же, как и с Alpha 53.