Tuấn Đỗ

Engineer

Tích hợp dự án React vào dự án Angular khác

Tích hợp dự án React vào dự án Angular khác

October 25, 2021

Chắc có lúc bạn sẽ thắc mắc là có cách nào để gắn một dự án được phát triển bằng React vào một dự án được phát triển bằng Angular được không? Và câu trả lời là có thể và rất đơn giản nhé.

img.png

Demo: https://micro-frontends.tuando.net/demo/angular-react

Source code: https://github.com/dotuan9x/micro-frontends/tree/master/angular-react

Tạo một project React đơn giản #

Khai báo một HTML Custom Element phục vụ cho việc render bên project container

// /angular-react/products/src/index.jsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

class Webcomponents extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        ReactDOM.render(<App />, this);
    }
}

customElements.define('web-components-products', Webcomponents);

Tạo một project sử dụng Angular #

Sử dụng ng cli để tạo project bằng câu lệnh ng new container. Với container là tên của project Angular

Tiếp đến để để sử dụng Web components ta phải import thêm CUSTOM_ELEMENTS_SCHEMA từ @angular/core như sau

// angular-react/container/src/app/app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent]
})
export class AppModule { }

Tiếp đến ở file src/index.html đừng quên gắn script file của project products nhé

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Container</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://unpkg.com/tailwindcss@2.2.7/dist/tailwind.min.css" rel="stylesheet">
  <script src="https://micro-frontends.tuando.net/demo/angular-react/products/dist/main.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Tiếp theo trong file src/app/app.component.html ta gắn HTML Custom Element mình đã khai báo của project products như sau

<div class="p-1">
    <web-components-products></web-components-products>
</div>