Question

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

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

结尾

SyntaxError：意外的标记＆lt;（...）

目前，我的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节点模块无关。

Answer 1

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

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

和

import * as Yelp from 'yelp';

Answer 2

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

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

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

一样简单

jspm install npm：yelp

然后只需添加

import Yelp from 'npm:yelp@1.0.1';

到我的AppComponent.ts文件

的顶部

使用CommonJS模块Angular 2

2 个答案: