所以我正在开发一个NG2 + Typescript + SystemJS项目 - 我已经按照官方的角度快速启动,我的项目工作正常......直到我使用Gulp编译TS并移动源代码到dist目录。这是目录结构:
默认情况下,TS编译器将JS文件与app中的src文件一起输出,并且该站点工作正常。但是,我将其配置为输出到dist,如上所示,现在它不起作用。似乎它可以在dist中找到main.js,但它找不到其他文件,例如dist / services / *,看起来原因是SystemJS没有添加" js"的默认扩展名。
的index.html
<base href="/">
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<link rel="stylesheet" href="styles/structure.css">
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/skins/minimal.css">
<link rel="stylesheet" href="styles/skins/usb.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.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>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
dist: {
format: 'register',
defaultExtension: 'js',
defaultJSExtension: true
}
}
});
System.import('dist/main')
.then(null, console.error.bind(console));
</script>
载入中...
请注意,当我把:
System.import('app/main')
.then(null, console.error.bind(console));
并将编译器设置为与源文件一起输出,这一切都很有效。但是当我将导入切换到dist / main时,它会失败,如上所述。
问如何在这种情况下让SystemJS添加默认的JS扩展?
答案 0 :(得分:3)
似乎你的项目结构与我的项目相同,我已经配置了我的项目设置 -
<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.src.js"></script>
<script>
System.config({
defaultJSExtensions: true,
map: {
rxjs: 'node_modules/rxjs'
},
packages: {
rxjs: {
defaultExtension: 'js'
}
}
});
</script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script>
System.import('dist/app');
</script>
请参阅此回购希望,这可能会对您有所帮助 -