javascript - ng.core.Component(…).Class不是函数

我使用的是Angular 2的ES5版本。因此，我没有使用装饰器，而是按以下方式定义了模板：

var someComponent = ng.core.Component({
    // component configuration
}).Class({
    // component class
});

运行正常。最近我升级到了Angular 5，现在对于相同的代码我遇到了以下错误：


  ng.core.Pipe（...）。Class不是函数
   ng.core.Component（...）。Class>不是函数
  ng.core.Directive（...）。Class不是函数


如何在Angular 5中更改此设置？

最佳答案

目前，JavaScript被认为是第二等（非双关语）公民，而TypeScript是首选语言，这主要是因为其专注于AOT编译，而AOT编译仅适用于TypeScript。

如here所述，


  不再可能以这种格式声明类。

Component({...}).
Class({
  constructor: function() {...}
})

  
  此格式仅适用于JIT和ES5。此模式不
  允许像Webpack这样的构建工具来处理和优化代码，从而
  导致束过大。我们正在删除此API
  因为我们正在努力确保每个人都走在快速道路上
  默认，并且无法使用ES5进入快速路径
  DSL。替换为使用TypeScript和@Decorator格式。

@Component({...})
class {
  constructor() {...}
}

如this answer中所述，在普通ES5及更高版本中，装饰器的替代方法是使用annotations和parameters静态属性的类（因此是函数）的注释。

所以

var SomeComponent = ng.core.Component({...})
.Class({
  constructor: [
    [new ng.core.Inject(Svc)],
    function (svc) {...}
  ],
  foo: function () {...}
});

变成

SomeComponent.annotations = [new ng.core.Component(...)];
SomeComponent.parameters = [
  [new ng.core.Inject(Svc)]
];
function SomeComponent(svc) {...}
SomeComponent.prototype.foo = function () {...};

作为Class功能的替代，任何第三方实用程序类库都可用于在ES5中引入语法糖和继承，以替代功能，例如： uberproto或inherits。

强烈建议将现有的Angular JavaScript应用程序迁移到TypeScript，后者在AOT编译模式下将提供卓越的性能和更小的应用程序占用空间，在将来的版本中它将成为默认模式。