在 Angular 2 应用程序中使用 JavaScript 函数答案

【问题标题】：Use JavaScript function in Angular 2 app在 Angular 2 应用程序中使用 JavaScript 函数
【发布时间】：2016-12-09 23:38:04
【问题描述】：

尝试在 Angular2 服务中使用 JS 函数但获取 require 不是控制台中的函数。我不确定如何包含外部 JS 文件。它与使用它的服务处于同一目录级别。

我相信声明声明是合法的。真的吗？
我不确定如何处理无效的 require 语句。它产生
错误“要求不是函数”

服务文件：analytics.service.ts

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable }     from 'rxjs/Observable';

//how I thought i was supposed to make the JS function available
declare var AlchemyAPI: any;

@Injectable()
export class AnalyticsService {
constructor (private http: Http) {}
getResponse () {
    //not sure how to handle this require. I know that its not allowed 
    though
    var AlchemyAPI = require('./alchemyapi');

    //instance of external JS file function
    var alchemyapi = new AlchemyAPI();
    var myText = "Whoa, AlchemyAPI's Node.js SDK is really great, I can't 
      wait to build my app!";
    return this.http.get(alchemyapi.sentiment("text", myText, {}))
        .map(this.extractData)
        .catch(this.handleError);
}
private extractData(res: Response) {
    let body = res.json();
    console.log(body);
    return body.data || { };
}
private handleError (error: any) {
    let errMsg = (error.message) ? error.message :
        error.status ? `${error.status} - ${error.statusText}` : 'Server    
        error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);

进行远程API调用的外部JS文件：alchemyapi.js（同级目录）

var http = require('http');
var fs = require('fs');

//Make the class available
exports = module.exports = AlchemyAPI;

【问题讨论】：

你确定nodejs的'fs'可以在浏览器中工作吗？ HTTP 定义也不同，因此您可以执行 import * from 'http' 您可能需要重构代码。

标签： javascript angular angular2-services alchemyapi

【解决方案1】：

无需使用require。您可以像使用 @angular 和 rxjs 一样导入它：

import { AlchemyAPI } from './alchemyapi';

现在您可以随意在代码中使用AlchemyAPI。

【讨论】：

【解决方案2】：

您可以在 index.html 的脚本标签中删除 require 并添加 JS 文件。 declare 声明打字稿编译器具有该名称的 var/function 将在运行时可用，因此不会给出编译时错误。

【讨论】：

做到了，它消除了编译时错误，但现在我收到错误 TS2304：找不到名称“AlchemyAPI”。大概来自类实例化。