Articles of systemjs

Angular 2和systemjs不加载

我对networking编程很陌生。 试图通过“平均networking开发”第二版书的例子。 直到Angular被引入之后,它才开始出现。 我试图运行本书第7章中的一个例子,我在浏览器中看到的唯一一个是“加载…”我可以看到它抱怨: 这里是index.ejs文件: <!DOCTYPE html> <html> <head> <title><%= title %></title> <base href="/"> </head> <body> <mean-app> <h1>Loading…</h1> </mean-app> <script type="text/javascript"> window.user = <%- user || 'null' %>; </script> <script src="lib/core-js/client/shim.min.js"></script> <script src="lib/zone.js/dist/zone.js"></script> <script src="lib/reflect-metadata/Reflect.js"></script> <script src="lib/systemjs/dist/system.js"></script> <script src="./systemjs.config.js"></script> <script> System.import('app').catch(function(err) { console.error(err); }); </script> </body> </html> 和systemjs.config.js文件: (function(global) { var packages = { app: […]

System.importasynchronous模块加载冲突与脚本标记同步加载

我开始使用primefaces/电子的JSPM来移植我用Marionette构build的网站。 我有我所有的应用程序写的木偶模块,所以我想在启动应用程序之前加载所有JavasSript文件。 <script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script> loadApp = System.import('./scripts/app_definition').then(function(m){ window.App = m['App']; }); </script> <!– inject:js –> ##LOTS INJECTED SCRIPTS THAT NEEDS window.App to be defined## <script src="compiled/modules/video/video_app.js"></script> <!– endinject –> <script type="text/javascript"> loadApp.then(function(){ App.start(); }) </script> 我遇到了System.import()的asynchronous性质问题。 在System.import加载完App代码后,你将如何加载脚本? 对于生产我没有问题,因为我会连接在一个单一的JS模块中的所有文件,并加载该模块使用System.import,但这将是一个噩梦debugging,我宁愿有文件加载单独。 有什么想法吗? 谢谢!

有关脚本与npm / gulp集成的解释

我正尝试使用TypeScript,NPM和gulp与Visual Studio 2015一起安装Angular2快速入门指南的工作项目。 (Angular2 2.0.0-rc.3,TypeScript 1.8.10,npm 3.6.0和gulp 3.9.1) 根据互联网上的指南,有一些我不是很了解,有一个解释将是非常有帮助的。 NPM允许我们获得我们需要加载到我们的应用程序的最新模块。 这意味着我需要安装与package.json文件的依赖关系如下: "dependencies": { "@angular/common": "2.0.0-rc.3", … "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.6", "systemjs": "0.19.27", "zone.js": "^0.6.12" }, … 一旦安装,我需要使用gulp将这些文件放到我的根文件夹(wwwroot)中,这非常合理。 之后,我需要根据我的应用程序需要configurationsystemJS,以便知道从何处获取要加载的文件。 然后,在快速入门之后,我需要设置脚本来导入我的index.html文件。 我不明白为什么我们手动导入这3个脚本,而我们可以在systemJSconfiguration文件中设置它们? (我在谈论这些: node_modules /核心JS /客户/ shim.min.js node_modules /反映元数据/ Reflect.js node_modules / zone.js / DIST / zone.js ) 只是因为这是一个样本项目,所以这样做很好,还是有更好的理由呢? 我认为这只是因为我们需要这些单个文件,而像@angular这样的软件包包含很多使用systemJS更容易pipe理的文件? 我知道这意味着我对这个主题知之甚less,任何帮助都会很好。 我读过这个链接( https://angular.io/guide/quickstart ),这帮了我一些,但我想我错过了那里的东西… 谢谢, 亚历克斯

推迟与巴贝尔import

我正在一个基于ReactJS的大型网站上工作,需要编写一些testing,我可以推迟加载各种模块,因为我需要先build立Sinon。 基本设置看起来像这样 const assert = require('chai').assert; const sinon = require('sinon'); const reducerUtils = require('../../app/utils/reducerUtils'); const connectToReducerStub = sinon.stub( reducerUtils, 'connectToReducer', (stateMap, actionMap) => { console.log(`Connecting to reducer`); } ); 在这一点上,我只需要导入一个组件,试图使用reducerUtils.connectToReducer我已经reducerUtils.connectToReducer ,但我的问题是,如果我喜欢在其他地方的代码库: import MyComponent from '../../app/components/myComponent.jsx'; 导入是作为第一件事(在所有其他事情之前)运行,使得导入和调用reducerUtils.connectToReducer发生之前,我把它存根。 另一方面,试图通过使用require来推迟它似乎不起作用: const MyComponent = require('../../app/components/myComponent.jsx'); 这里发生的是MyComponent只是undefined 。 我正在使用ES6类来定义我的组件: import react from 'react'; import connectToReducer from '../../utils/reducerUtils'; class MyComponent { […]

运行用TypeScript编写的Jasminetesting

我有一个TypeScript + Node + Angular2 + Electron应用程序,目前正在尝试运行节点类的testing,也写在Typescript中。 为了构build应用程序并在电子内运行,我使用下面的tsconfig: "compilerOptions": { "module": "system", "target": "es6", … } 正如你所看到的,它使用了systemjs并将TS编译成JS-es6。 它工作正常,应用程序本身正在工作。 现在我需要茉莉花来join 我安装了这个npm包,更新了我的gulp任务,运行gulp-jasmine只有一个文件: gulp.task('jasmine', function() { gulp.src('./test/test.js') .pipe(jasmine()) }); 这是我的test.js的样子: System.register(["./models-src/app/models/pathWatch/pathWatch"], function(exports_1, context_1) { "use strict"; var __moduleName = context_1 && context_1.id; var pathWatch_1; return { setters:[ function (pathWatch_1_1) { pathWatch_1 = pathWatch_1_1; }], execute: function() { describe("Run […]

如何正确使用System.import()?

我在我的项目中使用jspm 。 但是我需要服务器端的nodejs文件来执行一些指令。 例如,我需要使用lodash并在https://github.com/systemjs/systemjs中find指南 var System = require('jspm').Loader(); System.import('lodash').then(function (_) { console.log(_); }); 不过,我想在全球范围内使用lodash。 就像 var _ = System.import('lodash'); var myArr = _.map([1, 2, 3], function(n) { return n * 3; }); 它会显示 TypeError:_.map不是Object的函数。 (/ usr / local / lib / node_modules / babel / node_modules / babel)在Module._compile(module.js:435:26)处调用(/Users/joyfeel/javascript/jspm-test/index.js:49:16) (匿名函数)[as .js](/ usr / local / lib […]

tsconfig compilerOptions“module”:“system”not working

在angular2 5分钟的教程中,他们使用“system”作为tsconfig中的模块。 我有systemjs作为node_module,但是当试图启动我的服务器时,我得到的System is not defined ,从编译js文件,看起来像这样的第一行: System.register(['http', 'express', './config/index', 'path'], function(exports_1) { 为什么System未定义,即使我把它作为一个节点的依赖? 我试图改变它commonjs,然后编译的js看起来更简单。 但是,然后我在angular度应用程序中得到错误。 我为了与SystemJs一起工作而错过了什么? 编辑 我想我解释我的问题是不好的。 从导入模块更改为我的server.ts文件“JavaScript风格”( var http = require('http'); )我猜“打字稿样式”( import * as http from 'http'; ) import * as http from 'http';我开始得到错误上面指定。 当做它的JavaScript风格编译js看起来就像ts( var http = require('http'); )然而,当它做“打字稿风格”它被编译与模块导入使用系统(指定的代码行以上)。 所以当我试图启动节点服务器而不是在浏览器中出现这个错误。 我尝试更改编译选项“模块”为“commonjs”而不是“系统”在tsconfig.json,这样做会导致浏览器错误 ( 这个错误 ,只有解决scheme似乎不适合)一些奇怪的原因,所以我想我会尝试与“系统”。 但后来我遇到了没有定义System的问题。 那么在启动节点服务器时如何访问系统呢?

未捕获的SyntaxError:意外的标记<VM105:17未引用错误:系统未定义

我正在从nodejs服务器提供我的index.html。 这个ng2文件适用于现场服务器。 但是当我从具有特定路由的nodejs index.js加载它时,会出现以下错误。 Uncaught SyntaxError: Unexpected token < VM105:17Uncaught ReferenceError: System is not defined 我已经加载了正确的文件。 这里是加载的文件: <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.min.js"></script> <script src="node_modules/angular2/bundles/angular2.min.js"></script> <script src="node_modules/angular2/bundles/router.js"></script> <script src="node_modules/angular2/bundles/http.js"></script> <!– 2. Configure SystemJS and Import –> <script> System.config({ packages: { client: { format: 'register', defaultExtension: 'js' } } }); System.import('client/boot') .then(null, […]

用System.js导入Angular 2应用程序中的visionmedia debug以及如何logging消息?

我正在与Angular 2前端开发一个MEAN栈应用程序。 我已经成功地在快速应用程序中使用debug 。 但是我无法干净地导入debuggingapp.components.ts或main.module.ts 。 任何想法如何进行? <script src="/node_modules/debug/debug.js"></script>结果出错: Uncaught ReferenceError: module is not defined <script>System.import('./node_modules/debug/debug.js');</script>不好: zone.js:101 GET http://localhost:8002/ms.js 404 (Not Found)一些依赖脚本无法加载。 import { debug } from '../../../node_modules/debug/debug.js'; 里面的任何应用程序文件也给出错误: zone.js:101 GET http://localhost:8002/ms.js 404 (Not Found); (index):25 Error: Error: XHR error (404 Not Found) loading http://localhost:8002/ms.js(…) zone.js:101 GET http://localhost:8002/ms.js 404 (Not Found); (index):25 Error: Error: XHR […]

如何告诉systemjs忽略导入

这是为了systemjs库,而不是systemjs-builder 我可能在这里有一个边缘案例。 但我试图设置我的前端Web应用程序运行在命令行中的unit testing。 我的安装程序目前将打字稿制作成systemjs寄存器格式,并按照其规格将加载文件导入到网站中。 我目前面临的问题是,我的依赖项之一reflect-metadata有一个节点自动检测系统,使得一个require('crypto')调用,这是一个本地节点模块(npm中不可用)。 我收到的错误是: 错误:ENOENT:没有这样的文件或目录,打开'/Users/path/to/project/node_modules/crypto.js' 在这里我可以理解很多事情,但是我之后的行为是让systemjs完全忽略require('crypto')调用,并允许它完全不变地通过,因为节点将在运行时正确加载它。 由于我们正在创build的多模块企业应用程序,由于接收Systemjs版本的子依赖关系,而不是一个临时的commonjs版本,所以我没有真正的将打字稿导出到commonjs的自由。 (要做到这一点的唯一方法是将commonjs版本包含在我们的私人npm dist build中,这远非理想) 这里是我用于系统的当前configuration,因为我一直在试图让系统忽略encryption库的要求。 我把它留在了上面的错误产生的确切的状态,评论和所有,所以你可以看到我已经尝试过。 System.config({ defaultJSExtensions: true, map: { 'angular2': 'node_modules/angular2', 'reflect-metadata': 'node_modules/reflect-metadata/Reflect', 'crypto': 'node_modules/crypto' } // packages: { // 'reflect-metadata': { // format: 'global', // exports: 'Reflect', // defaultExtension: false, // meta: { // '*': { // defaultExtension: false // } // } […]