Consume CommonJS模块Angular 2

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

我已经尝试了几种不同的SystemJS配置和import语句，但他们都似乎与

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

我仍然试图包裹我的hea d围绕整个模块系统，所以我不确定要在这里更改什么。网上的任何结果似乎都过时了，或者与使用SystemJS加载CommonJS节点模块没有直接关系。

来源

2016-03-09 Barry Tormey

该错误通常是因为如果您的请求，服务器返回的index.html找不到路径...检查DevTools> Network并查看systemjs正在尝试加载的文件（路径）。 – Sasxa

@Sasxa啊，很好的电话。看来SystemJS没有正确地遍历包。它没有默认选择index.js，然后当我对它进行硬编码时，它不知道要在node_modules中查找包依赖关系。 –

试用['meta']（https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#meta）选项，它支持通配符 – Sasxa

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

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

和

import * as Yelp from 'yelp';

来源

2016-03-09 06:54:28

谢谢，我已经试过了，它似乎拿起模块，但似乎无法解决任何它的依赖关系，OAuth和查询字符串在这种情况下。它只是回头看看应用程序的根源。这甚至与格式：'cjs''指定。 –

似乎找不到路径（404）。后面的“true”错误：'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'，因此无法解析SystemJS。 –

的解决方案，如我所料，原来是轻松的一年。

不要滚你在角2

使用NPM包相反，使用jspm安装包时，自己的System.config。通过这样做，所有System.config将由jspm负责。在这种特殊情况下，它是那么容易，因为

jspm install npm:yelp

然后只需添加

import Yelp from 'npm:[email protected]';

我AppComponent.ts文件的顶部

来源

2016-03-10 02:04:44

Consume CommonJS模块Angular 2

回答

相关问题