标签: systemjs

我目前正在尝试清理一些代码,以便针对接口而不是针对实现进行编程,但无法弄清楚如何实现.

更具体地说,我正在使用:*TypeScript 1.5.0 beta - >转换为ES5/commonjs*SystemJS来加载模块

我目前尝试使用外部模块如下:

posts.service.ts文件:

///<reference path="../../../typings/tsd.d.ts" />
///<reference path="../../../typings/typescriptApp.d.ts" />
...
export interface PostsService{ // 1
    fetchPosts(): Rx.Observable<any>;
}
export var PostsService:PostsServiceImpl; // 2
...
export class PostsServiceImpl implements PostsService { // 3
    ...
    constructor(){
        console.log('Loading the Posts service');
}
...
fetchPosts(): Rx.Observable<any>{ 
   ...
}

并在posts.ts中导入该模块:

    ///<reference path="../../../typings/tsd.d.ts" />
    ///<reference path="../../../typings/typescriptApp.d.ts" />

    import {PostsService, PostsServiceImpl} from 'components/posts/posts.service';

    @Component({
    selector: 'posts',
    viewInjector: [
        //PostsServiceImpl
        //PostsService
        bind(PostsService).toClass(PostsServiceImpl)
    ]
})
...
export class Posts {
    private postsServices: PostsService;

