标签: systemjs

我尝试使用typescript设置一个restify项目.经过各种尝试后,我可以使用tsconfig.json中的"module:commonjs"创建一个工作版本

我更喜欢使用系统 - 但我无法使用systemjs进行设置

boot.ts

import {AppServer} from './app';

var _appServer = new AppServer();

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

app.ts

/// <reference path="typings/restify/restify.d.ts" />
import {Server, Response, Request, createServer} from 'restify';

export class AppServer {

  private server: Server;

  constructor() {
    this.init();
  }

  init() {
    this.server = createServer();
    this.server.get('/hello/:name', this.respond);

    this.server.listen(8080, () => {
      console.log('%s listening at %s', this.server.name, this.server.url); …

我正在使用jspm和SystemJS导入ES2015模块.

是否可以通过System对象或其他任何位置获取项目中所有导入模块的列表？我可以通过访问我的项目特定模块System._loader.moduleRecords,但是我通过jspm安装的模块(例如d3,jquery)不会出现在此列表中.

System._loader.modules包含所有模块的列表,但遗憾的是还包括转换我的代码和模块加载包所需的模块列表.

System._loader.moduleRecords (项目模块)

System._loader.modules (项目模块,库,transile包)

我只想要一个已声明的导入列表,特别是我导入的导入列表import x from 'x'.这应该包括这两个项目的模块和库,但不巴贝尔/模块加载相关的模块.我想解决方案不涉及使用正则表达式进行过滤.

SystemJS似乎加载rxjs模块没有问题,但在rxjs目录本身上抛出了404 Not Found.所有模块都是最新版本,这只是Windows上的一个问题,它适用于osx.

GET http:// localhost:8080/node_modules/rxjs / 404(未找到)

错误:错误:XHR错误(未找到404) XHR已完成加载:GET"localhost:8080/node_modules/rxjs/Subject.js".

XHR完成加载:GET"localhost:8080/node_modules/rxjs/operator/toPromise.js".

模块加载和错误

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js',

            },
            'components':{ format: 'register' },
            'rxjs': {defaultExtension: 'js'}
        },
        map: {'app': '/components',
            'rxjs': '../node_modules/rxjs',
            },


    });
    System.import('components/notes.js')
            .then(null, console.error.bind(console));
</script>

