我正在尝试为Angular2 Typescript(SystemJS Gulp4)创建自己的初学者项目,但是当我在与 JavaScript相同的文件夹中编译TypeScript并访问node_modules文件夹以将所有内容放入时,我遇到了一些问题.一个dist文件夹(带编译JavaScript的dist / js和供应商文件的dist / js / lib(angular2.dev.js,http.dev.js,router.dev.js,Rx.js,system.src.js等) )).
你可以找到完整的项目on github (souldreamer/event-planner).
有人愿意采取一个雄鹅,看看我做错了什么?它可能是index.html中的SystemJS配置,因为根据我尝试的配置,我要么没有实际加载boot.js(网络选项卡显示所有内容都已加载,但System.import()承诺永远不会解析),或像core_1.Component这样的错误不是函数或core_1.当我还添加InputComponent时,输入不是函数.
注意:在你考虑将其标记为重复之前,我一直在搜索网络和版本. StackOverflow过去几天,并尝试了我能找到的每一个变体,所以它并不是一个真正的重复问题(即使有很多类似的问题).
这里包括一些我认为可能相关的部分,以防您不想查看整个项目:
> TypeScript编译(Gulp4任务):
function tsCompile() {
var tsResult = gulp
.src(['./app/**/*.ts', './typings/**/*.ts'])
.pipe(sourcemaps.init())
.pipe(tsc(tsc.createProject('tsconfig.json')));
return merge([
tsResult.dts.pipe(gulp.dest('./typings/typescriptApp.d.ts')),
tsResult.js
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dist/js'))
]);
}
> tsconfig.json
{
"compilerOptions": {
"outDir": "dist/js",
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
"exclude": [
"node_modules"
]
}
> index.html
<head>
<base href="/">
<link rel="stylesheet" href="styles.css">
<!-- inject:libs -->
<!-- add wanted libs to gulpfile -->
<!-- this is replaced by the gulp task runner -->
<!-- lib order: -->
<!-- angular2-polyfills, system.src, Rx, -->
<!-- angular2.dev, router.dev, http.dev -->
<!-- endinject -->
<script>
System.config({
baseUrl: './', // same result with this omitted
transpiler: 'typescript', // same result with this omitted
defaultJSExtensions: true,
bundles: {
'./js/lib/angular2.dev.js': ['angular2/*']
},
packages: {
js: {
format: 'register',
defaultExtension: 'js'
}
},
paths: {
'angular/http': './js/lib/router.dev.js',
'angular/router': './js/lib/http.dev.js',
'angular2/*': './js/lib/angular2.dev.js',
'rx/*': './js/lib/Rx.js'
}
});
System.import('js/boot')
.then(
function() {console.log('loaded')},
console.error.bind(console)
);
</script>
</head>
<body>
<main-app>Loading...</main-app>
</body>
</html>
> boot.ts(实际的Angular2应用程序是无关紧要的,它应该按原样工作,错误不在这里,为了完整性而包括在内)
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './components/app.component';
bootstrap(AppComponent, []);
> app.component.ts(实际的Angular2应用程序是无关紧要的,它应该按原样工作,错误不在这里,为了完整性而包括在内)
import {Component} from 'angular2/core';
import {InputComponent} from './input.component';
@Component({
selector: 'main-app',
template: `<h1>Hi!</h1>
<input-component label="A"></input-component>
<input-component label="B"></input-component>
`,
directives: [InputComponent]
})
export class AppComponent {
}
> input.component.ts(实际的Angular2应用程序是无关紧要的,它应该按原样工作,错误不在这里,为了完整性而包括在内)
import {Component, Input} from 'angular2/core';
@Component({
selector: 'input-component',
template: `
<label [attr.for]="inputName">{{label}}
<input #input [attr.id]="inputName" type="text"></label>
`,
styles: [
`label { color: red; }`
]
})
export class InputComponent {
public static latestId: number = 0;
private inputId: number = InputComponent.latestId;
@Input() public label: string = '';
constructor() {
InputComponent.latestId++;
}
get inputName(): string {
return 'input-' + this.inputId;
}
}
最佳答案 我设法找到解决方案,System.config()参数是错误的.这是有类似问题的人的工作版本:
System.config({
packages: {
js: {
format: 'register',
defaultExtension: 'js'
}
}
});
其余的显然是照顾自己.