Reactjs 如何确定远程React应用程序加载到Angular SPA时的时间？

我有一个旧的AngularJS SPA，它正在加载位于单独服务器上的React组件。它是独立的，因为我们正在逐渐切换所有内容以在该服务器上做出反应。有时，当使用react应用程序加载页面时，我们会看到“react之前加载了react DOM。请确保在加载react DOM之前加载react包。”错误。但是如果你刷新页面，它就会消失。假设由于内容位于不同的服务器上而在某个地方出现时间问题，但无法找到问题所在。下面的代码都是角度代码。React应用程序只是指向其远程位置的url

index.html.ejs

<script type="systemjs-importmap">    
{
            "imports": {
               "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.5.0/lib/system/single-spa.min.js",
               "react": "https://cdn.jsdelivr.net/npm/react@16.13.0/umd/react.production.min.js",
               "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.0/umd/react-dom.production.min.js",
               "@myproject/tp-app": "tp-app-url-location",
           }
        }
        </script>
    ...
    //Needed to load React project even tho React app attaches to Wrapper component below
<div id="tp-app-holder">
   <div id="tp-app" class="hide">
      <div id="single-spa-application:tp">       </div>
</div>

指令

angular.module('app').directive('tpWrapper', TpWrapper);

function TpWrapper() {
    return {
        restrict: 'E',
        template: require('TpWrapper.html'),
        controller: TpWrapperCtrl
    };
}

控制器

function TpWrapperCtrl(
    $scope,
    $timeout
) {
    $('#tp-app').removeClass('hide');
    //timeout to try to fix timing of remote attachment
    $timeout(function () {
        $('#tp-app').appendTo('#tp-app-wrapper');
    });
}

TpWrapper.html

<div id="tp-app-wrapper"></div>

调用TpWrapper组件的外部容器

<div>
       <tp-wrapper></tp-wrapper>
    </div>

<div>
       <tp-wrapper></tp-wrapper>
    </div>