Angular2系统问题 [英] Angular2 systemjs issues
问题描述
我有这个简单的TypeScript Angular 2例子：
I have this simple TypeScript Angular 2 example:
test.ts
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<div>Test</div>'
})
export class TestComponent {}
main.ts
import {bootstrap} from 'angular2/platform/browser'
import {TestComponent} from './components/test.component/test'
bootstrap(TestComponent);
index.html
index.html
<html>
<head>
<title>This is an Angular 2 test</title>
<!-- Angular dependencies -->
<script src="/node_modules/es6-shim/es6-shim.js"></script>
<script src="/node_modules/systemjs/dist/system-polyfills.js"></script>
<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>
<!-- App -->
<script>
System.config({
packages: {
'/': {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('main').then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app></my-app>
</body>
</html>
最后，当我运行'tsc'和我的部署脚本node_modules / angular2，node_modules / systemjs时， node_modules / rxjs和node_modules / es6-shim文件夹与编译的JavaSciprt文件一起复制。然后当我尝试打开index.html，我得到的是这样的：
And finally when I run 'tsc' and my deploy scripts the node_modules/angular2, node_modules/systemjs, node_modules/rxjs and node_modules/es6-shim folders are copied together with the compiled JavaSciprt files. Then when I try to open index.html all I get is this:
Uncaught ReferenceError: require is not defined(anonymous function) @ browser.ts:1
angular2-polyfills.js:138 Error: http://localhost:8080/node_modules/angular2/platform/browser.js did not call System.register or AMD define. If loading a global module configure the global name via the meta exports property for script injection support.(…)run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494lib$es6$promise$$internal$$publishRejection @ angular2-polyfills.js:1444(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
core.ts:6 Uncaught ReferenceError: require is not defined
有人可以给我一个手。我似乎在做Angular2 5分钟快速启动（ https://angular.io/docs/ts/latest/quickstart.html#!#tsconfig ），它只是拒绝为我工作。
Can someone pls give me a hand with this. I seem to be doing more or less the same thing as the Angular2 5-minute quickstart (https://angular.io/docs/ts/latest/quickstart.html#!#tsconfig) and it just refuses to work for me.
感觉就像我还需要将依赖库添加到systemjs中，但是我不知道这样做的正确方法是什么？家伙们可以使用简单的< script>< / script> 标签来进行quistart演示。
It feels like I'd need to also add the dependency libraries to systemjs but I'm not sure what would be the right way to do it and how did the angular2 guys get their quistart demo to work with simple <script></script> tags instead.
tsconfig .json
tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution" : "node",
"sourceMap": true,
"emitDecoratorMetadata": false,
"experimentalDecorators": false,
"removeComments": true,
"noImplicitAny": true,
"noEmitOnError": true,
"outDir": "build"
},
"exclude": [
"build",
"bundle",
"node_modules",
"public",
"scss",
"html",
"templates",
".sass-cache"
]
}
您的帮助将不胜感激！
推荐答案
我认为问题是在SystemJS配置的水平：
I think the problem is at the level of your SystemJS configuration:
System.config({
packages: {
'/': { <----------------
format: 'register',
defaultExtension: 'js'
}
}
});
您应该使用包含您的TypeScript源文件的子文件夹进行更新。这样的东西：
You should update this using the sub folder containing your TypeScript source files. Something like that:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
希望它帮助你，
Thierry
Hope it helps you, Thierry
这篇关于Angular2系统问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
