ng.core.Component(...).Class 不是函数

Question

我正在使用 Angular 2 的 ES5 风格。因此，我没有使用装饰器，而是定义了一个模板，如下所示：

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

它工作正常。最近我升级到 Angular 5，现在我有相同代码的这些错误：

ng.core.Pipe(...).Class is not a function
ng.core.Component(...).Class> is not a function
ng.core.Directive(...).Class is not a function

我应该如何在 Angular 5 中更改它？

Answer 1

JavaScript 目前被认为是第二个-class（没有双关语）公民，而 TypeScript 是首选语言，主要是因为专注于 AOT 编译，它仅适用于 TypeScript。

正如解释的那样 here,

It is no longer possible to declare classes in this format.
Component({...}).
Class({
  constructor: function() {...}
})
This format would only work with JIT and with ES5. This mode doesn’t allow build tools like Webpack to process and optimize the code, which results in prohibitively large bundles. We are removing this API because we are trying to ensure that everyone is on the fast path by default, and it is not possible to get on the fast path using the ES5 DSL. The replacement is to use TypeScript and @Decorator format.
@Component({...})
class {
  constructor() {...}
}

如中所述，普通 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 功能的替代品，任何第三方实用程序 class 库都可用于在 ES5 中引入语法糖和继承作为函数的替代品，例如uberproto or inherits.

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

ng.core.Component(...).Class 不是函数

ng.core.Component(...).Class is not a function

javascript

ecmascript-5

angular

angular5