# Angular 项目改造

# 写在前面

angular子应用改造示范工程：

https://git.yx.netease.com/shark/mf-admin

# 一、改造前准备

首先保证项目已经接入node,而且项目升级到了ng6版本（目前ng4项目也支持）

angular项目升级指南 (opens new window)
node接入，保证node升级到tiger@4.X版本
子服务在权限中心注册，在配置中心能看到子服务 http://test.yx.mail.netease.com/micro-fed/mf-admin/#/service-list

# 二、web端改造

修改index.html:app-root添加id 为 root

<app-root id="root"></app-root>

app.component.ts的selector改为#root

@Component({
    selector: '#root',
    templateUrl: './app.component.html'
})

升级shark-angularX-webpack

ng6：安装shark-angularX-webapck@6.3.10 ；ng4：安装shark-angularX-webapck@1.4.12

// ng6
npm i @shark/shark-angularX-webpack@6.3.10
// ng4
npm i @shark/shark-angularX-webpack@1.4.12

修改build.js脚本

const argv = require('yargs').argv;
const sharkAngularXWebpack = require('@shark/shark-angularX-webpack');
const sw = new sharkAngularXWebpack(require('../../shark-conf'));
const webpackConfig = sw.getBuildConfig(argv.target);
const microWebpackConfig = sw.getBuildMicroConfig(argv.target);

sw.runBuild({
    webpackConfig: webpackConfig,
    target: argv.target,
    branch: argv.branch,
    callback: () => {
        sw.runBuildMicroFed({
            webpackConfig: microWebpackConfig,
            target: argv.target,
            branch: argv.branch
        });
    }
});

如果原先由用到window.open的，请替换为@sharkr/utils中的 openUrl 方法；如由文件下载的（原项目也是用window.open下载的），请替换为@sharkr/utils中的 download 方法
删除原先的权限中心包的引用以及配置以及权限模块；（权限模块有单独的应用，主应用可引入权限模块应用）
安装@eagle/authorizion替代原先的权限中心包

使用方式

// 安装
npm i @eagle/authorizion

// 在shared.module.ts中引入AuthorizionModule

import { AuthorizionModule } from '@eagle/authorizion';

···

@NgModule({
    imports: [
      AuthorizionModule
    ],
    declarations: [],
    exports: []
})
export class SharedModule {
}

# 三、server端

安装两个中间件：@tiger/tiger-extract-header和@tiger/microconfig

// 用于获取请求头部信息
npm i @tiger/tiger-extract-header
// 用于获取微应用资源配置文件
npm i @tiger/microconfig

将中间件加入global.middleware.ts中

import tigerExtractHeader from '@tiger/tiger-extract-header';
import microconfig from '@tiger/microconfig';

 // 允许代理模式
app.proxy = true;
// 从header中提取productCode；取值方式：ctx.state.headerData.productCode
app.use(tigerExtractHeader()());

// 省略
...

// openid
app.use(tigerOpenid({})({
    include: [`${contextPath}/`, `${contextPath}/*.html`, `${contextPath}/xhr/(.*)`]
}));
//微应用config
app.use(microconfig({
    contextPath: config.contextPath,
    webPath: config.webAppPath
}));

权限中心转发配置修改

// 安装包 
npm i @eagler/authorizion-node

// 将AuthenticationModule添加到modules中
// modules/index.ts

import { BaseModule, TgModule } from '@tiger/boot';
import { AuthenticationModule } from '@eagler/authorizion-node';
import { config } from '../config';

@TgModule({
    prefix: config.contextPath,
    imports: [AuthenticationModule],
    controllers: []
})
export class AppModule extends BaseModule { }

子应用去除@tiger/security和@tiger/permission中间件，由主应用承担csrf认证与权限认证。
./server/src/conf.base.ts

修改productCode，serviceCode，productId都为子应用的serviceCode

const productCode = 'mf-admin'; // 使用serviceCode作为productCode，用于权限中心
const serviceCode = 'mf-admin';// 
const productId = 'mf-admin';// 服务没有id，用code代替

然后在服务管理页面，设置该服务自己的用户、角色、权限，并添加【关联产品】

http://test.yx.mail.netease.com/micro-fed/mf-admin/#/service-list

由于@tiger/openid会解析cookie并往ctx中写入用户信息，而后续的接口可能会使用ctx中的用户信息。所以目前@tiger/openid包还不能去掉。日后如果@tiger/openid拆分成【认证包】和【解析包】，那么就可以去除@tiger/openid