标签: systemjs

我在Angular2项目中使用SystemJS.我为TypeScript使用tsconfig文件.我想使用gulp来连接和缩小我的生产版代码.我在解决代码方面遇到了问题:每次尝试连接文件时都会得到"angular"未定义或"system"未定义.我试图修改我尝试从节点模块加载文件的顺序,但是我没有成功.

我想知道你们是否有这个问题,并找到答案吗？

这是我的gulp文件:

var gulp = require('gulp'),
            .....


var paths = {
    dist: 'dist',
    vendor: {
        js: [
            'node_modules/systemjs/dist/system.src.js',
            'node_modules/angular2/bundles/angular2.dev.js',
            'node_modules/angular2/bundles/angular2-polyfills.js',
            'node_modules/angular2/bundles/router.dev.js'
             ...
        ],
        css: []
},
    app: {
        templates: [
            'app/**/*.html',
            '!node_modules/*.html'
        ],
        scripts: [
            'app/**/*.ts',
            'app/config.ts',
            'app/app.ts'
        ]
    }
};

var tsProject = ts.createProject('tsconfig.json', {
    out: 'Whatever.js'
});

gulp.task('dev:build:templates', function () {
    return gulp.src(paths.app.templates)
        .pipe(ngHtml2Js({
            moduleName: 'Whatever',
            declareModule: false
        }))
        .pipe(concat("Whatever.tpls.min.js"))
        .pipe(gulp.dest(paths.dist));
});
gulp.task('prod:build:templates', function () {
    return gulp.src(paths.app.templates)
        .pipe(minifyHtml({
            empty: true,
            spare: true,
            quotes: true
        }))
        .pipe(ngHtml2Js({ …

我使用JSPM,AngularJS,TypeScript,SystemJS和ES6我的项目运行非常好......除非我尝试使用momentJS.

这是我得到的错误:

TypeError:时刻不是函数

这是代码的一部分:

import * as moment from 'moment';

更多:

var momentInstance = moment(value);

如果我调试它,时刻是一个对象而不是一个函数:

这就是我的moment.js JSPM包的样子:

module.exports = require("npm:moment@2.11.0/moment.js");

我已经阅读了很多,找不到解决这个问题的方法......任何想法？

我读过/试过的一些事情:

如何在TypeScript中使用带有SystemJS的momentjs？

https://github.com/angular-ui/ui-calendar/issues/154

https://github.com/jkuri/ng2-datepicker/issues/5

momentJS上的打字稿模块系统行为奇怪

https://github.com/dbushell/Pikaday/issues/153

谢谢!

我正在使用Angular 2和SystemJS并尝试将样式表添加到组件中.
因为我正在使用SystemJS ,所以我现在不能使用相对路径,所以我使用了组件模板url的绝对路径以及样式url.
但内联样式工作正常(即styles: ['h1 {font-size: 12px; }'])

该组件看起来像这样:

@Component({
    selector: 'dashboard',
    templateUrl: '/app/components/dashboard/dashboard.html',
    styleUrls: ['/app/components/dashboard/dashboard.css']
})

样式表dashboard.css永远不会被加载(也不会返回任何错误).

工具的版本:

〜angular 2: 2.0.0-beta.6
〜systemjs: 0.19.20
〜typescript: 1.8.0

我正在创建一个Ionic应用程序es6 modules,TypeScript并SystemJS作为模块加载器.这是我的设置:

tsconfig.json:

{
  "compilerOptions": {
    ...
    "target": "es5",
    "module": "system",
    ...
  }
}

index.html的:

<script src="lib/system.js"></script>
<script src="systemjs.config.js"></script>
<script>System.import('js/app.js')</script>

示例脚本(TypeScript):

import {IConfig} from "./app-config";

export class ConfigLoader {
    ...
}

Chrome中的一切都很棒.但是,在使用Safari的Web Inspector进行调试时,我无法在脚本中放置任何断点,因为Web Inspector仅显示直接从HTML加载的脚本(通过脚本标记),而不是XHR加载的脚本(在我的情况下,由SystemJS加载) .这意味着我无法调试自己的脚本,这当然是不可接受的.

我尝试像以前一样使用SystemJS解决这个问题,但也将脚本标记放在html中,如下所示:

<script src="lib/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="js/app-config.js"></script>
 ... other app scripts
<script>System.import('js/app.js')</script>

但是,这不起作用,因为SystemJS对此并不满意:

无效的System.register调用.匿名System.register调用只能由SystemJS.import加载的模块进行,而不能通过脚本标记进行.

如何使用SystemJS并同时具备在Safari中调试的能力？我正在寻找比在每个脚本中放置调试器语句更复杂的解决方案......

我很难理解模块,需要一种方法来调试我的问题.有没有办法使用SystemJS枚举模块及其导出？

配置文件似乎是一个记录不完整的雷区.对于提供像"RxJs"这样的包的模块,如果我将包包含在脚本标记中,或者如果我尝试使用SystemJS配置加载它,我怎么能告诉我应该能够在我加载的内容中找到什么它在哪里？例如,我可以rxjs通过复制node_modules/rxjs到`wwwroot/libs/rxjs'并使用它来工作:

System.config({
    map: {
        'rxjs': 'lib/rxjs'
    },
    packages: {
        'rxjs': { defaultExtension: 'js' }
    }

这似乎加载每个单独的文件.现在说我使用脚本标记来加载rxjs包.我怎么知道捆绑包有我需要的模块？在SystemJS中是否有办法查看它是否会使用捆绑包以及它可以解决的问题？

我在我的Angular 2项目中使用带有SystemJS的Typescript进行模块加载,使用Gulp进行任务运行.项目中当前版本的Angular是RC2,但RC1也存在问题.我在这里遵循了brando的答案.

捆绑我的应用程序和初始加载网站SystemJS后抛出错误:

错误:http:// localhost:57462/app/app.bundle.js被检测为寄存器但未执行.

该应用程序工作,但控制台中的错误绝对不是一件好事.

我在空项目上测试了我的配置,问题再次出现,所以我认为问题在于配置.

这里是:

Gulpfile

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var typescript = require('gulp-typescript');
var jspm = require('gulp-jspm-build');

gulp.task('compile:ts', function () {
    return gulp.src(['./appTS/**/*.ts'])
        .pipe(sourcemaps.init())
            .pipe(typescript({
                noEmitOnError: true,
                target: 'ES5',
                removeComments: false,
                experimentalDecorators: true,
                emitDecoratorMetadata: true,
                module: 'system',
                moduleResolution: 'node'
            }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./app/'));
});

gulp.task('copy:vendor', function () {
    return gulp.src([
        'node_modules/systemjs/dist/system-polyfills.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.min.js',
        'node_modules/systemjs/dist/system.js',
        'node_modules/rxjs/bundles/Rx.js'
    ]).pipe(gulp.dest('./assets/vendor/'));
});

gulp.task('bundle:app', ['compile:ts'], function () {
    return jspm({ …

我正在尝试使用TypeScript和jspm&system.js来引导Web应用程序以进行模块加载.我没有走得太远.安装jspm后,用它来安装jQuery:

jspm install jquery

基础知识:

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
        System.import('main');
</script>

main.ts:

import $ from "jquery";

export class Application  {
    constructor() {
        console.log($);
    }
}

TypeScript将无法编译,因为"Module'jquery'没有默认导出.

生成的config.js具有正确的映射:"jquery":"npm:jquery@2.2.0"

我试图将http提供程序导入服务,但是我收到以下错误:

无法解析'AppService'(？)的所有参数.确保所有参数都使用Inject进行修饰或具有有效的类型注释,并且"AppService"使用Injectable进行修饰.

以下是一些代码段:

<script src="~/es6-shim/es6-shim.min.js"></script>
<script src="~/systemjs/dist/system-polyfills.js"></script>

<script src="~/angular2/bundles/angular2-polyfills.js"></script>
<script src="~/systemjs/dist/system.src.js"></script>
<script src="~/rxjs/bundles/Rx.js"></script>
<script src="~/angular2/bundles/angular2.dev.js"></script>
<script src="~/angular2/bundles/http.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script>
    System.config({
        map: { 'rxjs': 'RCO/rxjs' },
        packages: {
            RCO: {
                format: 'register',
                defaultExtension: 'js'
            },
            'rxjs': {defaultExtension: 'js'}
        }
    });
  System.import('RCO/Areas/ViewOrganization/AngularTemplates/boot')
      .then(null, console.error.bind(console));

boot.ts

import {bootstrap} from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http'
import 'rxjs/add/operator/map'
import {AppComponent} from  'RCO/Areas/ViewOrganization/AngularTemplates/app.component'
import {AppService} from 'RCO/Areas/ViewOrganization/AngularTemplates/app.service'

bootstrap(AppComponent, [HTTP_PROVIDERS, AppService]);

app.service.ts

import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Observable} …

我的项目设置包括用于库的'jspm'工具和用于打字的'tsd'工具.

在安装了moment的TypeScript d.ts文件(这些)之后,我找不到加载和实际使用时刻实例的方法.

在我的文件中(使用SystemJS模块加载)

/// <reference path="../../../typings/tsd.d.ts" />
import * as moment from "moment";
import * as _ from "lodash";
...
...
const now = (this.timestamp === 0) ? moment() : moment(this.timestamp);

我得到一个" TypeError:时刻不是函数 "

这些定义的结构与lodash相同,工作正常,所以我不知道原因可能是什么.

有人可以帮忙吗？

一直在研究ES6,JSPM和angular2一周,我找到了这个repo ES6-loader

如果我们查看底部脚本中的index.html,您会看到

 System.import('reflect-metadata')
  .then(function() {
    return System.import('app/index');
  })
  .catch(console.log.bind(console));

这是使用JSPM的systemjs polyfill来获取ES6 import.

问题: 在这种情况下,反射元数据到底是做什么的？npm reflect-meta我阅读的文档越多,我就越不了解它的作用吗？