Skip to content

Latest commit

 

History

History
174 lines (143 loc) · 7.6 KB

index.md

File metadata and controls

174 lines (143 loc) · 7.6 KB
Raw

将Jigsaw集成到现有工程下的方法

我们来聊聊如何将 Jigsaw (https://github.com/rdkmaster/jigsaw) 和已有的Angular工程集成到一起，本文将主流的两种基础工程做了详细的集成说明，相信在你的工程下使用Jigsaw将不费吹灰之力。

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

可能的话，请把你碰到的问题报告给我们，这样可以帮助到更多的巧粉。

原工程基于 Angular CLI 构建的

Angular CLI (https://github.com/angular/angular-cli) 是构建Angular工程的首选，Jigsaw也推荐用它构建工程。

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

  1. 检查Jigsaw当前使用的Angular和TS版本与当前工程的版本是否兼容，请查看本文附件1。

  2. 编辑 .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"
  1. 编辑 .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"
  1. 编辑你的 AppComponent 所在的文件，把它的构造函数改为：
constructor(public viewContainerRef: ViewContainerRef, public renderer: Renderer2, /* 原有其他依赖注入项 */) {
    ...
}

这是由于我们的PopupService实现上的缺陷造成的，参考这个issue #33。

原工程基于 angular quickstart 构建的

angular quickstart 工程地址是 https://github.com/angular/quickstart

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

如果npm报 UNMET PEER DEPENDENCY @angular/animations 的警告，则请通过本文附件2的提供方法来解决，否则后续会有编译错误。

  1. 检查Jigsaw当前使用的Angular和TS版本与当前工程的版本是否兼容，请查看本文附件1。

  2. 编辑 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'
  1. 编辑 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>
  1. 编辑你的 AppComponent 所在的文件，把它的构造函数改为：
constructor(public viewContainerRef: ViewContainerRef, public renderer: Renderer2, /* 原有其他依赖注入项 */) {
    ...
}

这是由于我们的PopupService实现上的缺陷造成的，参考这个issue #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

附件1：依赖Angular/TS版本检查和解决办法

Jigsaw依赖的重要版本：

  • Jigsaw需要Angular版本4.0.0以上，推荐使用4.2.4，使用这些命令来解决
npm install --save @angular/[email protected]
npm install --save @angular/[email protected]
npm install --save @angular/[email protected]
npm install --save @angular/[email protected]
npm install --save @angular/[email protected]
npm install --save @angular/[email protected]
npm install --save @angular/[email protected]
npm install --save @angular/[email protected]
npm install --save @angular/[email protected]
  • Jigsaw需要TypeScript版本2.3以上，目前还不支持2.4，使用这个命令来解决
npm i --save [email protected]

附件2：安装Jigsaw的时候npm报warning

默认的 angular quickstart 并没有加入对 @angular/animations 的依赖，但是Jigsaw对它有依赖，所以安装Jigsaw的时候，会报一个WARN：

npm install --save @rdkmaster/jigsaw
[email protected] D:\Codes\angular-quickstart
+-- UNMET PEER DEPENDENCY @angular/[email protected] extraneous
`-- @rdkmaster/[email protected]

解决的方法是

  1. 执行如下命令
npm install --save @angular/animations
  1. 编辑 src/systemjs.config.js，在map节点下，增加如下一行：
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',