使用 CommonJS 模块 Angular 2答案

【问题标题】：Consume CommonJS Module Angular 2使用 CommonJS 模块 Angular 2
【发布时间】：2016-06-23 06:27:56
【问题描述】：

我正在尝试编写一个使用 CommonJS 节点模块 (Node Yelp) 的简单 Angular 2 应用程序。 Angular 2 默认使用SystemJS，它能够加载不同的模块格式。

我尝试了几种不同的 SystemJS 配置和导入语句，但似乎都以

结尾

SyntaxError: Unexpected token

目前，我的 SystemJS 配置看起来像

System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map: {
        yelp: 'node_modules/yelp'
    }
});

System.import('app/main')
    .then(null, console.error.bind(console));

还有我的简单AppComponent.ts

import {Component} from 'angular2/core';
import Yelp from 'yelp';

@Component({
    selector: 'app',
    templateUrl: '/app/app.component.html'
})
export class AppComponent {
    constructor(yelp: Yelp) {
        console.log(yelp);
    }
}

我仍在尝试围绕整个模块系统进行思考，所以我不确定要在这里更改什么。任何在线结果似乎都已过时，或者与使用 SystemJS 加载 CommonJS 节点模块无关。

【问题讨论】：

该错误通常发生是因为如果找不到请求的路径，您的服务器会返回 index.html... 检查 DevTools>Network 并查看 systemjs 正在尝试加载的文件（路径）。
@Sasxa 啊，好电话。似乎 SystemJS 没有正确遍历包。默认情况下它不会获取 index.js，然后当我对其进行硬编码时，它不知道在 node_modules 中查找包依赖项。
试试meta选项，它支持通配符

标签： angularjs typescript angular commonjs systemjs

【解决方案1】：

我认为你可以尝试这样的事情：

System.config({
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    },
    yeld: {
      main: index.js
    }
  },
  map: {
    yelp: 'node_modules/yelp'
  }
});

和

import * as Yelp from 'yelp';

【讨论】：

谢谢，我试过了，它似乎拿起了模块，但在这种情况下似乎无法解决它的任何依赖项、OAuth 和查询字符串。它只是回到查看应用程序的根目录。即使指定了format: 'cjs' 也是如此。
好像找不到路径（404）。背后的“真实”错误：SyntaxError: Unexpected token <(…)。此路径是否可达：node_modules/yelp/index.js？
是的，它加载node_modules/yelp/index.js，然后发现它只是一个容器模块并加载node_modules/yelp/lib/index.js，但随后lib/index.js 具有require 用于OAuth 和querystring SystemJS 似乎无法解决，因为它正在查看应用程序根目录而不是 node_modules/yelp/node_modules/OAuth/index.js 例如。

【解决方案2】：

正如我所料，解决方案很简单。

在 Angular 2 中使用 NPM 包时不要尝试使用自己的 System.config

改为使用jspm 来安装软件包。通过这样做，所有System.config 都将由jspm 处理。在这种特殊情况下，它就像

一样简单

jspm 安装 npm:yelp

然后添加

import Yelp from 'npm:yelp@1.0.1';

到我的AppComponent.ts 文件的顶部

【讨论】：