标签: systemjs

我正在尝试将Angular2添加到我当前的Angular 1.X项目中.我正在使用yo angular启用TypeScript的项目.

我安装了所有东西(使用npm install):

<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'
            }
          },
          paths: {
            'angular2/upgrade': '../node_modules/angular2/upgrade'
          }

        });

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

    </script>

现在,在我的Bootstrap.ts中,我使用:

import {UpgradeAdapter} from 'angular2/upgrade';

打字稿知道如何将它转换成我的.tmp:

var upgrade_1 = require('angular2/upgrade');

但是SystemJS不知道如何加载导入.我收到404错误:

GET http://localhost:9000/node_modules/angular2/upgrade 404 (Not Found)

我的目录结构:

root
- .tmp
- node_modules
- app
|-- index.html
|-- scripts

我在这里错过了什么？

几天来我一直在反对这个问题,而且无法到达任何地方......我正在尝试使用Mocha来测试我的Angular 2应用程序(基于SystemJS,如果它很重要),我就可以'弄清楚如何获取控制器的实例.

我正在尝试我能提出的最简单的案例;

import {bootstrap} from 'angular2/platform/browser';
import {App} from '../app/app';
import {Type} from 'angular2/core';

describe('Login', () => {
    let app:App;

    beforeEach((done) => {
        console.log(bootstrap);
        bootstrap(<Type>App)
            .then(result => result.instance)
            .then(instance => {
                app = instance;
                done();
            });
    });

    it('Test for App to Exist', (done) => {
        console.log(app);
        done();
    });
});

我可以告诉他,console.log(bootstrap)失败的方式,因为我的gulp-mocha任务刚刚死亡(默默地).注释掉bootstrap引用只是做一个虚拟测试;

import {bootstrap} from 'angular2/platform/browser';
import {App} from '../app/app';
import {Type} from 'angular2/core';

describe('Login', () => {
    let app:App;

    beforeEach((done) => {
        done();
    });

    it('Test for App to …

我正在关注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或者被遗忘？

几天来我一直在尝试理解为什么我的浏览器控制台上出现此错误，完整堆栈：

Unhandled Promise rejection: NG0202: This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid.\nThis can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.\n\nPlease check that 1) the type for the parameter at index 0 is correct and 2) the correct Angular decorators are defined for this class and its ancestors. ; Zone: …

捆绑JSPM很简单,这是一个简单的任务:

var exec = require('child_process').exec;

gulp.task('jspmBuild', function (cb) {
        exec('jspm bundle-sfx src/app/app.js dist/app.min.js --skip-source-maps', function (err, stdout, stderr) {
            cb(err);
        });
    });

我想做的是,有两个单独的包,一个用于供应商文件,另一个用于实际应用.

那可能吗？

如何组织像Java包一样的Angular 2 app文件夹结构？

考虑以下项目布局:

app
 |_model
 |_component
 |_service

我想进口foo.service.ts从服务到bar.component.ts的组件.但据我所知,Angular 2导入仅支持相对路径/../service/,这似乎是非常笨重的解决方案.

有没有办法从根文件夹中引用带绝对浴的文件夹,就像使用Java包一样？

我使用angular-cli生成一个新项目.现在我想将socketJs添加到项目中,但在浏览器控制台中不断出现错误:

GET http://localhost:4200/url-parse 404 (Not Found)
GET http://localhost:4200/inherits 404 (Not Found)
Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/url-parse
        at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30)
        at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)
        at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34)
    Error loading http://localhost:4200/url-parse as "url-parse" from http://localhost:4200/vendor/sockjs-client/lib/main.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/url-parse(…)
Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/url-parse(…)
GET http://localhost:4200/json3 404 (Not Found)
GET http://localhost:4200/debug …

将Clarity Design System从他们的官方教程添加到角度为2 5min的快速入门后,我收到了这个错误.浏览器控制台中的错误没有太大帮助,请问有什么建议吗？

zone.js:1382 GET http://localhost:3000/clarity-angular 404 (Not Found)
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/clarity-angular(…)

app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {ClarityModule} from 'clarity-angular';
import {AppComponent} from './app.component';

@NgModule({
  imports: [BrowserModule,
            ClarityModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
}

的index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <link rel="stylesheet" href="node_modules/clarity-icons/clarity-icons.min.css">
    <script src="node_modules/mutationobserver-shim/dist/mutationobserver.min.js"></script>
    <script src="node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
    <script src="node_modules/clarity-icons/clarity-icons.min.js"></script>
    <link rel="stylesheet" …

在Angular2中配置外部项目总是遇到一些麻烦.

我想在我的项目中包含ng2-sharebuttons.(似乎没有全局.d.ts文件？)

虽然README.md只是说npm install ng2-sharebuttons --save,我知道还有更多的东西(systemjs.config&typings)

首先,我尝试配置systemjs.config:

map{
     ......
     'ng2-sharebuttons' : 'node_modules/ng2-sharebuttons'
}

这至少固定在404上localhost/ng2-sharebuttons,但创造了一个新404的localhost/node_modules/ng2-sharebuttons.

所以,我添加了一个主文件,systemjs.config改为

map{
     ......
     'ng2-sharebuttons' : 'node_modules/ng2-sharebuttons/dist/index.js'
}

但现在这导致了404每个孩子ng2-sharebuttons/dist

我尝试过typings install ng2-sharebuttons --save --global,typings install @types/ng2-sharebuttons --save --global无论有没有--global旗帜.

所以在我最后的希望中,我添加了一个参考,看看是否可行.添加

/// <reference path="../../node_modules/ng2-sharebuttons/dist/index.d.ts" />

但这并没有改变任何事情.

我忘记了什么？为什么这么难？(或者我只是努力吗？)

结构和文件ng2-sharebuttons:

最后,Chrome目前正在生成错误消息:

整个 systemjs.config.js

/**
 * System …