Question

我想在由Node.js和Express.js提供服务的应用程序中使用带有Angular2的ES6模块。但是，当我尝试在浏览器中加载Angular2 / ES6应用程序时，FireFox控制台中会打印以下内容：

The stylesheet http://localhost:8080/boot.css was not loaded because its MIME type, "text/html", is not "text/css". localhost:8080
SyntaxError: import declarations may only appear at top level of a module vendor.js:1:0
SyntaxError: import declarations may only appear at top level of a module boot.js:1:0

问题似乎是Angular2应用程序构建中缺少某些内容的结果，该服务由为Angular2应用程序提供服务的Node.js / Express.js服务器完成。

具体来说，在我从this GitHub AngularJS 1.x sample app删除整个public应用文件夹并将其替换为this GitHub Angular2 example app的整个client应用文件夹的副本后，问题就出现了。当我使用nodemon server.js启动Express.js服务器并在FireFox中键入http : // localhost : 8080时，控制台打印出上面显示的错误。

我想在浏览器中运行Angular2应用程序，以便我可以手动开始逐步完成重新创建Node.js路由并逐个解决其他错误，以便将Angular2应用程序转到使用Node.js / Express.js服务器。

当this Angular2 app放在this Node.js/Express.js instance的public文件夹中时，需要进行哪些具体更改才能解决由于ES6导入导致的初始错误？

Answer 1

我只看看那两个回购，然后做同样的事情。

问题是angular2的client文件夹是ES6语法。

我不认为目前我们可以毫无问题地在浏览器上运行此代码并且

你可以从repo告诉它使用babel来编译代码

因此，如果您想使用其client代码，请确保您也执行相同的操作

编译内容。我认为一切都应该有效

更新

我想说的是角度回购使用babel和gulp来帮助它

将代码从ES6转换为ES5。

您可以在gulp serve下运行angular2-esnext-starter，它会生成一个

名为dist my screenshot

的新文件夹

将client文件夹下的dist文件夹复制到node-todo并记住

将其重命名为public，您将看到一切正常。

因此提示会复制gulpfile的{{1}}并且不要忘记

向angular2-esnext-starter添加更多依赖项应解决您的问题。

my workable node-todo

导入由Ang服务的Angular2中的ES6模块

1 个答案:

更新