Post
Ask Question
Fares Ayyad

Fares Ayyad

  • NA
  • 36
  • 4.2k

Angular 4 typescript arrow function problem with browsers

Sep 24 2017 12:37 PM
Hello
 
I'm developing an application using mvc5 and angular4 in visual studio 2015, but i notice that
in Internet Explorer11 and Edge some of the code doesn't work (it's not recognized at all).
 
below is the angular4 code for the {app.component.ts} and i will explain what is the problem:
  1. import { Component } from '@angular/core';    
  2. import { SendFileService } from './Services/send-file.service';    
  3. @Component({    
  4.   selector: 'my-app',    
  5.   templateUrl: './app.component.html',    
  6.   styleUrls: ['./app.component.css']    
  7. })    
  8. export class AppComponent  {    
  9.         name = 'Angular';    
  10.         public editor;    
  11.     
  12.         constructor(private _service: SendFileService){}    
  13.     
  14.         EditorCreated(quill) {    
  15.             const toolbar = quill.getModule('toolbar');    
  16.             this.editor = quill;    
  17.             // console.log(quill)    
  18.             toolbar.addHandler('image', this.imageHandler.bind(this));    
  19.                 
  20.         }    
  21.     
  22.         imageHandler(value) {    
  23.             //   document.querySelector('input.ql-image[type=file]').addEventListener('click', () => {    
  24.             //      console.log('Hello');    
  25.             //   });    
  26.                
  27.             const ImageInput = document.createElement('input');    
  28.                 
  29.     
  30.             ImageInput.setAttribute('type', 'file');    
  31.             ImageInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');    
  32.             ImageInput.classList.add('ql-image');    
  33.             ImageInput.click();    
  34.     
  35.     
  36.     
  37.             ImageInput.addEventListener('change', () => {    
  38.                 const file = ImageInput.files[0];    
  39.                 console.log('Hello');         
  40.                     
  41.     
  42.                 if (ImageInput.files != null && ImageInput.files[0] != null) {    
  43.                         
  44.                         this._service.sendFileToServer(file);    
  45.                     
  46.                 }    
  47.                  
  48.             });    
  49.         }    
  50.     
  51.       
  52. }  
If you notice  at line 39 that there's {console.log} command that will print "hello", and this command is warrped by arrow function inside the event listener so that the problem is when i run the application i open the developer tools but i didn't find theHello word, but when i cut the command and put it before the arrow function it will appeare in the console, after reading some articles i figured out that IE11 and Edge doesn't work fine with arrow functions. 
 
Note: every thing works fine in chrome 
 
i tried some solution, the solution is to add some JS scripts to the index.cshtml which will render angular code that represents in the app.component.ts file.
 
Below is a snaphsot of these scripts:
  1.     <script src="~/node_modules/core-js/client/shim.min.js">script>  
  2.     <script src="~/node_modules/systemjs/dist/system-polyfills.js">script>  
  3.     <script src="~/node_modules/es6-shim/shims_for_IE.js">script>  
  4.     <script src="~/node_modules/es6-shim/es6-shim.min.js">script>  
  5.     <script src="~/node_modules/zone.js/dist/zone.js">script>  
  6.     <script src="~/node_modules/reflect-metadata/Reflect.js">script>  
  7.   
  8.     <script src="~/node_modules/systemjs/dist/system.src.js">script>  
  9.      
  10.   
  11.       
  12.     <script src="~/src/systemjs.config.js">script>  
  13.     <script>  
  14.       System.import('main.js').catch(function(err){ console.error(err); });  
  15.     script>  
  16.   
  17. head>  
  18. <body>  
  19.     <div>   
  20.         <my-app>Loading AppComponent content here ...my-app>  
But it doesn't help me.
 
Can any body figure out what is the problem.?