这是带有angular-alpha35的index.html:
<html>
<head>
<meta charset="UTF-8">
<base href="/">
<title>APP Ang2</title>
<script src="scripts/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="scripts/bundle35/angular2.dev.js"></script>
<script src="scripts/bundle35/router.dev.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<app>Loading...</app>
<script>System.import('app').catch(console.log.bind(console));</script>
</body>
</html>
如果有互联网连接并且system.js可以加载,它工作正常.如果我尝试获取system.js的本地副本,如下所示:
<script src="scripts/system@0.16.11.js"></script>
然后没有任何作用,直到我放入rx.js根文件夹并将此行放在文件的末尾:
<script src="scripts/es6-module-loader@0.16.6.js"></script>
</body>
</html>
然后System.js工作正常,但在这种情况下,angular2绑定有一个奇怪的问题.在我与页面进行一些交互之前它们不工作(提交表单,打开一个选择,使一些div改变它的尺寸,即使是简单的隐藏等等).只要页面上的内容发生变化,所有绑定就会起作用,页面就会重新生成.
如何在没有node.js且没有互联网连接的情况下使所有这些工作在本地工作？
我在Aurelia应用程序中写了以下内容
import "bootstrap/css/bootstrap.css!";
import "./app.css!";
我希望app.css位于第二位,因为它会覆盖bootstrap.css样式.但是,我首先得到app.css,因为我假设system.js加载器并行运行它们,因为app.css是它首先加载的两个中较小的一个.
有没有办法在jspm中定义这两个文件之间的依赖关系来控制它们的加载顺序是否还有其他一些方法？
提前谢谢了!:)
我意识到我可以编译我的应用程序,tsc my_app.ts --target system它将为每个导入的模块生成一个SystemJS包装文件,这很棒,但它生成匿名(无名)函数,所以我不能只将它们连接到一个文件.
我想过提出这个问题"如何将TypeScript编译为命名的SystemJS模块",但我的目标只是将我的Angular2应用程序编译为单个文件SystemJS.
我正在使用Angular 2,SystemJS和Karma构建一个Web应用程序进行测试.
我正在尝试在测试中加载节点模块ngrx/store:
import {
it, describe, expect, beforeEach, inject
} from 'angular2/testing';
import { Store } from '@ngrx/store';
describe('Graphs store', () => {
let graphs;
beforeEach(inject([Store], (store: Store<any>) => {
graphs = store.select('graphs');
}));
it('works', () => {
// expect graphs to do something...
});
});
但是,我的测试失败并显示以下消息:
404: /@ngrx/store
Chrome 48.0.2564 (Mac OS X 10.11.3) ERROR
Error: XHR error (404 Not Found) loading http://localhost:9876/@ngrx/store
我在dev中也遇到了同样的问题,结果发现SystemJS不知道在哪里可以找到@ngrx/store.为了解决这个问题,我这样做了:
System.config({
packages: {
src: {
format: 'register',
defaultExtension: 'js'
} …我正在努力学习ng2的绳索,依赖注射系统正在扼杀我.
我正在使用ng快速入门:https: //github.com/angular/quickstart/blob/master/README.md
我正在尝试将此软件包导入应用程序:https://www.npmjs.com/package/arpad.我通过npm update安装了包,我的package.json依赖项如下所示:
"dependencies": {
"angular2": "2.0.0-beta.9",
"systemjs": "0.19.24",
"es6-promise": "^3.0.2",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15",
"arpad":"^0.1.2" <----- the package i'm trying to import
}
这是包导出其代码的方式:
module.exports = ELO;
我有一个组件导入模块,如下所示:
import {ELO} from 'node_modules/arpad/index.js';
这是systemJS在应用程序的index.html中的配置方式:
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
map:{'arpad':'node_modules/arpad'} <---- here
});
System.import('node_modules/arpad/index.js'); <--- and here for good measure
System.import('app/main')
.then(null, console.error.bind(console));
</script>
现在,它看起来很像我在黑暗中拍摄,这正是应用程序控制台中的错误消息让我做的事情.当我尝试在组件中使用这样的模块时:
public elo = ELO;
constructor(){
this.score …angular 2官方网站上的快速入门部分介绍了如何运行最简单的角度2应用程序.默认情况下,SystemJS用作模块加载器.还有一个说明,说有其他选择可以正常工作.我理解模块加载器的好处,但是有没有办法在没有任何模块加载器的情况下运行angular 2 app？
当我只是删除SystemJS配置和SystemJS源脚本标记时,我在控制台中收到错误angular2.dev.js:
Uncaught ReferenceError: System is not defined
看起来像angular 2本身使用SystemJS.那么,有没有办法在没有任何模块加载器的情况下使用角度2？
我有一个用TypeScript编写的Node.js和AngularJS应用程序,我正在尝试使用System.js加载模块.
如果我只导入一个类来指定一个类型,它工作正常.例如:
import {BlogModel} from "./model"
var model: BlogModel;
但是,当我尝试使用导入的类实例化变量时,我在运行时获得异常.例如:
import {BlogModel} from "./model"
var model: BlogModel = new BlogModel();
未捕获的ReferenceError:未定义require
我使用CommonJS.我不能使用AMD,因为我有一个服务器端和客户端项目.这就是我使用System.js在客户端加载模块的原因.
这是我的System.js定义:
<script src="/assets/libs/systemjs-master/dist/system-polyfills.js"></script>
<script src="/assets/libs/systemjs-master/dist/system.src.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('classes.ts')
.then(null, console.error.bind(console));
System.import('model.ts')
.then(null, console.error.bind(console));
</script>
这是model.ts文件的内容:
import {User} from "./classes";
import {Post} from "./classes";
export class BlogModel{
private _currentUser: User;
private _posts: Post[];
get currentUser(){
return this._currentUser;
}
set currentUser(value: User){
this._currentUser = value;
}
get posts(){
return …我有以下文件和代码
index.html:
<!doctype html>
<html>
<head lang="en">
<title>Angular 2 Components</title>
</head>
<body>
<ngc-app></ngc-app>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2-polyfills.js"></script>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('lib/bootstrap.js');
</script>
</body>
</html>
bootstrap.js:
// Import Angular bootstrap function
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
// Import our main app component
import {App} from './app';
// We are bootstrapping Angular using our main application component
bootstrap(App);
app.js:
// We need the Component annotation as well as the
// ViewEncapsulation enumeration
import {Component, ViewEncapsulation} from '@angular/core';
// …我正在努力使SystemJS与Typescript一起工作,但它们似乎相互冲突.
如何在没有与Typescript上的关键字冲突的情况下利用System.js中的自动加载？使用import/require使得Typescript使用它自己的方式来加载和引用文件,虽然它翻译export为module.exports = ...,但它不会做同样的事情import
是否有可能实现这一点,或者我将不得不等待Typescript支持ES6关键字？
我在下面的plunker中收到以下错误.
无法设置只有getter的[object Object]的属性堆栈
Plunker在这里 https://plnkr.co/edit/IP1ssat2Gpu1Cra495u2?p=preview
代码如下:
//our root app component
import {Component, NgModule, OnInit, Injectable} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { HttpModule, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
class MyModel {
public name: string;
public value: string;
}
@Injectable()
export class MyService {
constructor(public http: Http) {
}
getData (request: MyModel):Promise<MyModel>{
return this.http.get('https://run.plnkr.co/j2Cw0yaD5Dn7ENaR/mymodel.json')
.toPromise()
.then(response => {
return response as MyModel;
});
}
}
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
</div>
`,
})
export class App …systemjs ×10
angular ×7
typescript ×5
commonjs ×2
angularjs ×1
aurelia ×1
browserify ×1
javascript ×1
jspm ×1
karma-runner ×1
rxjs ×1
tsc ×1
webpack ×1