我已经创建了一个页面，我想在其中加载第二个Oracle Jet组件。每当我加载此页面时，它会给我下面的错误消息：

knockout-3.4.0.debug.js:3758 Uncaught Error: Component 'my-component': Unknown viewModel value: [object Object]
            at knockout-3.4.0.debug.js:3758
            at resolveViewModel (knockout-3.4.0.debug.js:3704)
            at Object.loadViewModel (knockout-3.4.0.debug.js:3605)
            at Object.getFirstResultFromLoaders [as _getFirstResultFromLoaders] (knockout-3.4.0.debug.js:3507)
            at knockout-3.4.0.debug.js:3641
            at Object.execCb (require.js:1696)
            at Module.check (require.js:883)
            at Module.<anonymous> (require.js:1139)
            at require.js:134
            at require.js:1189

下面是代码片段：

define(['ojs/ojcore', 'knockout', 'jquery', 'appController','ojs/ojmodule','ojs/ojbutton'],
     function(oj, ko, $, app) {
      
        function CustomerViewModel() {
          var self = this;
          
       
          self.buttonClick = function(event){
           
                 // return true;
          };
        // Header Config
          self.headerConfig = {'viewName': 'header', 'viewModelFactory': app.getHeaderModel()};

      ko.components.register('my-component', {
        viewModel: { require: 'viewModels/register' },
        template: { require: 'text!views/register.html' }
    });

        }

        
        return new CustomerViewModel();
      }
    );

<div class="oj-hybrid-applayout-page">
      <div class="oj-applayout-fixed-top">
          <!--
           ** Oracle JET V4.2.0 hybrid mobile application header pattern.
           ** Please see the Oracle JET Cookbook App Shell: Hybrid Mobile demos for
           ** more information on how to use this pattern.
        -->
        <header role="banner" class="oj-hybrid-applayout-header" data-bind="ojModule: headerConfig">
        </header>
      </div>
      <!-- This is where your main page content will be loaded -->
      <div class="oj-applayout-content">
        <div role="main" class="oj-hybrid-applayout-content">
          <div class="oj-hybrid-padding">
            <h1>Hello Customer! Welcome to MyApp. Please Login with your credentials or Register yourself</h1>
                <div id='buttons-container'>      
                   <button id= "button"
            data-bind="click: buttonClick,
                       ojComponent: { component: 'ojButton', label: 'Login' }">
                    <button id= "button"
            data-bind="click: buttonClick,
                       ojComponent: { component: 'ojButton', label: 'Register' }">
                

                </div id='load_Component'>
               
                <div data-bind='component: "my-component"'></div>
              
          </div>
        </div>
      </div>
    </div>

我试图在load_Component标记中加载my-component。我给出了my-component的参考，它是在相应的javascript中与组件客户定义的。请参阅文件夹结构的图像。