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:
- import { Component } from '@angular/core';
- import { SendFileService } from './Services/send-file.service';
- @Component({
- selector: 'my-app',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- name = 'Angular';
- public editor;
-
- constructor(private _service: SendFileService){}
-
- EditorCreated(quill) {
- const toolbar = quill.getModule('toolbar');
- this.editor = quill;
-
- toolbar.addHandler('image', this.imageHandler.bind(this));
-
- }
-
- imageHandler(value) {
-
-
-
-
- const ImageInput = document.createElement('input');
-
-
- ImageInput.setAttribute('type', 'file');
- ImageInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
- ImageInput.classList.add('ql-image');
- ImageInput.click();
-
-
-
- ImageInput.addEventListener('change', () => {
- const file = ImageInput.files[0];
- console.log('Hello');
-
-
- if (ImageInput.files != null && ImageInput.files[0] != null) {
-
- this._service.sendFileToServer(file);
-
- }
-
- });
- }
-
-
- }
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:
- <script src="~/node_modules/core-js/client/shim.min.js">script>
- <script src="~/node_modules/systemjs/dist/system-polyfills.js">script>
- <script src="~/node_modules/es6-shim/shims_for_IE.js">script>
- <script src="~/node_modules/es6-shim/es6-shim.min.js">script>
- <script src="~/node_modules/zone.js/dist/zone.js">script>
- <script src="~/node_modules/reflect-metadata/Reflect.js">script>
-
- <script src="~/node_modules/systemjs/dist/system.src.js">script>
-
-
-
- <script src="~/src/systemjs.config.js">script>
- <script>
- System.import('main.js').catch(function(err){ console.error(err); });
- script>
-
- head>
- <body>
- <div>
- <my-app>Loading AppComponent content here ...my-app>
But it doesn't help me.
Can any body figure out what is the problem.?