在Express提供服务的Angular2中导入ES6模块

import ES6 modules in Angular2 served by Express

本文关键字：导入 ES6 模块 Angular2 Express 服务      更新时间：2023-09-26

我想在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应用程序的Node.js/Express.js服务器在构建Angular2时遗漏了一些东西。

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

我想让Angular2应用程序在浏览器中运行，这样我就可以手动开始重新创建Node.js路由，并逐一解决其他错误，以便让Angular2应用程序与Node.js/Express.js服务器一起工作。

当这个Angular2应用程序被放置在这个Node.js/Express.js实例的public文件夹中时，需要进行哪些特定的更改才能解决由于ES6导入而导致的这些初始错误

我只是检查了这两个repo，然后做了上面提到的同样的事情。

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

我不认为目前我们可以在浏览器和上运行这个代码而没有问题

从repo中可以看出，它使用babel来编译代码

所以，如果你想使用它的client代码，只要确保你也做同样的

按原样编译内容。我认为一切都应该正常

更新

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

将代码从ES6转换为ES5。

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

新文件夹名为dist我的屏幕截图

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

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

所以提示是复制angular2-esnext-starter的gulpfile，不要忘记

向package.json添加更多依赖项应该可以解决您的问题。

我到的可行节点

相关文章：