标签: systemjs

如何使用 JSX 在本地运行 SystemJS/React 演示？

我目前正在关注这个视频教程，但我坚持使用简单的 HelloWorld 应用程序。在时间位置12m:31s是我卡住的地方它应该显示HelloWorld但它没有。

该应用程序使用 SystemJs、React 和 JSX。

要创建应用程序，请在终端中执行以下步骤（需要节点和 jspm）：

npm init（enter对所有人）
jspm init（enter几乎所有人，除了使用 babel）
jspm install fetch=npm:whatwg-fetch
jspm install react
创建一个应用程序子文件夹创建main.js并将我的代码复制到其中
创建index.html到根目录。
然后用服务运行它

我认为问题是我的本地服务器。我用 nodejs 运行它，http-server我认为 JSX 没有转换为 JS。也提到的serve服务器不工作。

我在浏览器控制台中收到此错误消息：

Potentially unhandled rejection [3] SyntaxError: Error loading "app/main"
[...] Unexpected token <

Run Code Online (Sandbox Code Playgroud)

我如何使它工作？

这是我的代码，正是视频中的代码（它不会在这里运行，因为没有添加 js 文件）：

Potentially unhandled rejection [3] SyntaxError: Error loading "app/main"
[...] Unexpected token < …

Run Code Online (Sandbox Code Playgroud)

javascript reactjs systemjs react-jsx

5
推荐指数

2
解决办法

3879
查看次数

如何使用SystemJS将角度TypeScript与内部模块捆绑在一起

我们正在考虑将一些角度项目移到打字稿上,并在内部模块/命名空间方面遇到一些麻烦.

我们在github上发布了这个工作示例:https: //github.com/hikirsch/TypeScriptSystemJSAngularSampleApp

脚步:

npm install jspm -g
npm install
cd src/
jspm install
jspm install --dev
cd ..
gulp bundle
cd src/
python -m SimpleHTTPServer

Run Code Online (Sandbox Code Playgroud)

这是应用程序的要点:index.ts

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

import * as angular from 'angular';

import {ExampleCtrl} from './controllers/ExampleCtrl';
import {ExampleTwoCtrl} from './controllers/ExampleTwoCtrl';

export var app = angular.module("myApp", []);

app.controller("ExampleCtrl", ExampleCtrl);
app.controller("ExampleTwoCtrl", ExampleTwoCtrl);

Run Code Online (Sandbox Code Playgroud)

ExampleCtrl.ts

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


export class ExampleCtrl {
    public static $inject:Array<string> = [];

    constructor() …

Run Code Online (Sandbox Code Playgroud)

angularjs typescript ecmascript-6 systemjs es6-module-loader

5
推荐指数

1
解决办法

8323
查看次数

JSPM和Typescript导入

我正在尝试使用Typescript和SystemJS工作Angular2,但我遇到了导入问题.

使用此导入(或任何其他angular2导入)

import {bootstrap} from 'angular2/platform/browser';

Run Code Online (Sandbox Code Playgroud)

我得到Webstorm和tsc编译错误(WS:无法解析目录,tsc:找不到模块),即使jspm_packages/npm/angular2@2.0.0-beta.0中有angular2

我的目录结构是

browser
    components
        app.component.ts
    bootstrap.ts
    index.html
node_modules
jspm_packages
jspm.config.js
package.json
tsconfig.json

Run Code Online (Sandbox Code Playgroud)

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "filesGlob": [
    "!./node_modules/**/*.ts",
    "!./jspm_packages/**/*.ts",
    "./**/*.ts"
  ]
}

Run Code Online (Sandbox Code Playgroud)

并在jspm.config.js中配置

System.config({
    defaultJSExtensions: true,
    transpiler: "typescript",
    paths: {
        "github:*": "../jspm_packages/github/*",
        "npm:*": "../jspm_packages/npm/*"
    }})

Run Code Online (Sandbox Code Playgroud)

这段代码以某种方式工作,但编译器似乎很困惑,有更好(或正确)的方法如何做到这一点？谢谢

typescript systemjs angular

5
推荐指数

1
解决办法

616
查看次数

系统JS没有加载模块

当我在使用Angular 2时,我遇到了一个奇怪的问题.

一切都运行良好一段时间,但看似随机的System JS再也找不到模块了......

我收到此错误消息:

GET http://localhost:9000/angular2/platform/browser.js 404 (Not Found) @ system.src.js:4891(anonymous function) @ system.src.js:4891
GET http://localhost:9000/angular2/core.js 404 (Not Found) @ system.src.js:4891
GET http://localhost:9000/angular2/router.js 404 (Not Found) @ system.src.js:4891
GET http://localhost:9000/angular2/http.js 404 (Not Found) @ system.src.js:4891
GET http://localhost:9000/angular2/core.js 404 (Not Found) @ system.src.js:4891
GET http://localhost:9000/angular2/http.js 404 (Not Found) @ system.src.js:4891
GET http://localhost:9000/angular2/src/facade/lang.js 404 (Not Found) @ system.src.js:4891
GET http://localhost:9000/angular2/router.js 404 (Not Found) @ system.src.js:4891

