如何在Angular项目中正确实现React-Sketch-Canvas组件？

问题根源 #

你直接在Angular模板里写React组件标签<ReactSketchCanvas />报错，本质有两个原因：

1. Angular模板语法规则限制：只有原生空标签（如<img>、<br>）或外部元素允许自闭合，自定义React组件不满足此条件，触发NG5002错误。
2. Angular无法直接识别并渲染React组件，必须通过跨框架集成的方式处理。

可行实现步骤 #

1. 安装依赖 #

除react和react-sketch-canvas外，还需安装ReactDOM、Webpack自定义构建工具及类型声明：

npm install react react-dom react-sketch-canvas @angular-builders/custom-webpack @types/react @types/react-dom --save
npm install @babel/core @babel/preset-react @babel/preset-typescript babel-loader --save-dev

2. 配置Webpack支持React #

• 在项目根目录创建webpack.config.js，添加React的Babel编译规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(tsx|jsx|js)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-typescript']
          }
        }
      }
    ]
  }
};

• 修改angular.json，替换构建器为自定义Webpack：
  找到项目的build和serve配置，更新builder并添加customWebpackConfig：

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.config.js"
    },
    // 保留原有其他配置
  }
},
"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  // 保留原有其他配置
}

3. 创建Angular封装组件 #

新建react-sketch-wrapper.component.ts，用ReactDOM渲染ReactSketchCanvas：

import { Component, ElementRef, OnInit, Input } from '@angular/core';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ReactSketchCanvas } from 'react-sketch-canvas';

@Component({
  selector: 'app-react-sketch-wrapper',
  template: '<div id="sketchContainer"></div>'
})
export class ReactSketchWrapperComponent implements OnInit {
  @Input() strokeWidth = 5;
  @Input() width = 400;
  @Input() height = 400;
  @Input() strokeColor = 'red';
  @Input() canvasColor = 'white';

  constructor(private el: ElementRef) {}

  ngOnInit(): void {
    const container = this.el.nativeElement.querySelector('#sketchContainer');
    const root = ReactDOM.createRoot(container);
    root.render(
      React.createElement(ReactSketchCanvas, {
        strokeWidth: this.strokeWidth,
        width: this.width,
        height: this.height,
        strokeColor: this.strokeColor,
        canvasColor: this.canvasColor
      })
    );
  }
}

4. 在Angular模板中使用封装组件 #

修改canvas.component.html，替换原React标签为封装后的Angular组件，注意使用Angular属性绑定语法，且标签不能自闭合：

<div class="content-wrapper container-xxl p-0">
    <div class="content-body">
      <div class="col-4">
        <app-content-header [contentHeader]="contentHeader"></app-content-header>
      </div>
      <app-react-sketch-wrapper
            [strokeWidth]="5"
            [width]="400"
            [height]="400"
            [strokeColor]="'red'"
            [canvasColor]="'white'"
      ></app-react-sketch-wrapper>
    </div>
  </div>

5. 注册封装组件 #

在对应NgModule（如CanvasModule）中声明该组件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CanvasComponent } from './canvas.component';
import { ReactSketchWrapperComponent } from './react-sketch-wrapper.component';

@NgModule({
  declarations: [CanvasComponent, ReactSketchWrapperComponent],
  imports: [CommonModule],
  exports: [CanvasComponent]
})
export class CanvasModule {}

替代方案 #

如果跨框架集成过于繁琐，可考虑使用Angular原生绘图库（如angular-canvas-draw），或直接基于HTML5 Canvas API实现绘图功能，更贴合Angular技术栈，避免跨框架适配成本。

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