标签: systemjs
TypeScript + SystemJS使用JSON和Text插件
将TypeScript与SystemJS一起使用,如何使用？导入JSON文件plugin-json？
如果我写,System.import('myjson.json!json').then(...)那么它会异步导入它,而不是作为其一部分System.register([...]).
那么,我如何导入JSON文件作为一部分System.register([...])并说服TypeScript同意这一点？(没有then Promise语法).
注意:
我正在使用tsc旗帜-m system
更新:
一个可能的解决方案是使用-m umd选项tsc代替-m system,然后我可以执行以下操作:
/// <reference path="typings/requirejs/require.d.ts" />
var myJson = require('myJson.json!json')
但是,仍在等待有关使用的答案-m system.
推荐指数
解决办法
查看次数
未捕获的TypeError:System.import不是函数
此代码应显示div包含Hello World,但我收到错误Uncaught TypeError: System.import is not a function.我正在关注ng-book2的入门教程视频,其中包含以下代码index.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular 2</title>
<script src="js/traceur-runtime-0.0.90.js"></script>
<script src="js/system-0.18.4.js"></script>
<script src="js/angular2-alpha31.js"></script>
</head>
<body>
<script>System.import('js/app');</script>
<hello-world></hello-world>
</body>
</html>
并且app.ts:
/// <reference path="../lib/node_modules/angular2/angular2.d.ts" />
import {
Component,
View,
bootstrap
} from 'angular2/angular2';
// Annotation section
@Component({
selector: 'hello-world'
})
@View({
template: '<div>Hello World</div>'
})
// Component controller
class HelloWorld {
}
bootstrap(HelloWorld);
最后是当前的目录结构:
/ng2
/js
angular2-alpha31.js
app.js
app.js.map
system-0.18.4.js
system-0.18.4.js.map
traceur-runtime-0.0.90.js
index.html
寻找解决方案,唯一看似相似的问题就是系统存在问题 …
推荐指数
解决办法
查看次数
Angular 2:系统导入应用程序无法在没有文件扩展名的情
我对Angular和systemjs很新,但我会尝试尽可能更具体.
我正在使用angularjs2和打字稿.我使用tsconfig.json编译我的.ts文件.这是我的配置:
接下来,我想使用systemjs通过index.html引导我的应用程序.但我的导入不接受没有扩展名的init(下面,我的init,实际上工作):
System.config({
transpiler: 'typescript'
});
System.import('src/app.ts');
我被迫提到.ts扩展名(当我想导入手工制作的组件时,ts文件中的问题相同).
我忘记了什么吗？有关首次配置的初学者的文档有点粗略.
此外,我已经调用了所有脚本<head>(system.js,typescript.js,angular2.dev.js)
推荐指数
解决办法
查看次数
SystemJS不会从node_modules加载angular2
我正在尝试将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
我在这里错过了什么？
推荐指数
解决办法
查看次数
DefaultExtension在Angular 2 app中不起作用
我正在尝试使用TypeScript设置基本的Angular 2应用程序.但是我被卡住了,因为SystemJS似乎没有对defaultExtension: 'js'选项做任何事情.
我index.html看起来像这样:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/test/">
<meta charset="UTF-8">
<title>Test</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<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/router.dev.js"></script>
<script>
System.config({ packages: { app: { format: 'register', defaultExtension: 'js', } } });
System.import('backend/app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<app>Loading</app>
</body>
</html>
但是这会给我以下错误:
GET http://localhost:1122/test/backend/app/boot 404 (Not Found)
我可以.js在System.import命令中添加扩展名到路径,所以它看起来像这样:
System.import('backend/app/boot.js')
然后,它是能够找到boot.js,但随后抱怨说,它无法找到app.component.所以基本上我必须.js为该导入以及我将在我的应用程序中拥有的每个其他组件添加一个扩展.
我不认为这是我必须要解决的问题.那么我该如何解决这个 …
推荐指数
解决办法
查看次数
如何用Mocha测试Angular 2？
几天来我一直在反对这个问题,而且无法到达任何地方......我正在尝试使用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 …推荐指数
解决办法
查看次数
Typescript编译器错误TS2307:找不到模块'jquery'
我正在关注JSPM入门指南,我想安装jquery包,所以我执行下面的命令.
jspm install jquery
但是当我尝试在下面的打字稿中导入它时
import $ from 'jquery'
我从typescript编译器得到一个错误说error TS2307: Cannot find module 'jquery'.不仅对于其他库的这个库我得到了同样的错误.
推荐指数
解决办法
查看次数
使用ES6模块进行d3 v4.0自定义构建
我正在尝试使用d3 v4.0的alpha,并尝试在jspm设置中创建自定义构建.我似乎无法理解新的模块化构建是如何工作的.
如果我想从模块导入命名导出,即从d3-request导入json,我可以执行以下操作:
import {json} from "d3-request";在通过jspm/npm安装模块之后.
如果我想同样安装整个库 import d3 from "d3";
如果我想安装多个模块并命名导出并在d3命名空间下将它们全部提供给我(即,在d3-request下导入d3-shape,并在同一d3全局中访问d3.json和d3.line) ,这是什么正确的语法？
我意识到当使用这些模块的独立版本时d3_shape会输出全局变量.这是为了在将这些模块与我的应用程序捆绑在一起时为每个模块设置单独的命名空间吗？
推荐指数
解决办法
查看次数
SystemJS的生产工作流程和通过CDN托管的外部依赖项
我正在尝试找出一个与开发工作流程相配的良好生产工作流程.需要从构建中排除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或者被遗忘？
推荐指数
解决办法
查看次数
奇怪的打字稿/ angular2导入行为
我试图为另一个SO问题创建一个演示,首先是angular-cli,然后是punker.
我import在两个版本之间遇到了奇怪的行为差异.
问题import出现在以下代码中的第二个:
moment.service.ts
import { Injectable } from '@angular/core';
// Following work in plunker setup
import m from 'moment';
// Following work in angular-cli setup
//import * as m from 'moment';
@Injectable()
export class MomentService {
moment = m;
}
在angular-cli代码中,我必须使用:
import * as m from 'moment';
如果我使用punker设置,无论是在punker中还是在运行本地服务器,我必须关注或者它不会在浏览器中运行:
import m from 'moment';
任何人都可以解释行为的差异？
Plunker:链接
Github:plunker代码本地版本(包括一个本地服务的server.js)
Github:angular-cli版本
推荐指数
解决办法
查看次数
标签 统计
systemjs ×10
angular ×6
typescript ×5
javascript ×4
jspm ×3
amd ×1
angular-cli ×1
d3.js ×1
http2 ×1
mocha.js ×1
node.js ×1
rollupjs ×1
unit-testing ×1