标签: systemjs

我只是想知道是否有可能使systemjs使用require("remote").require("nodemodule"),如果系统js无法在自己的注册表中找到该模块？

当使用带有typescript和commonjs模块的电子时,我觉得这个机制已经有用了......

有人已经解决了这场斗争吗？

假设我有一个foo.ts和app.ts如下:

foo.ts:

 export interface Foo {
     id: number; 
     label: string;
 };

app.ts:

 import {Foo} from './foo'
 var myfoo: Foo = { "id": 1, "label": "One" };
 console.log(JSON.stringify(myfoo));

编译后,'node app.js'如果我"module"="commonjs"在my中使用,从命令行执行会按预期运行tsconfig.json.切入追逐,我想做的是使用我的Foo接口客户端与Angular 2,服务器端与节点.不方便的是,我在这里建模的Angular 2快速入门想要"module"="system"进入tsconfig.json.此配置在尝试运行时导致错误'node app.js':

System.register([], function(exports_1) {
^
ReferenceError: System is not defined`

我已经尝试按照github上的节点使用systemjs的说明,但此时我只是粘贴密钥并可以使用一些帮助.我如何(a)使用systemjs在服务器端运行我的app.ts代码,或者,(b)使用commonjs运行Angular 2快速入门？

我试图找出一个好的(最好是最好的)方法来检测页面上是否加载了angular2.

我看了一下这个问题:检测AngularJS是否加载到当前页面的方法,但答案只是说明要使用window.angular,这是我尝试的第一件事(很久才找到答案.)好像是systemjs导致角度不在全局(窗口)范围内.

这是我的html文件的头部:

<script src="client/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="client/node_modules/systemjs/dist/system.src.js"></script>
<script src="client/node_modules/rxjs/bundles/Rx.js"></script>
<script src="client/node_modules/angular2/bundles/angular2.dev.js"></script>
<link rel="stylesheet" href="client/styles/main.css"/>

<script>
  System.config({
    packages: {        
        client: {
            format: 'register',
            defaultExtension: 'js'
        }
    }
  });
  System.import('client/app')
        .then(null, console.error.bind(console));
</script>

基于这个问题,以及我对http2的理解,我没有看到不使用systemjs的真正原因.

显然,我可能是错的,systemjs可能不是问题的原因; 无论如何,window.angular即使我正在看我的角度应用程序,也会返回undefined.

为了给你我们的用例,万一它有帮助,我们正在通过一个init文件加载一个角度应用程序,该文件将在其他网站上使用(在大多数情况下我们不控制页面.)我们希望我们的init文件是能够检测页面中是否已包含angular2(和正确版本)以及其他依赖项.如果不是,我们会动态添加他们没有的东西来满足我们的需求.(这种方法可能还有其他问题,但是当我们到达那里时我们将解决这些问题.)

摘要

1. 我们需要检测页面上是否加载了角度,以及版本是什么.
2. 使用systemjs,window.angular返回undefined.
3. 角应用程序运行良好,没有问题.
4. 使用http2,我们不认为不需要使用systemjs加载角度,但我们并不反对在必要时更改它.

我是新的node.js堆栈之类npm,gulp等等.我之前编写了一些JavaScript单元测试用例,现在想Karma用作测试运行器.然而,经过几次尝试后,我现在完全迷失了.

首先,我有以下项目配置:

• SystemJS 作为模块加载器.

• 文件夹结构(为简洁起见,省略了一些):

  project
  |
  |--build //contains all gulp tasks
  |
  |--dist //contains the output (*.html, *.js etc.)
  |
  |--jspm_packages 
  |
  |--node_modules
  |
  |--src //contains the source .html, and *.ts
  |
  |--tests //contains unit tests in *.ts. I also have a gulp task to build tests/**/*.ts to *.js in the same folder.
  |
  |--typings //contains type definitions
  |
  |--config.js //contains SystemJS configuration
  |
  |--karma.conf.js
  

  Run Code Online (Sandbox Code Playgroud)

• karma.conf.js

  // Karma configuration        
  
  module.exports = …

  Run Code Online (Sandbox Code Playgroud)

我有一个使用JavaScript库的组件.目前我只是使用system.js来加载依赖项

public ngOnInit() {
    System.import('lib').then(() => this.createControl());
}

然而,组件初始化的这种延迟导致另一个消耗组件的问题.基本上这个createControl功能运行得太晚了.

是否可以使用angular延迟整个组件的初始化,直到下载所有依赖项为止？

我正在尝试使用TypeScript在Visual Studio 2013中使用SystemJS模块,但Visual Studio显示错误.

这是我的设置:

• 适用于Microsoft Visual Studio 2013 1.8.5.0的已安装TypeScript工具
• 卸载了TypeScript的低版本

• 项目文件(VS 2013不支持tsconfig.json):

  <TypeScriptToolsVersion>1.8</TypeScriptToolsVersion> <TypeScriptModuleKind >system</TypeScriptModuleKind> <TypeScriptTarget>es5</TypeScriptTarget>

这就是我所看到的:

• 我的项目编译成功
• 在浏览器中,AngularJs成功运行
• 但在Visual Studio中,我看到了波浪线.在悬停时,它表示'表达式声明不是分配或呼叫':

这个问题与这个问题有关,但答案是"使用VS 2015",这对我来说根本不是一个选择.

有没有办法在Visual Studio 2013中使用SystemJS和TypeScript？它不一定是ES6风格的模块,只需要SystemJS和TypeScript的任何组合.谢谢!

我正在使用Angular2和SystemJS,它在开发过程中运行良好.现在我想使用gulp部署我的第一个编译版本.

为了澄清,我使用以下systemJS文件:

(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                            'app', // 'dist',
    'rxjs':                       'lib/node_modules/rxjs',
    'angular2-in-memory-web-api': 'lib/node_modules/angular2-in-memory-web-api',
    '@angular':                   'lib/node_modules/@angular',
    'ng2-charts/bundles':         'lib/node_modules/ng2-charts/bundles',
    'ng2-charts/components':      'lib/node_modules/ng2-charts/components',
    'ng2-cookies':                'lib/node_modules/ng2-cookies/'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                            { format: 'register', defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' }
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core', …

我通过angular2-seed(使用SystemJS)使用Angular2并尝试加载时刻 - 时区并moment.tz.guess()专门使用.

我导入:

import * as moment from 'moment-timezone';

当我这样做时,我在浏览器中收到以下错误:

GET /node_modules/moment-timezone/data/packed/latest.json.js 404 (Not Found)

anuglar2种子的用途defaultJSExtensions我想这是为什么不正确的.js被加入,所以我想我可能只是将其关闭了moment-timezone在tools/config/project.config.ts像这样:

this.SYSTEM_BUILDER_CONFIG.packages['moment-timezone'] = {
  defaultExtension: false

//I have also tried:
      map: {
        '/node_modules/moment-timezone/data/packed/latest.json.js': '/node_modules/moment-timezone/data/packed/latest.json',
        '/node_modules/moment-timezone/data/packed/latest.json': '/node_modules/moment-timezone/data/packed/latest.json'
      }
};

但是,这不起作用.我究竟做错了什么？

版本

typescript: 2.1.4
systemjs: 0.19.41
angular: 1.5.10
angular-mocks: 1.5.10

问题

我试图加载angular-mocks与systemjs在打字稿2.0项目.

如果我使用以下它可以工作,但我得到一个TS错误,并{module}在webstorm中也被标记为错误.

import {module} from 'angular-mocks';

describe('someClass', function () {
    'use strict';

    beforeEach(module('someModule'));

    ...
});

error TS2305: Module '"/node_modules/@types/angular-mocks/index"' has no exported member 'module'.

我最初只是尝试导入angular-mocks,但导入的angular对象没有mock属性(即使window.angular.mock已定义),因此它会引发错误.

import * as angular from 'angular';
import 'angular-mocks';

describe('someClass', function () {
    'use strict';

    beforeEach(angular.mock.module('someModule'));

    ...
});

Uncaught TypeError: Cannot read property 'module' of undefined

Systemjs配置

System.config({
    transpiler: 'typescript',
    paths: { …

考虑; JHipster生成基础项目.Angular 4是客户端框架.Webpack捆绑了客户端资产.

我们的想法是构建一个可插拔的管理仪表板(可扩展).将具有主要结构和页面的基础系统.其他团队可以构建自己的插件(页面)并在运行时将其附加到现有系统.因此,我们需要从远程存储库URL加载插件模块,这些URL将从服务器端发送(或者如果有任何更好的想法请通知我).

我构建了一个原型来模拟主流.但是,我遇到了很多障碍.主要是在运行时加载插件模块,使用Webpack编译我们的项目.

Webpack将使用模块ID(资源)替换所有模块名称.

换一种说法:

首先要了解的是Webpack无法动态加载构建期间未知的模块.这继承了Webpack构建依赖关系树的方式,并在构建期间收集模块标识符.它完全没问题,因为Webpack是一个模块捆绑器,而不是模块加载器.因此,您需要使用模块加载器,现在唯一可行的选项是SystemJS(资源).

我在互联网上发现的与这个主题相关的所有文章都说它可行,但它会很复杂.从远程URL加载模块我没有太多运气.我一直在找东西说" 是的,这可能做x ",然后我遇到了一些错误,并寻找那个找别人说" 是的,这是不可能的 ".我曾尝试使用SystemJs加载器来延迟加载插件模块作为以下片段,但没有运气!

@Component({
  providers: [
    {
      provide: NgModuleFactoryLoader,
      useClass: SystemJsNgModuleLoader
    }
  ]
})
export class ModuleLoaderComponent {
  constructor(private _injector: Injector,
              private loader: NgModuleFactoryLoader) {
  }

  ngAfterViewInit() {
    this.loader.load('app/t.module#TModule').then((factory) => {
      const module = factory.create(this._injector);
      const r = module.componentFactoryResolver;
      const cmpFactory = r.resolveComponentFactory(AComponent);

      // create a component and attach it to the view
      const componentRef = cmpFactory.create(this._injector);
      this.container.insert(componentRef.hostView);
    })
  }
}

所以我想知道是否真的可以使用Angular 4和Webpack来做这样的系统？有没有关于这个主题的任何好的文档或一个工作的例子？我应该考虑这种系统的另一个客户端框架吗？

UPDATE

我在Angular-cli …