标签: systemjs

我不知道如何陈述问题......所以,基本上我正在使用带有Typescript的Angular 2编写我自己的应用程序.我希望能够像我们使用Angular一样导入模块,我们可以在一行中导入多个相关模块.例如,我们可以在angular2 beta中执行此操作:

import { Component, OnInit, Input } from 'angular2/core';

我想用我的应用程序做类似的事情.例如:

import { UserService, RoleService } from 'my-project/services';

此外,我希望能够为模型,管道,组件等做同样的事情......

还有一件事,文件夹结构将是这样的:

src/app/services
src/app/components
src/app/models
src/app/pipes

我试图做的事情:在路径src/app上,我在文件中创建了每个'bundle',比如services.d.ts,models.d.ts,pipes.d.ts ......然后我试着映射SystemJS配置,如下所示:

(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'src/app', // 'dist',
    'rxjs':                       'node_modules/rxjs',
      'my-project/components':                  'src/app/components',
      'my-project/services':                'src/app/services',
      'my-project/models':                        'src/app/models',
      'my-project/pipes':                           'src/app/pipes',
    '@angular':                   'node_modules/@angular'
  };

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

查看systemjs的文档,我找不到同时加载多个依赖项的示例.我希望api类似......

System.import(['jquery.js','underscore.js']).then(function($, _) {
    // ready to go with both jQuery and Underscore...
});

我希望它能使用promises并行加载所有依赖项,并在完成所有依赖项后执行回调.这可能吗？如果没有,是否有理由不实现此功能？

我正在进入System.js和JSPM,我已经到了想要将我的TypeScript源代码捆绑到JavaScript包中的地步.

现在,我可以将生成的JavaScript代码捆绑为: jspm bundle some/source/path someDestFile.js

但是我需要首先将我的所有TypeScript预先构建到JavaScript中,然后捆绑,找到自己留下的所有已编译(和分离)的JS文件.这远非理想!

我在这里浏览了jspm文档,但没有找到解决方案.

为了清楚起见,我不想在我的浏览器中编译TypeScript,而是预编译的实体JavaScript包.

我该怎么做呢？

PS我用的打字稿transpiler安装所看到这里

截至Angular 2 Alpha 54(更改日志),RxJS不再包含在Angular 2中.

更新:原来zone.js并且reflect-metadata也被排除在外.

因此,我现在遇到以下错误(如Chrome开发者控制台中所示):

system.src.js:4681 GET http://localhost:3000/rxjs/Subject 404 (Not Found)F @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681
system.src.js:4681 GET http://localhost:3000/rxjs/observable/fromPromise 404 (Not Found)F @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) …

我正在努力在Angular 2 Typescript应用程序中使用moment.js库.即使在阅读了这个问题的答案之后,我也无法让它发挥作用.

这是我到目前为止所做的:

• 我使用npm安装了moment.js,所以我可以在node_modules/moment/moment.js下找到该库

• 我配置System.js来检索时刻库:

  System.config({
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        },
        moment: {
          main: 'moment.js',
          type: 'cjs',
          defaultExtension: 'js'
        }
      },
      map: {
        moment: 'node_modules/moment'
      }
  });
  

  Run Code Online (Sandbox Code Playgroud)
• 我用typings install moment-node --ambient --save和安装了打字稿打字typings install moment --ambient --save,所以我可以在打字/主/环境/时刻节点和打字/主/环境/时刻看到正确的打字

现在,如果在我的代码中我使用import * as moment from 'moment';typescript编译运行顺利,我可以在Atom编辑器中看到正确的建议(如果我开始moment().我可以看到year(),month()等).但是,如果我在浏览器中运行我的代码,它会给出一个错误,说'时刻不是一个函数'(调试我可以看到那个时刻是一个有很多方法的对象).

如果我import moment from 'moment';在浏览器中编写代码运行正常,但是typescript编译失败,"模块时刻没有默认导出",并且在编写代码时我无法从Atom获得任何建议.

我究竟做错了什么？在Angular 2打字稿应用程序中导入moment.js(和任何非打字稿库)的正确方法是什么？

我已经通过jspm install foundation安装了基础,然后导入了基础和jquery.

我遇到的问题是,如果我通过import $ as 'jquery'我导入jquery 得到错误jquery_1.default不是一个函数.如果我通过import * as $ from jquery它导入jquery 按预期工作

我打电话 $(document).foundation();来初始化基础javascript组件.以下是我的主要内容

import 'foundation'
import $ from  'jquery';
import {Aurelia} from 'aurelia-framework';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();    

  aurelia.start().then(a => a.setRoot())
      .then(a => {
        // Initialize framework
        $(document).foundation();
      });
}

