Angular 6+Semantic项目是否必须引入jQuery？如何正确引入？

首先明确：是的，必须引入jQuery #

Semantic UI的核心组件完全依赖jQuery实现，这是框架本身的设计要求，所以如果不引入jQuery，必然会触发你看到的Uncaught ReferenceError: jQuery is not defined错误。

正确引入步骤 #

下面是一步步的配置方法，确保jQuery和Semantic UI能在Angular 6中正常工作：

1. 安装依赖包 #

打开终端，在项目根目录下运行以下命令，安装所需的npm包：

npm install jquery --save
npm install semantic-ui --save

如果想要TypeScript的类型提示（可选但推荐），再安装jQuery的类型定义包：

npm install @types/jquery --save-dev

2. 配置angular.json文件 #

Angular 6通过angular.json管理项目资源配置，注意顺序很重要——必须先加载jQuery，再加载Semantic UI的JS文件，否则依然会报错。

找到projects -> 你的项目名称 -> architect -> build -> options下的styles和scripts数组，修改如下：

"styles": [
  "node_modules/semantic-ui/dist/semantic.min.css",
  "src/styles.css" // 保留你原有的全局样式文件
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/semantic-ui/dist/semantic.min.js"
]

3. 处理TypeScript类型问题（可选） #

如果没有安装@types/jquery，直接在组件中使用$会触发TypeScript的类型错误。这时可以在src目录下新建typings.d.ts文件，添加以下声明：

declare var $: any;

如果已经安装了类型定义包，这一步可以跳过，TypeScript会自动识别jQuery的类型。

4. 测试配置是否生效 #

在任意组件中尝试使用Semantic UI的组件和jQuery功能，比如在app.component.html中添加：

<button class="ui primary button">测试Semantic按钮</button>

然后在app.component.ts的ngOnInit方法中添加：

ngOnInit() {
  $('.ui.button').click(() => {
    alert('Semantic UI + jQuery 在Angular 6中正常工作了！');
  });
}

启动项目后点击按钮，如果弹出提示框，就说明配置成功了。

内容的提问来源于stack exchange，提问作者ValRob