<commit_before>
碰到问题请多多与 [Jigsaw Seed](https://github.com/rdkmaster/jigsaw-seed) 的相关配置文件对比，也欢迎关注Jigsaw的官方微信公众号，在那里可以加入SOS群和我们开发者直接对话。

![](image/qr-weixin.jpg)

可能的话，请把你碰到的问题[报告给我们](https://github.com/rdkmaster/jigsaw/issues/new)，这样可以帮助到更多的巧粉。

# 原工程基于 [Angular CLI](https://github.com/angular/angular-cli) 构建的

1. 增加Jigsaw的依赖
在你的工程下，增加Jigsaw的依赖：
```
npm install --save @rdkmaster/jigsaw
```

2. 检查Jigsaw当前使用的Angular和TS版本与当前工程的版本是否兼容，[详见这里](#ver-dep)。

3. 编辑 `.angular-cli.json`，在 `scripts` 节点下，增加如下条目，注意排除重复条目：
```
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/jquery-mousewheel/jquery.mousewheel.js",
"../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js",
"../node_modules/moment/min/moment.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/ztree/js/jquery.ztree.all.min.js",
"../node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"
```

4. 编辑 `.angular-cli.json`，在 `styles` 节点下，增加如下条目，注意排除重复条目：
```
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css",
"../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/ztree/css/zTreeStyle/zTreeStyle.css"
```

5. 编辑你的 `AppComponent` 所在的文件，把它的构造函数改为：
```
constructor(public viewContainerRef: ViewContainerRef, public renderer: Renderer2, /* 原有其他依赖注入项 */) {
...
}
```
这是由于我们的`PopupService`实现上的缺陷造成的，参考[这个issue](https://github.com/rdkmaster/jigsaw/issues/33)。

# 原工程基于 [angular quickstart](https://github.com/angular/quickstart) 构建的

1. 增加Jigsaw的依赖
在你的工程下，增加Jigsaw的依赖：
```
npm install --save @rdkmaster/jigsaw
```
如果npm报 `UNMET PEER DEPENDENCY @angular/animations` 的警告，则请通过[这个方法](#peer-dep-warn)解决，否则后续会有编译错误。

2. 检查Jigsaw当前使用的Angular和TS版本与当前工程的版本是否兼容，[详见这里](#ver-dep)。

3. 编辑 `src/systemjs.config.js`，在`map`节点下，增加如下一行：
```
 // Jigsaw bundles
'@rdkmaster/jigsaw': 'npm:@rdkmaster/jigsaw/bundles/jigsaw.umd.js',
'@ngx-translate/core/index': 'npm:@ngx-translate/core/bundles/core.umd.js',
'@ngx-translate/http-loader/index': 'npm:@ngx-translate/http-loader/bundles/http-loader.umd.js',
'echarts': 'npm:echarts/dist/echarts.min.js'
```

4. 编辑 `src/index.html`，在head节点插入如下内容
```
<!-- 引入Jigsaw的依赖的css -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/ztree/css/zTreeStyle/zTreeStyle.css">

<!-- 引入Jigsaw需要的依赖，这些依赖没有出umd包，只能配置在这里 -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="node_modules/moment/min/moment.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/ztree/js/jquery.ztree.all.min.js"></script>
<script src="node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
```

5. 编辑你的 `AppComponent` 所在的文件，把它的构造函数改为：
```
constructor(public viewContainerRef: ViewContainerRef, public renderer: Renderer2, /* 原有其他依赖注入项 */) {
...
}
```
这是由于我们的`PopupService`实现上的缺陷造成的，参考[这个issue](https://github.com/rdkmaster/jigsaw/issues/33)。

# 原工程用其他方式构建的
你肯定是资深玩家，请热心的你给推送PR给我们以完善这个文档，这样可以帮助到更多的巧粉。

你至少需要在你的工程下，增加Jigsaw的依赖：
```
npm install --save @rdkmaster/jigsaw
```

以及在适当的位置加入如下js和css文件的依赖
```
bootstrap/dist/css/bootstrap.min.css
eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css
malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css
font-awesome/css/font-awesome.min.css
ztree/css/zTreeStyle/zTreeStyle.css

jquery/dist/jquery.min.js
jquery-mousewheel/jquery.mousewheel.js
malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js
moment/min/moment.min.js
bootstrap/dist/js/bootstrap.min.js
ztree/js/jquery.ztree.all.js
eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js

//如下几个提供了umd包，如果不想用umd包，则请将文件名中的 .umd 去掉即可
jigsaw/bundles/jigsaw.umd.js
@ngx-translate/core/bundles/core.umd.js
@ngx-translate/http-loader/bundles/http-loader.umd.js
echarts/dist/echarts.min.js
```

# 附件
<a name="ver-dep"></a>
## 依赖Angular/TS版本检查和解决办法
Jigsaw依赖的重要版本：
- Jigsaw需要Angular版本4.0.0以上，推荐使用4.2.4，使用这些命令来解决
```
npm install --save @angular/animations@4.2.4
npm install --save @angular/common@4.2.4
npm install --save @angular/compiler@4.2.4
npm install --save @angular/core@4.2.4
npm install --save @angular/forms@4.2.4
npm install --save @angular/http@4.2.4
npm install --save @angular/platform-browser@4.2.4
npm install --save @angular/platform-browser-dynamic@4.2.4
npm install --save @angular/router@4.2.4
```
- Jigsaw需要TypeScript版本2.3以上，目前还不支持2.4，使用这个命令来解决
```
npm i --save typescript@2.3.2
```

<a name="peer-dep-warn"></a>
## 安装Jigsaw的时候npm报warning
默认的 angular quickstart 并没有加入对 `@angular/animations` 的依赖，但是Jigsaw对它有依赖，所以安装Jigsaw的时候，会报一个WARN：<commit_msg>优化章节结构<commit_after>
# 将Jigsaw集成到现有工程下的方法

碰到问题请多多与 [Jigsaw Seed](https://github.com/rdkmaster/jigsaw-seed) 的相关配置文件对比，也欢迎关注Jigsaw的官方微信公众号，在那里可以加入SOS群和我们开发者直接对话。

![](image/qr-weixin.jpg)

可能的话，请把你碰到的问题[报告给我们](https://github.com/rdkmaster/jigsaw/issues/new)，这样可以帮助到更多的巧粉。

## 原工程基于 [Angular CLI](https://github.com/angular/angular-cli) 构建的

1. 增加Jigsaw的依赖
在你的工程下，增加Jigsaw的依赖：
```
npm install --save @rdkmaster/jigsaw
```

2. 检查Jigsaw当前使用的Angular和TS版本与当前工程的版本是否兼容，[详见这里](#ver-dep)。

3. 编辑 `.angular-cli.json`，在 `scripts` 节点下，增加如下条目，注意排除重复条目：
```
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/jquery-mousewheel/jquery.mousewheel.js",
"../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js",
"../node_modules/moment/min/moment.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/ztree/js/jquery.ztree.all.min.js",
"../node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"
```

4. 编辑 `.angular-cli.json`，在 `styles` 节点下，增加如下条目，注意排除重复条目：
```
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css",
"../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/ztree/css/zTreeStyle/zTreeStyle.css"
```

5. 编辑你的 `AppComponent` 所在的文件，把它的构造函数改为：
```
constructor(public viewContainerRef: ViewContainerRef, public renderer: Renderer2, /* 原有其他依赖注入项 */) {
...
}
```
这是由于我们的`PopupService`实现上的缺陷造成的，参考[这个issue](https://github.com/rdkmaster/jigsaw/issues/33)。

## 原工程基于 [angular quickstart](https://github.com/angular/quickstart) 构建的

1. 增加Jigsaw的依赖
在你的工程下，增加Jigsaw的依赖：
```
npm install --save @rdkmaster/jigsaw
```
如果npm报 `UNMET PEER DEPENDENCY @angular/animations` 的警告，则请通过[这个方法](#peer-dep-warn)解决，否则后续会有编译错误。

2. 检查Jigsaw当前使用的Angular和TS版本与当前工程的版本是否兼容，[详见这里](#ver-dep)。

3. 编辑 `src/systemjs.config.js`，在`map`节点下，增加如下一行：
```
 // Jigsaw bundles
'@rdkmaster/jigsaw': 'npm:@rdkmaster/jigsaw/bundles/jigsaw.umd.js',
'@ngx-translate/core/index': 'npm:@ngx-translate/core/bundles/core.umd.js',
'@ngx-translate/http-loader/index': 'npm:@ngx-translate/http-loader/bundles/http-loader.umd.js',
'echarts': 'npm:echarts/dist/echarts.min.js'
```

4. 编辑 `src/index.html`，在head节点插入如下内容
```
<!-- 引入Jigsaw的依赖的css -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/ztree/css/zTreeStyle/zTreeStyle.css">

<!-- 引入Jigsaw需要的依赖，这些依赖没有出umd包，只能配置在这里 -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="node_modules/moment/min/moment.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/ztree/js/jquery.ztree.all.min.js"></script>
<script src="node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
```

5. 编辑你的 `AppComponent` 所在的文件，把它的构造函数改为：
```
constructor(public viewContainerRef: ViewContainerRef, public renderer: Renderer2, /* 原有其他依赖注入项 */) {
...
}
```
这是由于我们的`PopupService`实现上的缺陷造成的，参考[这个issue](https://github.com/rdkmaster/jigsaw/issues/33)。

## 原工程用其他方式构建的
你肯定是资深玩家，请热心的你给推送PR给我们以完善这个文档，这样可以帮助到更多的巧粉。

你至少需要在你的工程下，增加Jigsaw的依赖：
```
npm install --save @rdkmaster/jigsaw
```

以及在适当的位置加入如下js和css文件的依赖
```
bootstrap/dist/css/bootstrap.min.css
eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css
malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css
font-awesome/css/font-awesome.min.css
ztree/css/zTreeStyle/zTreeStyle.css

jquery/dist/jquery.min.js
jquery-mousewheel/jquery.mousewheel.js
malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js
moment/min/moment.min.js
bootstrap/dist/js/bootstrap.min.js
ztree/js/jquery.ztree.all.js
eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js

//如下几个提供了umd包，如果不想用umd包，则请将文件名中的 .umd 去掉即可
jigsaw/bundles/jigsaw.umd.js
@ngx-translate/core/bundles/core.umd.js
@ngx-translate/http-loader/bundles/http-loader.umd.js
echarts/dist/echarts.min.js
```

## 附件
<a name="ver-dep"></a>
### 依赖Angular/TS版本检查和解决办法
Jigsaw依赖的重要版本：
- Jigsaw需要Angular版本4.0.0以上，推荐使用4.2.4，使用这些命令来解决
```
npm install --save @angular/animations@4.2.4
npm install --save @angular/common@4.2.4
npm install --save @angular/compiler@4.2.4
npm install --save @angular/core@4.2.4
npm install --save @angular/forms@4.2.4
npm install --save @angular/http@4.2.4
npm install --save @angular/platform-browser@4.2.4
npm install --save @angular/platform-browser-dynamic@4.2.4
npm install --save @angular/router@4.2.4
```
- Jigsaw需要TypeScript版本2.3以上，目前还不支持2.4，使用这个命令来解决
```
npm i --save typescript@2.3.2
```

<a name="peer-dep-warn"></a>
## 安装Jigsaw的时候npm报warning
默认的 angular quickstart 并没有加入对 `@angular/animations` 的依赖，但是Jigsaw对它有依赖，所以安装Jigsaw的时候，会报一个WARN：
{'fraction_non_alphanumeric': 0.17323128616763114, 'fraction_numerical': 0.010453612096322569, 'mean_word_length': 5.912903225806452, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 53, 'https://': 12, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7475551', 'n_tokens_mistral': 5023, 'n_tokens_neox': 5179, 'n_words': 430}