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

Question

我最近使用以下命令安装了 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 中遇到了以下错误：

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

根据此文档，我也尝试通过 app.module.ts 导入它。但没有成功。

- Butterfly

---

尝试导入 UMD 模块？Popper.js/dist/umd - Terrance00

@Terrance00，我刚试了一下，很酷，它能正常工作。popper.js在根目录和umd内部的区别是什么？不过请把这个作为答案发布。 - Butterfly

Answer 1

为了方便以后的使用者，提供答案：

当导入popper.js时，请使用UMD分发版本。

angular.json

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

这是因为此分发方式采用了一种称为通用模块定义的标准化JS库声明方法。

更多信息：

https://github.com/umdjs/umd

- Terrance00

---

前进，这适用于Angular中的所有第三方模块吗？ - Butterfly

我目前正在处理使用 Angular 消耗旧库的问题 - 在我看来，只有在绝对必要的情况下才应该使用 scripts 导入。我更喜欢使用类型化接口并进行每个用法的导入。然后让 webpack 处理分发。话虽如此 - 有时你只需要这些依赖项，然后 UMD 版本就可以正常工作。 - Terrance00

Answer 2

很容易解决，只需将bootstrap或bootstrap.min更改为bootstrap.bundle或bootstrap.bundle.min，因为这些文件包含popper.js。Popper是引起问题的原因。

- Edwin Irausquin