Javascript Angular2 GWT集成出现意外的指令值错误

我试图在GWT2.6.0中使用Angular2（只有JavaScript，没有TypeScript）

有这样一个非常基本的代码：

public native void init() /*-{
  var MyComp= $wnd.ng.Component({
  selector: 'my-sample',
  properties:['model']
  })
  .View({
  directives: [], 
  template: '\n<h1>Hello world!</h1>'
  })
  .Class({
    constructor: function() {
    }
  });
  var MyApp= $wnd.ng.Component({selector:'my-app'})
  .View({
    directives: [MyComp],
    template:'<my-sample></my-sample>'
  })
  .Class({
    constructor:function(){}
  });
  $wnd.setTimeout(function() { $wnd.ng.bootstrap(MyApp);}, 1000);
}-*/;

我只需取出本机代码并粘贴一个非GWT应用程序HTML文件脚本标记（只需将$wnd替换为window），一切正常

此错误是什么，如何修复

2016/03/22: 在Eric的回答之后，我尝试使用UMD包，现在在GWT中生成这样的代码

public native void init() /*-{
    if (!$wnd.SampleApp)
        $wnd.SampleApp = {}
    $wnd.SampleApp.SampleComponent =
      $wnd.ng.core.Component({
          selector: 'my-sample',
    template: '\n<h1>Hello world!</h1>'
          })
          .Class({
            constructor: function() {}
          });
    $wnd.SampleApp.Main =
    $wnd.ng.core.Component({
        selector: 'my-app',
        directives: [$wnd.SampleApp.SampleComponent],
        template: '<h1>My First Angular 2 App</h1>'
    })
    .Class({
    constructor: function() {}
    });
    setTimeout(function() {
        $wnd.ng.platform.browser.bootstrap($wnd.SampleApp.Main);
    }, 3000);
}-*/;

同样，如果我把这段代码取出，放在HTML文件的脚本块中，它就可以工作了。所以在GWT中运行时发生了一些错误。

---

GWT代码涉及编译步骤，因此我恐怕无法为其创建plnkr。

我希望您不需要GWT 2.6.0。如果您可以切换到GWT2.8.0（也支持Java8），那么还有另一个解决方案。 您是否尝试使用angular2 gwt（）？ 以下是Angular2Boot应用程序示例：。我想您也可以在没有Spring后端的情况下使用这个库

---

PS：当前的GWT方法建议在JNI上使用JsInterop。

我能够以一种不太令人信服的方式修复它。对于构造函数，我必须调用外部JavaScript文件来获取函数，而不仅仅是在JSNI中定义它们

声明如下：

  constructor: function() {}

由于某些不兼容，上述错误会导致此类错误

我将其替换为如下内容：

  constructor: $wnd.wrapFunction4GWT(function() {})

---

其中包装器函数将返回一个新函数，该函数继承了GWT本机层中定义的函数（因为该函数不会像这样实时为空）。

请将您的SFX捆绑包升级到新的UMD捆绑包。Sfx捆绑包很久以前就被umd捆绑包取代了。如果可能的话，提供一个plnkr（在使用GWT时是否可能，对此一无所知）感谢Eric的回复。在使用UMD bundle运行查询之后，我刚刚更新了查询。您可以更改这些行

constructor:function（）{}

以匹配类名吗？例如，对于

$wnd.SampleApp.SampleComponent

，可以将

构造函数：SampleComponent（）{}

。在所有类中执行此操作，错误应显示哪个类失败。以下是更改后的错误消息：browser_adapter.ts:73异常：组件“Main”视图上出现意外的指令值“SampleComponent”，我想我帮不上什么忙了，您已经收到了错误消息，正如您所说，GWT需要一些编译步骤。是否有机会看到GWT编译后代码的外观？从ng2的角度来看，代码看起来很完美。也许你可以在GWT repo中打开一个问题（他们有问题吗？如果是这样，你可以编辑你的问题并添加链接）。老实说，我认为ng2已经不在这里了……很抱歉没读到你的评论。非常感谢您提供这些有用的信息。目前，我们正在使用Angular 1.5与GWT 2.6集成。Angular2Boot看起来很有前途。我们将对此进行探索并升级。@Denero感谢您的回复。如果你对这种方法感兴趣，请别忘了给我的答案打分：）这将帮助我建立声誉。谢谢。是的，我当然想去，我昨天就试着去做了。但后来我得到一个信息，我自己没有足够的声誉去做那个手术，它记下了我的请求。希望有人会评论一下，给你应得的分数。谢谢你的解释，他们有这么严格的规定。

  constructor: function() {}

  constructor: $wnd.wrapFunction4GWT(function() {})