如何将自定义polyfill添加到angular-cli项目?

布赖恩

我需要能够轻松地对集合进行排序的能力,并且我选择了扩展Array原语。我意识到在大多数情况下,这被认为是不好的做法,但这只会在内部使用(而不是共享库)。无论我尝试了什么方法,即使在操场上都能达到预期的效果,我都没有得到有效的结果

我尝试在其中添加polyfill内联,/src/polyfills.ts但是当我调用该方法时,这会在控制台中给我一个“ TypeError:试图分配给只读属性$sortBy...

declare global {
  interface Array<T> {
    $sortBy(sortKey:string): T[];
  }
}

if (!Array.prototype['$sortBy']) {

  Object.defineProperty(Array.prototype, '$sortBy', {
    value: function(sortKey) {
      return this.sort( function(a, b) { // TypeError here???
        if (a[sortKey] < b[sortKey]) { return -1; }
        if (a[sortKey] > b[sortKey]) { return 1; }
        return 0;
      });
    }
  })

}

我也尝试通过npm添加纯JavaScript版本并导入,但这给了我相同的类型错误。有什么秘密???

/node_modules/my-polyfills/sortBy.js

if (!Array.prototype.$sortBy) {
  Object.defineProperties(Array.prototype, {
    '$sortBy': {
      value: function (sortKey) {
        return this.sort(function (a, b) {
          if (a[sortKey] < b[sortKey]) {
            return -1;
          }
          if (a[sortKey] > b[sortKey]) {
            return 1;
          }
          return 0;
        });
      }
    }
  });
}

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": { ... },
  "apps": [
    {
      ...,
      "scripts": [
        "../node_modules/my-polyfills/sortBy.js",
        "../node_modules/moment/moment.js"
      ],
      ...
    }
  ],
  ...
}
艾哈迈德·穆萨拉姆(Ahmed Musallam)

我在angular cli 1.0.0上生成了一个应用程序。虽然我认为您的问题与该版本无关,但我在下面采用了您的代码并将其附加到src/polyfills.ts预期的工作方式:

declare global {
  interface Array<T> {
    $sortBy(sortKey:string): T[];
  }
}

if (!Array.prototype['$sortBy']) {

  Object.defineProperty(Array.prototype, '$sortBy', {
    value: function(sortKey) {
      return this.sort( function(a, b) { // TypeError here???
        if (a[sortKey] < b[sortKey]) { return -1; }
        if (a[sortKey] > b[sortKey]) { return 1; }
        return 0;
      });
    }
  })
}

在我的组件之一中,我添加了:

var a = [1,2,3];
var b = a.$sortBy('');
console.log(b)

我没有在控制台中看到错误,并且阵列a打印得很好。

我认为您遇到的问题是因为您的代码中包含上述代码,src/polyfills.ts 并且您包含了相同的polyfill/node_modules/my-polyfills/sortBy.js并将其添加到scripts您的.angular-cli

您应该添加或不添加。我推荐前者,但在它自己的文件中,而不是附加到polyfills.ts

TypeError: Attempted to assign to readonly property当您尝试将不可写属性分配给其他内容时,会发生此错误通过使用Object.defineProperty,您可以将其设为$sortBy不可写。您定义了Arrays.prototype。$ sortBy,然后尝试通过将其分配给新函数来修改该$ sortBy,因此会出现错误。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

将自定义Maven依赖项添加到Gradle项目

如何将真棒字体添加到Angular 2 + CLI项目

如何将引导程序添加到angular-cli项目

使用CocoaPods时如何将自定义项目配置添加到Xcode?

如何使用菜单布局将自定义项目添加到NavigationView?

如何将Web Animations API polyfill添加到使用Angular CLI创建的Angular 2项目中

将自定义项目模板添加到Mac的Visual Studio预览版

将自定义字体添加到cordova项目

Angular将自定义.css文件添加到Angular-CLI项目

将自定义项目模板添加到GitLab

将自定义按钮组添加到Outlook中的Home功能区-VSTO项目

我可以在Angular CLI应用程序中将自定义中间件添加到开发服务器吗?

如何将自定义项目添加到listView反向模式的最后一个索引?

如何将项目动态添加到ListView的自定义适配器

如何将自定义项目添加到nautilus上下文菜单中,而不是添加到子菜单中?

将自定义HTML帮助器添加到MVC项目

如何将自定义项目符号添加到tinyMCE?

通过CLI将自定义记录器添加到JBoss EAP 6.2

如何将自定义生成参数添加到Visual Studio 2013 C#项目?

将自定义工作流程添加到“创建项目”屏幕

如何将自定义ui(使用类似photoshop的程序)添加到android应用项目中?

Wix无法将自定义操作添加到项目

在Visual Studio 2013中将自定义项目添加到智能感知

将自定义信息添加到Office365中的日历项目

如何将自定义类添加到emmet.io列表包装中的项目?

Asana API - 如何将子任务添加到具有自定义字段的项目

如何将自定义 css 导入 reactjs 项目

当通过 Ajax 检索项目时,将自定义数据属性添加到 Semantic UI Dropdown

如何将自定义警报对话框中的项目添加到列表视图?