SyntaxError：导出声明只能出现在模块的顶层答案

【问题标题】：SyntaxError: export declarations may only appear at top level of a moduleSyntaxError：导出声明只能出现在模块的顶层
【发布时间】：2019-08-26 05:42:55
【问题描述】：

我最近使用下面的评论安装了popper.js

npm install --save popper.js angular-popper

然后，我在angular.json 中添加以下内容

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "src/assets/fancybox/js/jquery.fancybox.min.js"
]

但是当我运行应用程序时，我在scripts.js 中收到如下错误，

语法错误：导出声明只能出现在模块的顶层

所以，根据This documentation，我也尝试通过app.module.ts 导入。但没有运气。

【问题讨论】：

尝试导入UMD模块？ Popper.js/dist/umd
@Terrance00 我刚刚尝试过并且很酷，它正在工作。根中的popper.js 和umd 中的umd 有什么区别？不过，将此作为答案发布。

标签： angular popper.js

【解决方案1】：

为未来的流浪者发布答案：

导入 popper.js 时，使用 UMD 发行版。

angular.json

scripts:[
    //...
    "node_modules/popper.js/dist/umd/popper.min.js",
    //...
]

这是因为这个发行版使用了一种标准化的方式来声明 JS 库，称为 Universal Module Definition。

更多信息：

https://github.com/umdjs/umd

【讨论】：

向前看，这适用于所有第三方模块吗？
我目前正在处理使用 angular 的旧库 - 只有在绝对需要 IMO 时才应使用 scripts 导入。我更喜欢使用类型化的接口并进行每次使用导入。然后让 webpack 处理分发。话虽如此 - 有时您只是拥有这些依赖项，然后 UMD 版本就可以正常工作。

【解决方案2】：

很容易解决，把bootstrap或bootstrap.min改成bootstrap.bundle或bootstrap.bundle.min，因为这些文件包含popper.js。 Popper 是导致问题的原因。

【讨论】：