notice APP

通知通道

功能介绍

通知通道配置功能；

运行子应用

# 本地运行和联调
你需要运行 `npm run start`，然后打开浏览器，访问 `http://localhost:4203/` 即可。
如果你修改了源码的任意部分，app会自动编译和重新加载。
当然，你必须要在 `proxy.conf.js` 文件中填写正确的服务端IP才能进行前后端联调。

编译

运行 npm run build 编译项目。编译后的代码位于 dist/ 文件夹。

本地测试接入子应用

# extra-webpack.config.js文件
"publicPath"属性，保证访问端口和本地起服务端口一致
# 启动主应用business_common_service
npm run start 
# 修改主应用配置
"business_common_service/src/assets/config/config.json"对应子应用的"localEntry"属性，保持和子应用服务一致
# 打开浏览器
访问 http://localhost:8088/notice/route/config/manage

切换NPM仓库

# 切换到BSA的npm私服地址
npm set registry http://10.67.1.73:4873

# 切换公有仓库
npm set registry https://registry.npmjs.org/

私有模块发布到NPM仓库，便于重用和管理。

安装 NodeJS

前端工程环境基于Node运行的，Node会自带Npm包管理工具，安装NodeJS后，在控制台运行 npm -v ，如果打印出提示，则说明node安装成功。

然后安装前端工程环境的依赖

你需要运行 npm install，即可自动安装依赖。但是，由于网络连接不稳定，以及npm自身的缺陷，有可能安装报错。可以从其它成功安装的同学处将依赖包拷贝到本地即可。 安装依赖就用 npm install XXX 就可以了，比如 npm install echarts。

代码脚手架

你可以手动地创建一个组件、服务或者其它的部件，但是个人还是建议通过如下命令来快速创建部件，它可以自动生成符合规范的代码命名、添加测试代码模板和添加模块引用，尤其对于初学者又很有帮助。

# Component(组件): 
npm run ng g component ./core/my-new-component

# Directive(指令): 
npm run ng g directive ./core/my-new-directive

# Pipe(管道): 
npm run ng g pipe ./core/my-new-pipe

# Service(服务): 
npm run ng g service ./core/my-new-service

# Class(类): 
npm run ng g class ./core/my-new-class

# Interface(接口): 
npm run ng g interface ./core/my-new-interface

# Enum(枚举): 
npm run ng g enum ./core/my-new-enum

# Module(模块): 
npm run ng g module ./core/my-module

编译

运行 npm run build 编译项目。编译后的代码位于 dist/ 文件夹。 可通过修改 angular.json 文件的"outputPath" 参数，更改前端打包路径

@delon/mock 前端开发接口自测使用

在 app.module.ts 根模块中引入。 文档：https://ng-alain.com/mock/getting-started/zh 目的：拦截前端请求，通过生成模拟数据让前端开发人员独立于后端进行开发，让前端独立于后端进行开发。Mock代码与逻辑代码完全解耦，本地开发环境和生产环境无缝切换。

微应用开发注意点

1. 图片引用，需要对图片添加一个 assetUrl 管道用于修复图片地址

    <img [src]="'assets/image/nodata/text-nodata.png' | assetUrl"/>
   

2. 判断沙箱环境

应用运行时，基座沙箱提供window.__POWERED_BY_QIANKUN__字段判断应用是否运行在沙箱环境下。该信息通常用于应用隐藏不需要再沙箱环境下展示的信息，如导航。

3. 路由跳转

路由跳转分为子应用内部的路由跳转和外部路由跳转两种。如果是应用内部的路由跳转，尽量采用相对地址跳转，比如routerLink指令或者router.navigate()函数，这种跳转是同时兼容独立部署和混合部署的。外部路由跳转一般会写绝对路径，针对子应用中存在的这种跳转，需要额外处理，判断其是否在是作为微应用运行还是独立运行，然后再决定跳转的地址。以下用智能搜索的 ip 跳转为例，如果运行在容器中，则跳转主应用的路径，如果不是则跳转独立部署的路径。

if ((window as any).__POWERED_BY_QIANKUN__) {
  const url = `/WebApi/main/static/dist/#/isoc/route/maintain/destination?ip=${ip}`;
  const openWin = window.open(url);
  openWin.opener = null;
} else {
  const url = `/WebApi/isoc/static/base/#/route/maintain/destination?ip=${ip}`;
  const openWin = window.open(url);
  openWin.opener = null;
}