标签: systemjs

关于如何将 TypeScript 模块与单独文件中的类分开存在几个问题，但到目前为止还没有适用于我的问题的解决方案。

我有一个模块 ( store)，其中包含两个类 ( Person& SerialisedRecord)。当两个类都在一个文件中时，编译和导出工作正常。

现在，我希望每个类 ( Person.ts& SerialisedRecord.ts) 都有一个文件，遵循我已有的相同导出模式。但我不知道如何实现这一目标。

这是我最初的情况：

商店.ts

export module store {

  export class Person {
    public fullName: string = '';

    constructor(firstName: string, lastName: string) {
      this.fullName = `${firstName} ${lastName}`;
    }
  }

  export class SerialisedRecord {   
    constructor(public serialised: string, public id: string) {}
  }

}

当我编译store.ts到store.js（ES5）时，我得到了我想要的（一个 SystemJS 模块在一个模块中导出两个类）：

System.register([], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var store;
    return …

每个人。我正在尝试将在角度 1 上编写的大型应用程序升级到角度 2。作为第一步，它尝试使用官方指南创建混合角度 1/2 应用程序。

当所有指令完成后，我收到一个错误

Unhandled Promise rejection: (SystemJS) Unexpected token <
SyntaxError: Unexpected token <
    at eval (<anonymous>)
    at ZoneDelegate.invoke (http://localhost:8000/node_modules/zone.js/dist/zone.js:242:26)
    at Zone.run (http://localhost:8000/node_modules/zone.js/dist/zone.js:113:43)
    at http://localhost:8000/node_modules/zone.js/dist/zone.js:535:57
    at ZoneDelegate.invokeTask (http://localhost:8000/node_modules/zone.js/dist/zone.js:275:35)
    at Zone.runTask (http://localhost:8000/node_modules/zone.js/dist/zone.js:151:47)
    at drainMicroTaskQueue (http://localhost:8000/node_modules/zone.js/dist/zone.js:433:35)
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:8000/node_modules/zone.js/dist/zone.js:349:25)
Evaluating http://localhost:8000/app
Error loading http://localhost:8000/app ; Zone: <root> ; Task: Promise.then ; Value: 

我的systemjs.config.js

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': '/node_modules/'
    },
    // map tells the System loader where to …

这是我正在尝试实现的目标：我想使用“插件”创建一个应用程序，我所说的插件是：

另一个可以部署在远程主机上并显示在我的应用程序中的角度组件/模块。

看来我不能直接使用 webpack 做这样的事情，我应该使用 SystemJs 来动态加载模块。

欢迎使用 SystemJs 和 Webpack (ng cli) 提供任何建议，以及如何调用远程模块并加载它们的示例。

我有一个 Angular 2 应用程序，用于systemjs映射/加载。

在项目中导入rxjs并引用它是可以的，但是当部署代码时，它无法构造变量Subject并显示消息：

“未处理的 Promise 拒绝：Rx_1.Subject 不是构造函数；区域：；任务：Promise.then；值：TypeError：Rx_1.Subject 不是构造函数”。

systemjs 上的接收：

(function (global) {
var map = {
    'app': 'app',  
    '@angular': 'js/@angular', 
     // other libraries
    'rxjs': 'js/rxjs', 
};

// packages tells the System loader which filename and/or extensions to look for by default (when none are specified) 

var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' }
};

我实例化主题的方式：

import { Injectable } from '@angular/core';
import { …

我正在尝试创建一些基本测试来尝试新的Cypress库。在我的测试中，我正在cy.visit('http://mywebsite.com');加载一个使用 SystemJS 的 AngularJS 应用程序。

如果我正确理解 Cypress，我不需要做任何其他事情，它会确保在运行其他任何操作之前加载页面。然而，这似乎不起作用，因为页面已加载，但 SystemJS 仍在加载模块。

在不使用 的情况下，如何让 Cypress 等待所有 SystemJS 模块加载，然后再运行更多测试cy.wait(5000)？

编辑

感谢 Dwelle，这是适合我的解决方案。我将初始的 System.import 包装在一个承诺中，一旦 AngularJS 应用程序启动，该承诺就会得到解决。

window.APP_READY = new Promise(function(resolve, reject) {
    System.import('app').then(function(app) {
        angular.element(document).ready(function() {
            angular.bootstrap(document, ['app']);
            resolve();
        });
    });
});

然后在测试中

cy.visit('http://mywebsite.com').its('APP_READY');

本来这些 JS 文件所在的地方一切都很好。但我想要一些简单的类型检查，所以我转换为 TypeScript。

我想要的是将所有.ts文件编译成一个.js适合在浏览器中使用的简单脚本标签。

该项目不包含 webpack，因此请不要使用 webpack 相关说明。

我试过这个

tsc main.ts --module amd --outFile main.js

和

tsc main.ts --module system --outFile main.js

但两者似乎都要求我在页面上包含另一个第三方库。

有没有一种方法可以将所有文件连接在一起，以便一切正常？我尝试通过命令运行 amd 构建版本的输出browserify，但没有骰子。

如果这不起作用，我将像平常一样返回.js并包含脚本标签。

TLDR：如何将 ts 捆绑到单个 js 中，而不requirejs依赖systemjs于页面？

我使用 webpack 创建了一个 javascript 库，它输出一个 systemjs 模块。该模块依赖于react，我将其指定为外部模块。生成的 javascript 文件如下所示：

System.register(["react"], function(__WEBPACK_DYNAMIC_EXPORT__) {
var __WEBPACK_EXTERNAL_MODULE_react__;
return { ....

另外，我有一个应用程序，它在运行时使用 SystemJS 来加载该模块。为了提供反应依赖性，我定义了一个导入映射：

{
   "imports": {
      "react": "https://unpkg.com/react@16.11.0/umd/react.production.min.js"
   }
}

我导入模块的部分如下所示：

const modulePromise = System.import(MODULE_URL);
modulePromise.then(module => {
  console.log('module loaded successfully!');
});

现在的问题是，console.log 永远不会被调用，因为我收到一个 TypeError，即“组件不是未定义的属性”，这告诉我，不知何故，反应尚未正确传递到我的模块。

准确地说，在浏览器网络选项卡中，我看到我的模块和反应导入确实已加载，但不知怎的，它没有被正确处理。

有谁知道我可能做错了什么？

我在index.html中有这个SystemJS配置:

<body>
        <script src="node_modules/systemjs/dist/system.js"></script>
        <script>
            System.config({
                defaultJSExtensions: true,
                transpiler: 'typescript',
                map: {
                    typescript: 'node_modules/typescript/lib/typescript.js'
                },
                packages: {
                    "ts": {
                        "defaultExtension": "ts"
                    }
                },
            });
            System.import('ts/main');

        </script>
</body>

main.ts:

let a = [1, 2, 3];
let b = [1, 2, 3];

我明白了:Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode.它看起来像SystemJS没有编译文件.

当我在第一行添加import语句时,它完美地工作:

import * as ts from 'typescript'; // or any other package

let a = [1, 2, 3];
let b = [1, 2, 3]; …

我正在从ng1升级到ng2.我添加了Angular 2并成功导入了它的模块:

<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/node_modules/angular2/bundles/http.dev.js"></script>
<script src="/node_modules/angular2/bundles/router.dev.js"></script>

我添加了以下配置:

 <script>
        System.config({
          packages: {
            app: {
              format: 'cjs',
              defaultExtension: 'js'
            }
          }
        });

        System.import('scripts/bootstrap.js').then(null, console.error.bind(console));

 </script>

现在我正在尝试添加我的第一个ng2组件/模块并导入它:

它使用TypeScript编写的组件:

import {Component} from 'angular2/core';

@Component({
  selector: 'my-component',
  templateUrl: 'app/components/my-component/my-component.html',
  styleUrls: ['app/components/my-component/my-component.css'],
  providers: [],
  directives: [],
  pipes: []
})
export default class MyComponent {

  constructor() {}

}

导入我的组件:

import MyComponent from './components/my-component/my-component';

组件的ES5编译代码是:

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    if (typeof Reflect === …

您好我为systemJS设置了以下配置:

    System.config({
    packages: {
        //sets the root path of the Angular2 App
        'DesktopModules/RegentDMS/app': {
            //module format expected in application, register = System.register or System.registerDynamic compatibility module format
            format: 'register',
            //default file extension for paths
            defaultExtension: 'js',
            map: {'./app' : './DesktopModules/RegentDMS/app'}
        },
    } 
  }); 
System.import('app/boot')
        .then(null, console.error.bind(console));

默认扩展程序工作正常,但我得到的是控制台中的404错误:

获取http:// localhost:81/app/boot 404(未找到)

但是,如果我将其更改为以下内容:

    System.config({
    packages: {
        //sets the root path of the Angular2 App
        'DesktopModules/RegentDMS/app': {
            //module format expected in application, register = System.register or System.registerDynamic compatibility module format
            format: 'register', …