    constructor(postsService: …

Typescript在此导入中找不到该模块import ga from 'googleAnalytics';

SystemJS知道在哪里找到模块,因为它已被映射到前面,如下所示:

map: {
    '@angular': 'node_modules/@angular',
    'rxjs': 'node_modules/rxjs',
    'underscore': 'node_modules/underscore/underscore-min.js',
    'googleAnalytics': '//www.google-analytics.com/analytics.js'
},

我怎样才能提供类似的映射tsc？

这个问题似乎指向了一个很好的方向:如何在Angular 2中避免使用非常长的相对路径进口？

Typescript 2.0似乎支持paths配置tsconfig.json.有没有办法下载Typescript 2.0？我可以为path配置提供一个http url(//www.google-analytics.com/analytics.js),就像我在使用SystemJS一样吗？如果没有办法下载Typescript 2.0,我怎么能用当前版本实现我想要的？

编辑

我得到的具体错误是:"找不到模块'ga'".

这是我的tsconfig.json:

{
    "compilerOptions": {
        "rootDir": "./",
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitAny": true
    },
    "exclude": [
        "node_modules",
        "front-end/node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

我想使用带有SystemJS 的库ip-address(注意,这个问题可能看起来很相似,但这是我在尝试完成此任务时遇到的另一个问题).

库ip-address依赖于util-deprecate.它导入如下:

var util = require('util');

然后使用如下:

Address4.prototype.toV6Group =
  util.deprecate(Address4.prototype.toGroup6,
    'deprecated: `toV6Group` has been renamed to `toGroup6`');

当我在节点项目中导入ip-address时...

var ipAddress = require('ip-address');

......然后我没有遇到任何问题.

当我在SystemJS项目中导入ip-address时......

System.import('ip-address');

...然后我收到一个错误:

util.deprecate is not a function

如何配置SystemJS以执行此导入？目前我正在配置它......

const map: any = {
  'ip-address':'vendor/ip-address',
  'util':'vendor/util-deprecate'
}

const packages: any = {
  'ip-address': {main:'ip-address.js'},
  'util': {main: 'browser'}
};

为了保存查找,util-deprecate的browser.js文件在这里,它直接导出deprecate函数.

注意,如果我修改ip-address模块​​以便所有调用都是以下形式,我可以使用它:

Address4.prototype.toV6Group =
  util(Address4.prototype.toGroup6,
    'deprecated: `toV6Group` has been renamed to `toGroup6`');

如果我可以避免它,我宁愿不修改第三方库.

我正在尝试在Angular2项目中使用bootstrap-tagsinput库.使用package.jsonfile 安装库:

  "dependencies": {
    ...
    "bootstrap-tagsinput": "^0.7.1",
    ...
  }

现在我有一个bootstrap-tagsinput文件夹node_modules.我想在特定组件中使用tagsinput.我看到目录中有一个bootstrap-tagsinput-angular.js文件node_modules/bootstrap-tagsinput/dist,但我无法正常使用它.

我应该在index.html中添加JS文件,以便bootstrap-tagsinput可用于所有组件吗？或者有没有办法在需要的地方导入它？

换句话说,有没有办法做这样的事情:

mycomponent.component.html:

<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput"/>

mycomponent.component.ts:

import {Component, AfterViewInit} from '@angular/core';
import {TagsInputComponents} from 'bootstrap-tagsinput'; // Something like that?!?

@Component({
    ...
})

export class MyComponentComponent implements AfterViewInit {

    ngAfterViewInit():any {
        $('input').tagsinput('refresh');
    }
}

非常感谢你的帮助!

我正在使用Angular2和SystemJS来创建Web应用程序.我的应用程序和路由器配置中有一些模块,我使用延迟加载来打开它们.

这是我的应用程序的路由文件,延迟加载两个模块:

const appRoutes: Routes = [
    { path: '', component: MainComponent,
        canActivate: [AuthGuard],
        children: [
            { path: 'dashboard', component: DashboardComponent },
            { path: 'first-section', loadChildren: 'app/modules/FIRST-SECTION/first-section.module' },
            { path: 'second-section', loadChildren: 'app/modules/SECOND-SECTION/second-section.module' },
            { path: 'documents', component: DocumentsComponent },
            { path: 'users', component: UsersComponent },
            { path: '', redirectTo: 'dashboard', pathMatch: 'full' }
        ]
    }
];

我使用Gulp为开发服务器和生产构建创建任务.对于构建,我使用SystemJS Builder为整个应用程序创建缩小的JS文件.

gulp.task('app-bundle', function() {
    var builder = new Builder('src', 'src/systemjs.config.js');

    return builder.buildStatic('app/main.js', 'build/scripts/app.min.js', { minify: true });
});

但是......如果我尝试在构建包上运行服务器,那么当它试图运行延迟加载的模块时应用程序不起作用.它给了我以下错误:

GET http://127.0.0.1:8080/app/modules/FIRST-SECTION/first-section.module 404 …

我可以成功地将我的Typescript项目捆绑在一起，并使用例如将其保存为单个文件

tsc --outFile "build/bundle.js"

但是，此文件仅包含Typescript文件，并且不包含“ node_modules”目录中的任何文件，例如jQuery。如果我尝试执行捆绑软件，我将得到无法找到文件的错误。

如何将Typescript依赖的“ node_modules”文件添加到相同的单个捆绑文件中？Typescript显然知道文件在哪里，因为它具有正确的路径。

我正在使用SystemJS在浏览器中加载我的项目。我承认我很困惑我该如何去加载模块和捆绑（我可以使用SystemJS捆绑器？），却不理解为什么这样做的途径很多。

我按照https://www.danylkoweb.com/Blog/getting-started-with-aurelia-in-aspnet-mvc-EH上的说明,步骤3-5将Aurelia安装到我的asp.net mvc核心app(即运行npm install,jspm init,jspm install aurelia-framework和jspm install aurelia-bootstrapper).

我的"启动代码"现在看起来像这样:

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
    SystemJS.import('aurelia-bootstrapper');
</script>

当我运行应用程序时,我可以在Chrome开发工具上看到很多Aurelia资源(js文件)被加载到/ jspm_packages/npm文件夹下,但是我也得到如下错误:

未捕获(承诺)错误:(SystemJS)XHR错误(404 Not Found)loading http:// localhost:39535/aurelia-pal-browser.js 错误:XHR错误(404 Not Found)loading http:// localhost:39535 /aurelia-pal-browser.js 加载http:// localhost:39535/aurelia-pal-browser.js时出错

出于某种原因,SystemJS开始在我的应用程序的根目录中查找aurelia-pal-browser.js.我想它找不到jspm_packages \npm\aurelia-pal-browser@1.1.0文件夹,但它在那里,我在config.js文件中有相同的版本号.

运行jspm命令后,我得到了完整的config.js:

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: false,
  paths: {
    "npm:*": "jspm_packages/npm/*"
  },

  map: {
    "aurelia-bootstrapper": "npm:aurelia-bootstrapper@2.0.1",
    "aurelia-framework": "npm:aurelia-framework@1.0.8",
    "npm:aurelia-binding@1.1.1": {
      "aurelia-logging": "npm:aurelia-logging@1.2.0",
      "aurelia-metadata": "npm:aurelia-metadata@1.0.3",
      "aurelia-pal": "npm:aurelia-pal@1.2.0",
      "aurelia-task-queue": "npm:aurelia-task-queue@1.1.0"
    },
    "npm:aurelia-bootstrapper@2.0.1": {
      "aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.1",
      "aurelia-framework": "npm:aurelia-framework@1.0.8",
      "aurelia-history": "npm:aurelia-history@1.0.0",
      "aurelia-history-browser": "npm:aurelia-history-browser@1.0.0",
      "aurelia-loader-default": "npm:aurelia-loader-default@1.0.0",
      "aurelia-logging-console": …

我有一个角度2应用程序在firefox和chrome内部工作,而不是内部(叹气)IE.基于我的堆栈跟踪,看起来我的System js设置存在问题.

以下是我在Web控制台中看到的错误说明.

Error: (SystemJS) Syntax error
SyntaxError: Syntax error
   at ZoneDelegate.prototype.invoke (http://localhost:8050/node_modules/zone.js/dist/zone.js:230:13)
   at Zone.prototype.run (http://localhost:8050/node_modules/zone.js/dist/zone.js:114:17)
   at Anonymous function (http://localhost:8050/node_modules/zone.js/dist/zone.js:502:17)
Evaluating http://localhost:8050/app/app.module.js
Error loading http://localhost:8050/app/app.module.js as "./app.module" from http://localhost:8050/app/main.js

看起来好像找不到我的

app/app.module.js

但正如我所说,我没有使用firefox和chrome这个问题.

我在网上看了一下,发现了一些关于polyfill shims的东西..所以我尝试在index.html中包含以下内容

<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system-polyfills.src.js"></script>

我希望这可以快速修复,但看起来并非如此.有没有人对如何从这一点着手进行任何推荐？

编辑:

我发现了一个404,我进入IE 11 Web控制台.

看起来请求正在尝试命中

URL Protocol    Method  Result  Type    Received    Taken   Initiator   Wait??  Start?? Request??   Response??  Cache read??    Gap??
/node_modules/systemjs/dist/Promise.js.map  HTTP    GET 404 text/html   210 B   16 ms   XMLHttpRequest  140 0   16  0   0   5266

或者在systemjs文件夹中的Promise.js.map,我没有它.

所以,一些新的问题

1)为什么在我尝试过的其他浏览器中没有提出/不要求此请求？

2)这个文件做了什么,我从哪里得到它？我仍然不确定在抓住这个之后我的语法错误是否会清楚,但它似乎是一个合理的起点.

我也注意到删除/评论后 …

我正在关注JSPM入门指南,我想安装jquery包,所以我执行下面的命令.

jspm install jquery

但是当我尝试在下面的打字稿中导入它时

import $ from 'jquery'

我从typescript编译器得到一个错误说error TS2307: Cannot find module 'jquery'.不仅对于其他库的这个库我得到了同样的错误.

我正在尝试找出一个与开发工作流程相配的良好生产工作流程.需要从构建中排除1MB的外部库,然后使用CDN单独托管它们.所以我们有这个:

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

这很好,main.js中的任何内容都被忽略,因为它已经包含在build.js中.虽然我想这意味着什么时候回到开发热门建设,我们必须先删除build.js？

所以现在我想分离生产的外部依赖项:

builder.buildStatic('app/main.js', 'build.js', {
  externals: ['jquery'],
  globalName: 'App',
  globalDeps: {
    'jquery': 'jQuery'
  }
});

当我们这样做时,我们需要添加以下行:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2 jquery.min.js"></script>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script src="build.js"></script>
<script>
    System.import('app/main.js');
</script>

这意味着当我们切换回开发构建时,jQuery将被双重捆绑到main.js中？然后是SystemJS的片段:

System.config({
    bundles: {
      'build/core': ['jquery']
    }
});
System.import('app/main.js');

不知道如何使用它,因为现在我们不会使用CDN来托管jQuery.所以对我而言,这有点像是一个问题22. JSPM非常棒,因为它为您提供了包管理,但是要在生产中使用您需要的包.因此,如果我们必须在页面中包含脚本标记,那么首先不会破坏JSPM的目的吗？

关于如何制作一个漂亮而简单的开发/制作工作流程的任何想法,当我们想要在两者之间切换时,我们不必更改代码？我们想要这样的东西:

$ npm运行生产

$ npm运行开发

这样,在运行两者之前无需在页面中更改任何类型的HTML.我在不同的SystemJS和JSPM工作流程上查了几个小时,似乎无法找到解决所有问题的方法.

SystemJS是否在任何地方用于生产,或者这仍然被认为是一种实验性技术？我已经看到有一个新的即将推出的HTTP/2标准,它将动态地动态加载模块,这是否意味着它切换到SystemJS或者被遗忘？