如何在Angular项目中从war文件导入并复用Angular 2组件？

完全可行，但核心前提是你能从WAR文件里提取出可复用的Angular组件相关代码（优先源码，编译后的资源复用性较差）。具体操作步骤如下：

1. 提取WAR中的Angular组件资源 #

• 将WAR文件视为普通压缩包，用7-Zip、WinRAR等工具解压
• 定位Angular代码：
  • 若WAR是开发环境打包的，大概率能找到src目录下的组件源码文件（.component.ts、.component.html、.component.css等）
  • 若为生产打包的WAR，通常只有编译后的dist目录，这种情况只能拿到打包后的JS/CSS，复用性极低，建议尽量找到源码

2. 封装可复用组件模块 #

• 把提取到的组件所有关联文件复制到你项目的合适目录（比如src/app/shared/components/[组件名称]）
• 检查组件依赖：确保组件用到的Angular模块、第三方库和你的项目版本匹配，版本差异过大可能导致编译报错
• 创建/更新共享模块注册组件（方便全局复用）：

// src/app/shared/shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TargetComponent } from './components/target/target.component'; // 替换为你的组件路径

@NgModule({
  declarations: [TargetComponent],
  exports: [TargetComponent] // 必须导出才能在其他模块中使用
})
export class SharedModule { }

3. 在项目中导入使用组件 #

• 在需要使用该组件的业务模块中导入共享模块：

// src/app/home/home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { HomeComponent } from './home.component';

@NgModule({
  imports: [
    CommonModule,
    SharedModule // 导入共享模块
  ],
  declarations: [HomeComponent]
})
export class HomeModule { }

• 在组件模板中直接使用组件选择器：

<!-- src/app/home/home.component.html -->
<target-component></target-component> <!-- 替换为组件实际选择器 -->

4. 处理版本与依赖兼容问题 #

• 若WAR中的Angular版本和你的项目不一致（比如你的是Angular 2，WAR里是Angular 4+），需要调整组件代码适配版本，比如装饰器语法、生命周期钩子的写法差异
• 组件依赖的第三方库（如RxJS、Angular Material）要在你的项目中安装对应版本，执行npm install [库名]@[版本号]完成安装

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