Run Code Online (Sandbox Code Playgroud)

有时它更有时候它会减少错误......

最奇怪的是,在等待一段时间并试图一遍又一遍地刷新页面后,应用程序神奇地再次开始工作!

我使用systemjs@0.19.20和angular2@2.0.0-beta.3(当时最新).

带有SystemJS配置的index.html的脚本部分如下所示:

<script src="./node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="./node_modules/es6-shim/es6-shim.min.js"></script>
<script src="./node_modules/systemjs/dist/system.js"></script>
<script>
  //configure system loader
  System.config({
    defaultJSExtensions: …

Run Code Online (Sandbox Code Playgroud)

javascript typescript systemjs angular

5
推荐指数

1
解决办法

4823
查看次数

用于TypeScript应用程序测试的Angular 2 - 规格在茉莉花中多次出现

我已经按照本教程测试Angular 2应用程序:https://angular.io/docs/ts/latest/guide/testing.html

完成该First app test部分后,unit-tests.html我看到我的规范报告多次出现:

虽然我没有对教程代码进行任何更改,但是为了快速参考,我的unit-tests.html是:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Ng App Unit Tests</title>

    <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">

    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
    <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
</head>
<body>
<!-- #1. add the system.js library -->
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script>
    // #2. Configure systemjs to use the .js extension
    //     for imports from the app folder
    System.config({
        packages: {
            'app': {defaultExtension: 'js'}
        }
    });

    // #3. Import the spec file explicitly
    System.import('app/hero.spec')

    // …

Run Code Online (Sandbox Code Playgroud)

jasmine typescript systemjs angular

5
推荐指数

1
解决办法

1729
查看次数

使用SystemJS将ng2-ace库集成到新创建的angular-cli(angular2)项目中

我刚刚使用最新的angular-cli 工具创建了一个angular2项目.我现在想要使用ng2-ace库来启动和运行ace编辑器.我想使用SystemJS作为模块加载器以干净的方式进行.

我做到了

npm install --save ng2-ace

Run Code Online (Sandbox Code Playgroud)

然后我将以下两行添加angular-cli-builds.js到vendorNpmFiles数组中

'ng2-ace/index.js',
'brace/**/*.js

Run Code Online (Sandbox Code Playgroud)

然后我添加了以下内容 system-config.ts

 const map: any = {
   'ng2-ace': 'vendor/ng2-ace',
   'brace': 'vendor/brace'
 };

 /** User packages configuration. */
 const packages: any = {
   'brace': {
     format: 'cjs',
     defaultExtension: 'js',
     main: 'index.js'
   },
   'ng2-ace': {
     format: 'cjs',
     defaultExtension: 'js',
     main: 'index.js'
   }
 };

Run Code Online (Sandbox Code Playgroud)

现在我尝试从组件导入指令

import { AceEditorDirective } from 'ng2-ace';

Run Code Online (Sandbox Code Playgroud)

这使编译器ng serve中止以下错误:

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following …

Run Code Online (Sandbox Code Playgroud)

javascript angularjs systemjs angular

5
推荐指数

1
解决办法

1030
查看次数

使用Webpack编写12因子应用程序？

您将如何编写12因子的webpack / expressjs应用程序？特别是，我希望在运行时通过expressjs服务器上的环境变量提供一些应用程序配置。

目前，我在<script>标签中创建了一个全局Config对象，并通过渲染模板和传递值来填充它，但是我想使用webpack外部并将其包装为适当的模块。有没有人尝试这样做，或者有类似的解决方案？

12factor systemjs webpack

5
推荐指数

1
解决办法

237
查看次数

Kendo UI Angular:(SystemJS)意外的令牌<

我在使用IIS的ASP.NET Core解决方案上使用VS2015 RC3,Angular2 2.0.0.

每当我尝试添加新的UI模块(如下拉菜单或输入)时,我都会收到SystemJS错误,但奇怪的是我的按钮工作没有任何问题......

master.module.ts:

import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs';

@NgModule({
    imports: [
        CommonModule,
        MasterRouting,
        ButtonsModule,  // => Works fine and button is showing as expected 
        InputsModule,   // Error : Unexpected Token
        DropDownsModule // Error : Unexpected Token
    ],
    [...]

Run Code Online (Sandbox Code Playgroud)

我得到这些错误(取决于我尝试在"imports"数组中添加的模块:

InputsModule错误:指向master.modules.ts中的导入行

zone.js:192错误:(SystemJS)意外的标记<SyntaxError:意外的标记<at Object.eval(http:// localhost:39351/app/master/master.module.js:35:30)

DropdownnsModule错误:

zone.js:192错误:(SystemJS)意外的标记<SyntaxError:意外的标记<at Object.eval(http:// localhost:39351/node_modules/@ progress/kendo-angular-dropdowns/dist/npm/js/combobox. component.js:630:19)

这个显示了我在kendo库中的导入:

module.exports = require("@ telerik/kendo-dropdowns-common/dist/npm/js/bundle");

我确保我在wwwroot中有...

编辑: …

typescript systemjs kendo-ui-angular2 angular

5
推荐指数

1
解决办法

1196
查看次数

Angular 2.2和SystemJS:部署RXJS

我正在部署一个网站,但由于我使用的是Angular的最终版本,因此我无法"捆绑"rxjs.我只能通过复制我网站上的整个文件夹node_modules/rxjs来部署rxjs .

这是我对SystemJS的配置

    System.config({
        map: {
            'lodash':'http://127.0.0.1/js/lodash.min.js',
            '@angular/core': 'http://127.0.0.1/js/core.umd.min.js',
            '@angular/compiler': 'http://127.0.0.1/js/compiler.umd.min.js',
            '@angular/common': 'http://127.0.0.1/js/common.umd.min.js',
            '@angular/http': 'http://127.0.0.1/js/http.umd.min.js',
            '@angular/platform-browser': 'http://127.0.0.1/js/platform-browser.umd.min.js',
            '@angular/platform-browser-dynamic': 'http://127.0.0.1/js/platform-browser-dynamic.umd.min.js',
            '@angular/router': 'http://127.0.0.1/js/router.umd.min.js',
            '@angular/forms': 'http://127.0.0.1/js/forms.umd.min.js',
            '@angular/upgrade': 'http://127.0.0.1/js/upgrade/bundles/upgrade.umd.js',
            'rxjs':'http://127.0.0.1/js/vendors.bundle.js'
        },
        packages: {
            '/js': {
                defaultExtension: 'js'
            }
        },
        bundles: {
            '/js/app.bundle': ['main']
        }
    });

    document.addEventListener('DOMContentLoaded', function () {
        System.import('main').then(null, console.error.bind(console));
    });

Run Code Online (Sandbox Code Playgroud)

我使用以下Gulp脚本在vendors.bundle.js中包含rxjs :

    gulp.task('vendor.bundle', function() {
        gulp.src([
            'node_modules/systemjs/dist/system-polyfills.js',
            'node_modules/zone.js/dist/zone.min.js',
            'node_modules/reflect-metadata/Reflect.js',
            'node_modules/systemjs/dist/system.src.js',
            'node_modules/rxjs/bundles/Rx.min.js'
        ])
            .pipe(concat('vendors.bundle.js'))
            //.pipe(uglify())
            .pipe(gulp.dest('./dist/js'));
    });

Run Code Online (Sandbox Code Playgroud)

我有以下错误:

VM9314:3GET http://127.0.0.1/js/vendors.bundle.js/add/operator/map.js 404(未找到)...加载http://127.0.0.1/js/vendors.bundle时出错. js/add/operator/map.js为"rxjs/add/operator/map",来自http://127.0.0.1/services/global-services/global.services

这是一个问题,因为当我们部署整个文件夹时,会产生大量请求以获取所有rxjs/*.js文件并且意味着主要在移动设备上表现不佳.

当我只部署 …

rxjs systemjs angular

5
推荐指数

1
解决办法

728
查看次数

使用System.js导入Typescript编译的模块时出错

我最近学习使用system.js导入由Typescript编译的模块.这些模块以前是为require.js编译的,工作正常.

但是,在合并到system.js时,在应用system-production.js时无法导入模块.控制台说

Uncaught (in promise) Error: Module instantiation did not call an anonymous or correctly named System.register.
   Instantiating https://www.star.com/libs/js/klondike.js
   Loading ./libs/js/klondike.js
    at register-loader.js:203
t           @ common.js:83
(anonymous) @ loader-polyfill.js:70

Run Code Online (Sandbox Code Playgroud)

我不太明白是什么原因导致错误消息.当我应用system.src.js时,不会有错误消息,但我不能在导入的模块中使用函数.任何调用都将返回undefined.那么我的运作方式是否错误？

以下是源代码.

的test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>

<!-- sys import -->
<script src="libs/js/system-production.js"></script>

<!--<script src="libs/js/system.src.js"></script>-->

<script>
    System.import("./libs/js/klondike.js");
</script>

</html>

Run Code Online (Sandbox Code Playgroud)

tsconfig.json

{
  "compilerOptions": {
    "module": "System",
    "outFile": "../../js/klondike.js",
    "target": "es5",
    "sourceMap": true,
    "removeComments": true
  },
    "include": [
    "./*"
  ]
}

Run Code Online (Sandbox Code Playgroud)

主要模块:CardMoves.ts …

javascript typescript systemjs

5
推荐指数

1
解决办法

586
查看次数

标签统计

ecmascript-6 ×1

es6-module-loader ×1

kendo-ui-angular2 ×1

rxjs ×1

«
1
…
16
17
18
19
20
…
24
»