代码之家  ›  专栏  ›  技术社区  ›  Jim

IE11和Firefox上的Angular6自定义元素出现语法错误和阴影DOM错误

  •  8
  • Jim  · 技术社区  · 8 年前

    我创建了一个新的angular cli项目,其中一个自定义元素使用 these directions 。它在铬合金上工作得很好。 我已经在所有必要的Internet Explorer填充中发表了评论。

    我已经把额外的 @webcomponents/ …但是 @webcomponents 引起了一个问题!

    node_modules/@webcomponents/custom-elements/src/native-shim.js 包含Internet Explorer不支持的箭头函数,因此出现以下错误:

    语法错误
    如果有人能给我指一个角度cli演示/回购 (带有自定义元素) 任何在ie11上编译和工作的地方,这将是一个巨大的帮助!

    enter image description here

    enter image description here

     // `node_modules/@webcomponents/custom-elements/src/native-shim.js`
     *  Compiling valid class-based custom elements to ES5 will satisfy these
     *  requirements with the latest version of popular transpilers.
     */
    (() => { // THIS IS NOT ACTUALLY LEGAL IN IE
      'use strict';
    
      // Do nothing if `customElements` does not exist.
      if (!window.customElements) return;
    

    我的全部填充物如下所示:

    /***************************************************************************************************
     * BROWSER POLYFILLS
     */
    /** IE9, IE10 and IE11 requires all of the following polyfills. **/
    import 'core-js/es6/symbol';
    import 'core-js/es6/object';
    import 'core-js/es6/function';
    import 'core-js/es6/parse-int';
    import 'core-js/es6/parse-float';
    import 'core-js/es6/number';
    import 'core-js/es6/math';
    import 'core-js/es6/string';
    import 'core-js/es6/date';
    import 'core-js/es6/array';
    import 'core-js/es6/regexp';
    import 'core-js/es6/map';
    import 'core-js/es6/weak-map';
    import 'core-js/es6/set';
    
    /** IE10 and IE11 requires the following for NgClass support on SVG elements */
    // import 'classlist.js';  // Run `npm install --save classlist.js`.
    
    /** IE10 and IE11 requires the following for the Reflect API. */
    import 'core-js/es6/reflect';
    
    
    /** Evergreen browsers require these. **/
    // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
    import 'core-js/es7/reflect';
    
    
    /**
     * Web Animations `@angular/platform-browser/animations`
     * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
     * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
     **/
    // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
    
    /**
     * By default, zone.js will patch all possible macroTask and DomEvents
     * user can disable parts of macroTask/DomEvents patch by setting following flags
     */
    
     // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
     // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
     // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
    
     /*
     * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
     * with the following flag, it will bypass `zone.js` patch for IE/Edge
     */
    // (window as any).__Zone_enable_cross_context_check = true;
    
    /***************************************************************************************************
     * Zone JS is required by default for Angular itself.
     */
    import 'zone.js/dist/zone';  // Included with Angular CLI.
    
    import '@webcomponents/custom-elements/custom-elements.min';
    import '@webcomponents/custom-elements/src/native-shim';
    import 'bluebird';
    
    /***************************************************************************************************
     * APPLICATION IMPORTS
     */
    
    2 回复  |  直到 8 年前
        1
  •  2
  •   Brachacz    8 年前

    https://github.com/sulco/angular-6-web-components/pull/2

    在这里,伙计,这在过去的两天里拯救了我的理智,点击并被祝福;d

    基本上,他从组件中移除了本机封装,并以明显正确的方式使用了polyfill,而我无法建立自己。

    如果签出此拉取请求,请运行 npm install , npm run build , npm run package npm run serve ,都应该在chrome、ff和ie11上工作(至少对我有效)。

        2
  •  2
  •   Neckster    7 年前

    根据我的经验,建议的答案在所有情况下都不起作用。只要尝试在一个文件中放置两个基于角度的web组件,就不会得到预期的行为。签出此 artice 一个最新的工作示例。