+-- angular2@2.0.0-beta.9
+-- bootstrap@3.3.6
+-- es6-promise@3.0.2
+-- es6-shim@0.33.3
+-- jquery@2.2.1
+-- reflect-metadata@0.1.2
+-- rxjs@5.0.0-beta.2
+-- systemjs@0.19.24
| +-- es6-module-loader@0.17.11
| `-- when@3.7.7
+-- typescript@1.8.7
`-- zone.js@0.5.15
  `-- es6-promise@3.1.2

我修复了这个问题,似乎我在我的.ts中导入rxjs的方式已被弃用:

改变了

import {Subject, Observable} from 'rxjs';

至:

import { …

我有一个JSPM/Typescript/Angular 1.5.3项目.我想使用新的组件路由器.在我的项目目录中,我使用了该命令

jspm install npm:@angular/router

哪个安装正常,没有错误.然后我把它添加到我的app.ts文件中

import ngComponentRouter from 'jspm_packages/npm/@angular/router@0.2.0/angular1/angular_1_router'

但是当我开始我的时候lite-server,我明白了

Failed to load resource: the server responded with a status of 404 (Not Found) 
http://localhost:3000/jspm_packages/npm/@angular/instruction.json

Failed to load resource: the server responded with a status of 404 (Not Found) 
http://localhost:3000/jspm_packages/npm/@angular/utils.json

Failed to load resource: the server responded with a status of 404 (Not Found) 
http://localhost:3000/jspm_packages/npm/@angular/url_parser.json

我不确定为什么要加载这些神秘的JSON文件,所以我检查了我的package.json:

{
  "jspm": {
    "name": "app",
    "dependencies": {
      "": "npm:@angular/router@^0.2.0",
      "angular": "npm:angular@^1.5.3", 

嗯......空的""看起来不对劲.如果JSPM无法解析包名并且路由器要求JSON文件,我觉得缺少构建步骤.我在这做错了什么？

我使用Karma 1.1.0.这是我的karma.shim:

'use strict';

// Tun on full stack traces in errors to help debugging
Error.stackTraceLimit = Infinity;

jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

// // Cancel Karma's synchronous start,
// // we will call `__karma__.start()` later, once all the specs are loaded.
__karma__.loaded = function() {};

var map = {
    'app': 'base/app',
    'rxjs': 'base/node_modules/rxjs',
    '@angular': 'base/node_modules/@angular'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app': { main: 'main.js',  defaultExtension: 'js' …

我目前正在将我的Angular 2应用程序与WebPack捆绑在一起.我们仍在进行快速循环,因此我们希望包含很少变化的Angular 2 UMD CDN准备捆绑包,而不是为我们的构建和应用程序加载过程添加延迟,例如:

<script src="https://npmcdn.com/@angular/core@2.0.0-rc.3/bundles/core.umd.min.js"></script>
<script src="https://npmcdn.com/@angular/common@2.0.0-rc.3/bundles/common.umd.min.js"></script>
<script src="https://npmcdn.com/@angular/compiler@2.0.0-rc.3/bundles/compiler.umd.min.js"></script>

• 当我让WebPack做它的事情时,程序包运行正常但只有几MB,因为它不利用预先构建的bundle或分离出Angular 2"vendor"代码.
• 当我使用Angular 2 WebPack建议书时,例如:plugins: [ new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js") ],我的应用程序包很小,但我手动构建一个单独的,唯一的1MB包,其中包含大部分Angular 2框架,每个版本.此文件根据我的应用程序稍微改变每个版本,并且在我的应用程序或各种应用程序的版本之间不可移植,并且没有"CDN"的好处.当然,我必须包含此文件才能运行我的应用程序.
• 当我使用IgnorePlugin进行过滤时@angular|rxjs,例如plugins: [ new webpack.IgnorePlugin(/\@angular|rxjs/) ],它会排除供应商文件,但会在应用程序包的顶部插入硬编码异常/抛出错误.
• 当我使用WebPack外部时,例如externals: ['@angular/core', ...,我function(module, exports) { module.exports = @angular/core; },在我的应用程序包中输出,这显然不起作用.WebPack文档并不是非常明确,但我想我可以指定一个libraryTarget或引用的resolve函数,它将指示WebPack在模块加载中进行编译.
• 当我完全抛弃WebPack并使用TypeScript编译器捆绑器(根据本指南,它使用UMD捆绑包)时,我会System.register()调用我所期望的NPM命名空间,例如System.register("myapp/boot", ['@angular/core', ...,但我仍在使用SystemJS配置调用UMD的.另外,相对于WebPack生成的文件,此文件的大小为25%.
• 如果我在前面的项目中使用SystemJS,我希望在构建期间或作为并行进程进行此编译,而不是作为文件保存的一部分.我猜SystemJS-Builder(请参阅此处和此处的相关问题)是否可以这样做？也许这也会产生较小的文件大小,即Typescript集成的"bundler".

如何构建不依赖于唯一重新打包的Angular 2包的应用程序包？

我目前正在建立对抗RC3.我的进程目前是WebPack,如上所述,但我会转移到另一个工具集,如果这使它更容易.

做了一些研究,我想我被WebPack的"Loader"术语误导了.我必须使用模块加载器,它看起来不像WebPack有一个适用于此的工具.

要分配UMD包模块名称空间(以及连接依赖项),不能在脚本标记中加载它们.相反,它们必须使用给定的this上下文进行评估,以充当模块引用.这意味着即使我希望它们全部同步加载,我仍然需要配置其他类似SystemJS的东西来加载它们,因此它们的上下文被控制/包装.

这个Angular 2 plunker接近我正在寻找的东西.它使用Angular …

我在更新到RC6后运行应用程序时遇到了一些问题.

由于changelog的官方示例,我更改了我的systemjs .

但我仍然得到像这样的编译错误:"模块""D:/ Myproject/WebClient/node_modules/@ angular/router/index"'没有导出的成员'ROUTER_DIRECTIVES'."

看起来编译器采用默认的index.js文件而不是umd包...编译是通过gulp任务完成的,具有以下选项:

"module": "system", "moduleResolution": "node", "target": "ES5", "experimentalDecorators": true, "emitDecoratorMetadata": true, "allowSyntheticDefaultImports": false 我得到路由器模块和表单模块的这个错误.

Router为V3.0.0-rc.2,格式为V.2.0.0-rc6

认为无论如何我的systemJs无法正确读取更是一个问题.

SystemJS:

var map = {
'app': 'public/app',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'rxjs': 'npm:rxjs',
'symbol-observable': 'npm:symbol-observable',
'moment': 'npm:moment',
'ng2-charts': 'npm:ng2-charts',
'ng2-translate/ng2-translate': 'npm:ng2-translate',
'angular2-highcharts': 'npm:angular2-highcharts',
'highcharts/highstock.src': 'npm:highcharts',
'primeng': 'npm:primeng'
};

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

我有一个Angular 2应用程序(RC7),它作为单个组件开始,但很快就会以各种不同(有时甚至是完全不相关)的方式在整个项目中使用.

因此,单个NgModule引导所有组件似乎是一个可怕的想法,有大量的膨胀.我正在努力寻找一种方法来拥有多个模块(模块A将包含组件A,模块B将包含组件B等),并且仍然允许在单个页面上引导多个A2应用程序.

在实践中,我想要实现的是:

Page 1 bootstraps模块A - 这是有效的.

Page 2 bootstraps模块B - 这是有效的.

Page 3 bootstraps模块A和模块B - 这不起作用.

的index.html

<script src="/angular2/node_modules/zone.js/dist/zone.js"></script>
<script src="/angular2/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/angular2/node_modules/systemjs/dist/system.src.js"></script>
<script src="/angular2/systemjs.config.js"></script>


<script type="text/javascript">
    System.import('appOne').catch(function(err){ console.error(err); });
    System.import('appTwo').catch(function(err){ console.error(err); });
</script>

systemjs.config.js

(function (global) {
    System.config({
        paths: {
            'npm:': '/angular2/node_modules/'
        },
        map: {
            appOne: '/angular2/',
            appTwo: '/angular2/',
        },
        packages: {
            appOne: {
                main: './appOne.main.js',
                defaultExtension: 'js'
            },
            appTwo: {
                main: './appTwo.main.js',
                defaultExtension: 'js'
            },
        }
    });
})(this);

AppOne和AppTwo的模块只是引导相关组件(componentOne&componentTwo).但是,两者不会同时在同一页面上呈现.我在控制台中没有错误,但是最后在systemjs.config.js文件中列出的最新软件包是唯一要加载的软件包.

谁能明白为什么它可能不起作用？或者推荐另一种方法来构建我的模块.我宁愿没有列出所有组件,服务等的父模块 …

根据入门我创建了一个名为main.js的文件:

 export class q {
    constructor() {
      this.es6 = 'yay';
    }
  }

在我的html文件中得到:

<script src="system.js"></script>
<script>
  SystemJS.import('main.js')
  .then(null,(err)=>console.error(err))
</script>

加载页面时,我得到:

错误:无法动态转换ES模块需要通过配置加载程序插件SystemJS.config({ transpiler: 'transpiler-module' }).实例化http:// localhost:8080/main.js 在system.js上的transpile(system.js:3650)加载main.js:3433 SystemJS.import.then @ index.html:17

我从这里得到的system.js文件:https://raw.githubusercontent.com/systemjs/systemjs/master/dist/system.src.js

使用Chrome中安装的缓存杀手插件从http-server(节点)运行静态内容.

不知道这是什么,但我会继续阅读文档,也许找到解决方案.虽然有点邋in它在"开始"时打破.

更新

我猜这与它有关:

https://github.com/jspm/jspm-cli/issues/1312

但是没有任何关于如何使错误消失的信息.代码在Chrome中运行,并且将由babel进行转换,只有部分我需要system.js用于开发期间加载模块.

更新

https://youtu.be/5P04OK6KlXA?t=3m3s

看起来像"入门"应该提到,为了工作的例子,也需要跟踪.

经过一番搜索,我在这里找到了traceur.js:http://google.github.io/traceur-compiler/bin/traceur.js

将html更改为:

<script src="traceur.js"></script>
<script src="system.js"></script>
<script>
  SystemJS.import('./main.js')
  .then(null,(err)=>console.error(err))
</script>

它仍然是同样的错误.

更新

使用npm安装systemjs和traceur并将它们添加到html:

<script src="./node_modules/traceur/bin/traceur.js"></script>
<script src="./node_modules/systemjs/dist/system.js"></script>

同样的错误.我已经完成了这个并恢复到requirejs用于开发,r.js用uglify进行分发.

在阅读了有关汇总的内容以及编译后的代码如何只导入您需要的内容而不是整个文件时,我们正在研究这个问题.

我是Type脚本的新手，但出现以下错误。

Uncaught TypeError: System.config is not a function
    at systemjs.config.js:53
    at systemjs.config.js:55

请让我知道您需要更多的细节

-----编辑添加以下内容-----

以下是我的systemjs.config.js，请建议如何将其迁移到2.0.2版本的systemjs

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {

  // map tells the System loader where to look for things
  var map = {
    'app': 'app', // 'dist',

    '@angular': 'node_modules/@angular',
    'rxjs': 'node_modules/rxjs'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app': { …