Tech
Forums
Jobs
Books
Events
Interviews
Live
More
Learn
Training
Career
Members
Videos
News
Blogs
Login
Sign Up
Ask Question
0
Reply
Angular 4 typescript arrow function problem with browsers
Fares Ayyad
Sep 24 2017 12:37 PM
197
Reply
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;
// console.log(quill)
toolbar.addHandler(
'image'
,
this
.imageHandler.bind(
this
));
}
imageHandler(value) {
// document.querySelector('input.ql-image[type=file]').addEventListener('click', () => {
// console.log('Hello');
// });
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.?
Upload Source Code
Select only zip and rar file.
Post
Reset
Cancel
Answers (
0
)
Next Recommended Forum
No connection could be made because the target machine acti
asp.net Resume Upload and display resume in textbox