我正在尝试构建样板模板，以使用express，angular 2，打字稿，gulp和systemjs引导angular 2应用程序。由于某种原因，我的index.html文件无法识别我的bootstrap.js文件。我所有的jade和typescript位于src。我正在使用gulp将打字稿从转换src为dist，并从node_modules和jspm_packages以快速方式提供我的静态资产。但是，终于到了该调用的时候了System.import，就像这样：System.import('app').catch(console.error.bind(console))，我得到：
Error: SyntaxError: Unexpected token < Evaluating http://localhost:3000/app/bootstrap.js Error loading http://localhost:3000/app/bootstrap.js
该错误似乎是由引起的angular2-polyfills.min.js。
这是我的基本快递后端，可让您大致了解如何处理我的资产和文件（我怀疑我的脑袋暂时搁置，我的路径已关闭）：
const app = express();
app.use('/jspm_packages', express.static('jspm_packages'));
app.use('/node_modules', express.static('node_modules'));
app.get('*', function(req, res) {
const file = fs.readFileSync('src/index.jade').toString();
const html = jade.render(file);
return res.send(html);
});
app.listen(process.env.PORT || 3000);
我的index.html文件位于dist，其中包含所有已转换的javascript的目录。这是packages我的System.config上的属性：
packages: {
"dist": {
"main": "bootstrap",
"format": "system",
"defaultExtension": "js"
}
},
我的印象是，dist该文件夹标识相对于的文件夹BASE_URL（在我的情况下仅为/），而该main属性标识文件名。因此，我认为通过调用System.import('app')，它将在其中的app文件夹中dist查找并找到bootstrap.js用于引导我的angular2应用程序的文件，但事实并非如此。当我打开chrome控制台时，它bootstrap.js没有显示在我的源代码中，因此我猜测某个地方存在路径错误，但是我尝试了所有变化，但似乎无法使其正常工作。
任何帮助将不胜感激，谢谢。
更新：
这是我的index.html：https : //jsfiddle.net/r02r3jk3/这是提供内容的文件夹结构和服务器端代码：https : //jsfiddle.net/cejk0jw3/
当我检查网络标签中对的browser.js文件请求的响应时angular2/platform，我得到以下信息：
请求网址是 http://localhost:3000/jspm_packages/npm/[email protected]/platform/browser.js
响应的内容类型为，Content-Type:text/html; charset=utf-8但响应为我的index.html文件:(
而不是app在System.import('app')它应该是dist这样的：System.import('dist')你的包的定义应该是：
packages: {
"dist": {
"main": "app/bootstrap",
"format": "system",
"defaultExtension": "js"
}
}
更新
既然你index.html是在同一个文件夹中app是dist。然后，您就不需要dist在包定义中了。
您的定义应为：
packages: {
"app": {
"main": "bootstrap",
"format": "system",
"defaultExtension": "js"
}
}
并像这样导入：
System.import('app')
更新
我试图复制您的设置，这是我发现的问题：
在您的后端代码中：
您不提供其中的文件dist。该行已被注释掉。这样，由于您的请求app/*将转发到index.htmlapp.get('*', ...)
您可以取消注释原始行：
app.use('/dist', express.static('dist'));
或
app.use('/app',express.static('dist/app'))
根据您执行的操作，packages对象将有所不同。
我将与后者一起去app.use('/app',express.static('dist/app'))。对我来说，隐藏dist请求不只是一个原因。
另外，检查SystemJS模块格式
软件包定义为：
packages: {
"app": {
"main": "bootstrap",
//"format": "system", // this was causing the main issue
format:"register",
"defaultExtension": "js"
}
},
最后：
System.import('app')
更新
最后一个问题是关于这条线的"angular2": "npm:[email protected]"：
这是由以下两行引起的server/index.js：
app.use(express.static('jspm_packages'));
app.use(express.static('node_modules'));
问题是，里面的所有内容jspm_packages，并node_modules会直接从服务器提供服务。因此，如果您尝试访问：http://localhost:3000/angular2，它将从提供node_modules。
如果您尝试访问：http://localhost:3000/npm/[email protected]它将从提供jspm_packages。因此，当您有台词时：
paths: {
...
"npm:*": "jspm_packages/npm/*"
},
map:{
`"angular2": "npm:[email protected]"`
}
的所有请求angular2都将翻译为：jspm_packages/npm/[email protected]。但这应该是公正的/npm/[email protected]。
当您将其卸下时，它可以工作，"angular2": "npm:[email protected]"因为angular2现在可以从内部使用node_modules。
因此，解决方案是将您更改server/index.js为：
app.use('jspm_packages',express.static('jspm_packages'));
app.use('node_modules',express.static('node_modules'));
另外，里面的script标签index.html现在应该是：
<script src="jspm_packages/npm/[email protected]/bundles/angular2-polyfills.min.js"></script>
<script src="jspm_packages/system.js"></script>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句