Angular7 外部 Jquery 插件 - 意外的标识符答案

【问题标题】：Angular7 External Jquery Plugin - Unexpected IdentifierAngular7 外部 Jquery 插件 - 意外的标识符
【发布时间】：2018-12-13 22:40:55
【问题描述】：

我很难将 jquery 模板转换为 angular7。原始模板有自己的资产文件夹，其中包含我需要加载的几个 .js 文件才能使其工作。

当我启动应用程序时：ng serve 我在浏览器中收到以下错误：

从'jquery'导入$；未捕获的 SyntaxError：意外的标识符

tsconfig.json

 "types": [ "jquery" ],

angular.json，在脚本下

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

package.json

 "dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"bootstrap": "^4.1.3",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"tslib": "^1.9.0",
"zone.js": "^0.8.19",
"popper.js": "^1.14.4",
"jquery": "^3.3.1",

有人可以帮助我更好地理解这一点吗？我在想我可能会使用 Babel 或单独的包来处理这个编译。

谢谢。

【问题讨论】：

你安装 npm 了吗？除此之外，用 Angular 重写遗留的东西，不要安装 jQuery。为什么要启动一个新的 Angular 项目只是为了违反 jQuery？
我知道这是错误的，但这就是我得到布局的方式。我试图找出一种加载自定义 jquery 插件的方法，这样我就不必重写整个事情并节省一些时间。感谢您的洞察力阿德里安 =)
早期的胜利不值得长期的痛苦，一开始导入 jQuery 似乎是一种在开始时节省时间的方法，但项目生命周期中表现出来的痛苦是不值得的.
这确实是有道理的阿德里安。我将重写插件或查看它们是否可用于 Angular。感谢您帮助我，祝您有美好的一天！

标签： javascript jquery angular webpack tsconfig

【解决方案1】：

我设法找到了解决方案。这很简单，但正如 Adrian 之前评论的那样，不建议这样做。因此，我将使用 Angular Ready 插件，但以防万一，这就是答案。

1 - 安装 Jquery。

npm install jquery — save

2 - 在脚本下加载 angular.json 或 angular-cli.json。

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

3 - 通过 npm 下载所需的 Jquery 插件。

4 - 在 angular.json 或 angular-cli.json 中加载 Jquery 插件 min.js

5 - 在外部 js 文件中使用您的脚本，而不是在您的打字稿中。

【讨论】：