用deepseek把angular4升级成angular6， 添加多页签路由

某一天， 产品同事说，这个老系统要迭代， 希望加一个多页签功能， 我们的项目angualr6已经做了多页签， 可是目前系统是angular4, 于是想着要不升级， 接下来就利用deepseek, 开展升级之路。

1. 基础升级

1. 首先升级@angular/cli， @angular/core 到 6.0.3
2. rxjs 升级到 6.0.0，rxjs-compat@^6.6.7，
3. typescript 升级到2.7.2
4. angular 对应的其他包也升级到6.0.3
5. @swimlane/ngx-datatable 更新版本^11.3.2
6. angular-cli.json换成angular.json

2. 项目语法不兼容

import { debounceTime, map, filter } from 'rxjs/operators';
this.service
      .pipe(debounceTime(300))
      .switchMap(() => {
       
      })
      .subscribe(res => {
        
      }, err => {
       
      })

import { map } from 'rxjs/operators'; // 导入 map 操作符

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  return next.handle(req).pipe(
    map(event => {
      // 处理事件
      return event;
    })
  );
}

涉及到rxjs这些的语法问题，全部改了一遍， deepseek看怎么改。 在这之时，还遇见各种报错，@angular/cdk不兼容， 安装@angular/cdk@^6.4.7， @angular/compiler@^6.0.3， 相关原有的angular都按照已有项目升级成angualr6。

2. ui组件用的@nebular/theme， nebular-icons

deepseek， angualr6对应的@nebular/theme, nebular-icons的安装版本，@nebular/[email protected]， nebular-icons@^1.0.6

3. 多页签用的@delon/abc

1. @delon/abc是ng-alain的一部分， 安装@delon/abc， @delon/theme 1.3.3版本，ng-alain@"^1.5.2， 又安装[email protected]， 碰见问题就是多页签永远只有当前页面， 然后重新配置了一下mode = '2'然后变成多个的了

import { DelonABCModule, ReuseTabService, ReuseTabStrategy } from '@delon/abc';
import { RouteReuseStrategy } from '@angular/router';

@NgModule({
    imports: [ DelonABCModule.forRoot()],
    providers: [
     ReuseTabService,
            { provide: RouteReuseStrategy, useClass: ReuseTabStrategy,deps[ReuseTabService]}
        ]
})

 <reuse-tab [mode]="2"></reuse-tab>

4. 遇见的问题

Template parse errors: Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'. 1. If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.

解决ng-template用到的module里面都导入

import { CommonModule } from '@angular/common'; // 导入 CommonModule

5. 注意样式

项目能跑起来，发现很多样式变了，开始准备自己写的，可是太难得下手了，然后又deepseek, angular.json添加样式， 还有导入包的路径问题， 如果报错，去对应的包里面看看

    "./node_modules/nebular-icons/scss/nebular-icons.scss"
    "./node_modules/@delon/theme/styles/index.less",
    "./node_modules/@delon/abc/index.less",

5. 不支持delon，less

deepseek， 对应angular6版本， 安装less@~2.7.0， less-loader@~4.0.0， 已有@angular-devkit/build-angular包并且angular.json已配置， 所以直接安装这两个包就没报错。

整体升级过程还是挺痛苦的， 最主要的就是遇见问题，解决问题， 刚开始项目启动的时候都是满屏红，因为框架以及写法跟现有的angular6还是有差异，只能遇见问题解决问题， 刚开始想放弃的，昨天，产品说可以先暂停，不在上面迭代了， 可是就差样式了，今天解决了， 成就感还是满满的。

总结： deepseek给我的每一步都很精准，而且有对比， 使用感很不错。