其余代码只是默认导航到包含带有下拉列表的基础导航栏的简单页面

注意:即使将jquery列为dep,我也必须显式安装jquery.

我做了基础6的原始覆盖,显然做错了但它似乎在当时工作.但是,我已经发现当安装bootstrap时它将jquery放在github:components中,这似乎使得jquery不必显式安装.所以当时一切似乎都很好.

要重现只使用aurelia骨架并添加一个带有基础控件的页面,添加上面的$(document).foundation()

我最近在各种JavaScript文件中看到顶部的以下字符串:

"format register";

这个是来做什么的？

我在angular 2和systemJS库文件中看到它.

使用systemjs.config.js时如何创建角度2构建文件夹

我的应用在本地工作正常.我需要帮助我的gulp文件,所以我可以获取所需的节点模块,并将它们移动到dist文件夹准备部署.

这是我的gulp文件夹:

const gulp = require('gulp');
const ts = require('gulp-typescript');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
var htmlreplace = require('gulp-html-replace');
var addsrc = require('gulp-add-src');
var sass = require('gulp-sass');    
var inject = require('gulp-inject');
var del = require('delete');
var minifyCss = require('gulp-minify-css');    
var CacheBuster = require('gulp-cachebust');
var cachebust = new CacheBuster();

gulp.task('app-bundle', function () {
  var tsProject = ts.createProject('tsconfig.json', {
      typescript: require('typescript'),
      outFile: 'app.js'
  });

  var tsResult = gulp.src([
    'node_modules/angular2/typings/browser.d.ts',
    'typings/main/ambient/firebase/firebase.d.ts',
    'app/**/*.ts'
  ])
    .pipe(ts(tsProject));

  return tsResult.js.pipe(addsrc.append('config-prod.js'))
                    .pipe(concat('app.min.js'))
                    .pipe(uglify())
                    .pipe(gulp.dest('./dist')); …

我试图在几天内运行一些单元测试但没有成功.我的应用程序是用typescript编写的(单元测试也是用typescript编写的).这是我的业力配置文件:

module.exports = function (config) {
  config.set({

    basePath: "../../../../",

    frameworks: [
      "jasmine",
      "systemjs"
    ],

    browsers: ['PhantomJS'],

    singleRun: true,
    reporters: ['progress'],

    systemjs: {
      config: {
        paths: {
          systemjs: "src/main/webapp/static/js/engage/lib/bower/system.js/dist/system.src.js",
          typescript: "build/node_modules/typescript/lib/typescript.js"
        },
        transpiler: "typescript"
      },

      // testFileSuffix: ".spec.ts"
    },

    files: [
      'src/main/webapp/static/js/engage/dist/vendor/vendor.min.js',
      'src/main/webapp/static/js/engage/lib/bower/system.js/dist/system-polyfills.src.js',
      'src/main/webapp/static/js/engage/lib/bower/angular-mocks/angular-mocks.js',
      {pattern: "src/main/webapp/static/js/engage/app/**/*.spec.ts", served: true, included: false}
    ]
  });
};

当我运行时,karma start我收到以下错误:

05 09 2016 21:39:45.543:INFO [karma]: Karma v1.2.0 server started at http://localhost:9876/
05 09 2016 21:39:45.546:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
05 09 …

如何创建一个包含Angular 2模块的javascript文件,该模块可以被其他应用程序使用,但是在运行时直接从中央服务器加载并且不捆绑到特定应用程序的代码中？

可以将其视为Angular 2库的CDN.要求是此库的使用者将在其页面上包含单个脚本.

这是以这种方式实现它的要求,所以我对任何建议将库捆绑到单个应用程序的输出文件中的答案不感兴趣.必须在运行时直接从库的服务器加载库脚本.

• 集中式Web应用程序称为CustomAuth
• CustomAuth有一个名为的Angular 2模块 CustomAuthModule
• CustomAuthModule公开了可由外部Angular 2应用程序使用的多个服务和组件.

这是所需的工作流程(从高级别).

• 开发人员希望在名为BookLibrary的Angular2应用程序中使用CustomAuth.
• 在开发人员的索引页面上,他们添加了指向的脚本包含http://server-url/CustomAuth/script.不应要求消费者知道有关systemjs或webpack等模块加载器的任何信息.
• 在他们的angular2代码中,他们从CustomAuth模块(服务,组件等)导入东西.
• 当他们使用angular-cli编译应用程序时,它将不包含CustomAuth代码,而是假设它将在运行时动态加载.

我已经做了很多关于这方面的研究,我没有任何运气可以搞清楚.任何帮助将不胜感激.