如何将Spring Boot 1.5.9生产应用中的AngularJS 1.6替换为Angular 4？

我之前帮团队完成过从AngularJS 1.6到Angular 4的迁移，结合Spring Boot 1.5.9的生产级场景，给你整理一套可落地的步骤，确保平稳过渡：

首先得搭好Angular 4的开发环境：

• 安装Node.js 8.x（Angular 4的推荐兼容版本）和npm，确保版本匹配
• 全局安装对应版本的Angular CLI：npm install -g @angular/cli@1.4.9（这个CLI版本对应Angular 4.x）
• 初始化新的Angular 4项目：ng new angular4-app --style css --routing，--routing会自动生成路由配置，省得手动添加

生产级应用不要直接全量重写，建议分模块、分页面逐步迁移：

• 控制器→组件：把AngularJS里的$scope逻辑迁移到Angular 4的组件类中，模板语法做对应调整：
  • ng-repeat换成*ngFor
  • ng-if换成*ngIf
  • ng-click换成(click)
  • ng-model换成[(ngModel)]（需要在模块中导入FormsModule）
    示例组件：

  import { Component } from '@angular/core';
  import { UserService } from '../user.service';
  
  @Component({
    selector: 'app-user-list',
    template: `
      <ul>
        <li *ngFor="let user of users">{{user.name}} - {{user.email}}</li>
      </ul>
      <button (click)="fetchUsers()">加载用户列表</button>
    `
  })
  export class UserListComponent {
    users: any[] = [];
  
    constructor(private userService: UserService) {}
  
    fetchUsers() {
      this.userService.getUsers().subscribe(data => {
        this.users = data;
      });
    }
  }
  

• 服务迁移：把AngularJS的factory/service换成Angular 4的@Injectable服务，依赖注入通过构造函数实现，不再需要$inject：

  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs/Observable';
  
  @Injectable()
  export class UserService {
    private apiUrl = '/api/users';
  
    constructor(private http: HttpClient) {}
  
    getUsers(): Observable<any[]> {
      return this.http.get<any[]>(this.apiUrl);
    }
  }
  

• 路由迁移：替换AngularJS的$routeProvider为Angular 4的RouterModule，在app-routing.module.ts中定义路由规则：

  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { UserListComponent } from './user-list/user-list.component';
  
  const routes: Routes = [
    { path: 'users', component: UserListComponent },
    { path: '', redirectTo: '/users', pathMatch: 'full' }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

保持Spring Boot后端的API逻辑不变，只调整前端的集成方式：

• 静态资源配置：Spring Boot 1.5.x默认从src/main/resources/static加载静态资源，所以把Angular 4项目构建后的dist目录内容复制到这里。如果用Maven，可以添加自动复制插件，省得手动操作：

  <plugin>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-resources-plugin</artifactId>
      <version>3.0.2</version>
      <executions>
          <execution>
              <id>copy-angular-dist</id>
              <phase>process-resources</phase>
              <goals>
                  <goal>copy-resources</goal>
              </goals>
              <configuration>
                  <outputDirectory>${project.build.directory}/classes/static</outputDirectory>
                  <resources>
                      <resource>
                          <directory>../angular4-app/dist</directory>
                          <filtering>false</filtering>
                      </resource>
                  </resources>
              </configuration>
          </execution>
      </executions>
  </plugin>
  

• API调用适配：用Angular 4的HttpClientModule替换AngularJS的$http，记得在AppModule中导入HttpClientModule
• 跨域处理：如果前后端分开开发（比如前端用ng serve，后端启动Spring Boot），需要在Spring Boot中配置CORS：
  可以给API接口添加@CrossOrigin注解，或者全局配置CorsFilter：

  @Configuration
  public class CorsConfig {
      @Bean
      public CorsFilter corsFilter() {
          UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
          CorsConfiguration config = new CorsConfiguration();
          config.setAllowCredentials(true);
          config.addAllowedOrigin("http://localhost:4200");
          config.addAllowedHeader("*");
          config.addAllowedMethod("*");
          source.registerCorsConfiguration("/api/**", config);
          return new CorsFilter(source);
      }
  }
  

如果无法一次性替换所有功能，可以用@angular/upgrade实现AngularJS和Angular 4共存：

• 安装升级包：npm install @angular/upgrade
• 在Angular 4的AppModule中导入UpgradeModule，并引导AngularJS应用：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { UpgradeModule } from '@angular/upgrade/static';
  
  @NgModule({
    imports: [BrowserModule, UpgradeModule]
  })
  export class AppModule {
    constructor(private upgrade: UpgradeModule) {}
  
    ngDoBootstrap() {
      this.upgrade.bootstrap(document.body, ['yourAngularJsAppModule'], { strictDi: true });
    }
  }
  

  这样可以在Angular中使用AngularJS的组件/服务，也可以把Angular组件降级给AngularJS使用，逐步完成迁移。

• 单元测试：Angular 4默认用Karma+Jasmine，运行ng test测试组件和服务逻辑
• 集成测试：用Postman或者Spring Boot的JUnit测试接口交互是否正常
• 部署：和之前的Spring Boot部署流程一致，打包成jar/war即可，Angular的静态资源已经包含在包中；如果需要前后端分离部署，可以用Nginx反向代理Angular的静态资源和后端API

内容的提问来源于stack exchange，提问作者Rupali Bochare