在浏览器中使用常规JS中的Angular 2服务

我有一个Angular 2服务，这意味着一些组件正在使用一个typescript类，它通过http从web服务获取数据。 ng服务使用Angular的http、rxjs observable和observable操作符。 我需要在一个完全不同的应用程序中重新使用这个ng服务，它是vanilla JS（没有角度，没有类型脚本）

是否可以只编译ng服务及其依赖项（http、rxjs）并将其打包成独立的自给自足的JavaScript模块，以便在浏览器中使用？

您仍然可以使用现代JavaScript。使用

ECMAScript 6

模块化HTTP请求示例（在整个应用程序中易于重用）：

导出默认对象=>{
返回新承诺（（解决、拒绝）=>{
设xhr=newXMLHttpRequest（）；
xhr.open（obj.method | |“GET”，obj.url）；
if（对象标题）{
Object.keys（obj.headers）.forEach（key=>{
xhr.setRequestHeader（key，obj.headers[key]）；
});
}
xhr.onload=（）=>{
如果（xhr.status>=200&&xhr.status<300）{
解析（xhr.response）；
}否则{
拒绝（xhr.statusText）；
}
};
xhr.onerror=（）=>拒绝（xhr.statusText）；
xhr.send（对象体）；
});
};

更新1:

在ECMAScript 6（JavaScript）中构建等效于Angular2 http服务的有用文档：

您仍然可以使用现代JavaScript。使用

ECMAScript 6

模块化HTTP请求示例（在整个应用程序中易于重用）：

导出默认对象=>{
返回新承诺（（解决、拒绝）=>{
设xhr=newXMLHttpRequest（）；
xhr.open（obj.method | |“GET”，obj.url）；
if（对象标题）{
Object.keys（obj.headers）.forEach（key=>{
xhr.setRequestHeader（key，obj.headers[key]）；
});
}
xhr.onload=（）=>{
如果（xhr.status>=200&&xhr.status<300）{
解析（xhr.response）；
}否则{
拒绝（xhr.statusText）；
}
};
xhr.onerror=（）=>拒绝（xhr.statusText）；
xhr.send（对象体）；
});
};

更新1:
在ECMAScript 6（JavaScript）中构建等效于Angular2 http服务的有用文档：
---

我看不出有任何原因说明它可能不起作用。我该怎么做？我是否只是获取service.ts文件的JS输出并尝试在Angular上下文之外使用它？这肯定不起作用，因为它依赖于角度的东西，问题是我还需要什么其他角度的东西，如果有一种简单的方法来打包它的话，如果你使用的是模块，你已经通过检查导入知道你需要什么了。你的服务使用依赖注入吗？是的。我只注入@angular/http，但也使用其他模块，如rxjs和一些模型类。我知道我的服务依赖于什么，但我不知道如何在没有Angular应用程序其余部分的情况下引导我的服务（并且不需要Angular作为依赖项）如何引导我的服务-引导是什么意思？此外，如果你的其他应用程序没有实现DI，你可以使用DI。您可以导入

@angular/http

并在classI中自己实例化它。我看不出它可能不起作用的任何原因。我该怎么做？我是否只是获取service.ts文件的JS输出并尝试在Angular上下文之外使用它？这肯定不起作用，因为它依赖于角度的东西，问题是我还需要什么其他角度的东西，如果有一种简单的方法来打包它的话，如果你使用的是模块，你已经通过检查导入知道你需要什么了。你的服务使用依赖注入吗？是的。我只注入@angular/http，但也使用其他模块，如rxjs和一些模型类。我知道我的服务依赖于什么，但我不知道如何在没有Angular应用程序其余部分的情况下引导我的服务（并且不需要Angular作为依赖项）如何引导我的服务-引导是什么意思？此外，如果你的其他应用程序没有实现DI，你可以使用DI。您可以导入

@angular/http

并在classIs中自己实例化它这是在angular应用程序中使用JS的示例吗？因为我的场景正好相反（在JS应用程序中使用TS\NG服务）@itaysk这是一个使用ECMAScript 6（JavaScript）将HTTP请求构建为模块的示例。没有角的悬念。我以为这就是你问的…我不确定我是否理解这个解决方案。您是否建议使用此实现替换ng服务中的@angular/http？或者你是想用它而不是重用我现有的ng服务？@itaysk我是想用它（以及我在更新中提供的有用链接中找到的解决方案）而不是服务。基本上与基本的NG/TS http服务相同，但它完全是JavaScript。我会采取这种方法，而不是适应，只是创造它。如果你意识到这一点，它是非常非常相似的。@itaysk如果你检查这些链接（在我看来解释得很好），你会发现一些例子。复制它们，你就完成了：没有角度，没有字体。使用模块化方法，只需声明一次http服务并在整个应用程序中重用它，就像Angular服务的行为一样。这是Angular应用程序中使用JS的示例吗？因为我的场景正好相反（在JS应用程序中使用TS\NG服务）@itaysk这是一个使用ECMAScript 6（JavaScript）将HTTP请求构建为模块的示例。没有角的悬念。我以为这就是你问的…我不确定我是否理解这个解决方案。您是否建议使用此实现替换ng服务中的@angular/http？或者你是想使用它而不是重用我现有的ng服务？@itaysk我是想使用它（以及你找到的有用链接的解决方案）

export default obj => {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open(obj.method || "GET", obj.url);
        if (obj.headers) {
            Object.keys(obj.headers).forEach(key => {
                xhr.setRequestHeader(key, obj.headers[key]);
            });
        }
        xhr.onload = () => {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.response);
            } else {
                reject(xhr.statusText);
            }
        };
        xhr.onerror = () => reject(xhr.statusText);
        xhr.send(obj.body);
    });
};