Deseja solicitar um recurso ou relatar um bug?
Erro
Qual é o comportamento atual?
Eu incluí "signature_pad": "^3.0.0-beta.3" em angular6 via package.json
Está funcionando bem em todos os navegadores, mas no IE11 o site não pode ser carregado devido a um erro.
"Syntaxerror" sem qualquer descrição do que está errado.
Eu não tenho ideia de como é o processo de compilação do Angular 6, mas você deve compilá-lo usando a mesma configuração do Babel que você usa para compilar seu próprio código.
Você também pode usar o recurso webpack resolve.alias
(não testado), que deve permitir que você carregue a versão já compilada:
module.exports = {
//...
resolve: {
alias: {
signature_pad: 'signature_pad/dist/signature_pad.js'
}
}
};
Obrigado pela sua resposta rápida.
Vou tentar. Também tentarei um polyfill babel se sua ideia não estiver funcionando. Eu nunca usei antes.
Tente importar desta forma:
mudar de:
import SignaturePad from 'signature_pad';
para:
import * as SignaturePad from 'signature_pad/dist/signature_pad';
função download(dataURL, nome do arquivo) {
if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1) {
window.open(dataURL);
}
### //Adicione a instrução abaixo no app.js - funciona porque outros dois não são suportados no IE 11
else if(window.navigator && window.navigator.msSaveOrOpenBlob){var blobwin = dataURLToBlob(dataURL);window.navigator.msSaveOrOpenBlob(blobwin, nome do arquivo);}
outro {
var blob = dataURLToBlob(dataURL);
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.style = "display: none";
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
}
}
A solução alternativa do @sdqwerty funcionou para mim. No entanto, vale a pena notar que o webpack tem um campo chamado mainFields cujo padrão é ['browser', 'module', 'main']
. Estes estão em ordem de prioridade, e signature_pad não inclui um browser
em package.json , então o módulo é selecionado. Isso mapeia para o arquivo .m.js
, que inclui sintaxe ES6 como classe -- que o IE11 não suporta.
@szimek Eu recomendo que você atualize o package.json para incluir um campo do navegador conforme as recomendações do npm aqui:
https://docs.npmjs.com/files/package.json#browser
Isso deve esclarecer esses problemas do IE11.
Isso funcionou para mim:
module.exports = {
resolve: {
alias: {
'signature_pad': 'signature_pad/dist/signature_pad' // <- hier without '.js' at the end!
}
}
};
E com Laravel-Mix:
mix.webpackConfig({
resolve: {
alias: {
'signature_pad': 'signature_pad/dist/signature_pad',
}
}
});
Eu não tenho ideia de como é o processo de compilação do Angular 6, mas você deve compilá-lo usando a mesma configuração do Babel que você usa para compilar seu próprio código.
Você também pode usar o recurso webpack
resolve.alias
(não testado), que deve permitir que você carregue a versão já compilada:module.exports = { //... resolve: { alias: { signature_pad: 'signature_pad/dist/signature_pad.js' } } };
A versão compilada v3.0.0-beta.4 não suporta IE11 por causa da palavra-chave class
.
Comentários muito úteis
Tente importar desta forma:
mudar de:
import SignaturePad from 'signature_pad';
para:
import * as SignaturePad from 'signature_pad/dist/signature_pad';