with - webpack import jquery bootstrap




jQuery não está definido no bootstrap-sass (2)

Eu inicializei o aplicativo Angular 2 usando angular-cli. Tudo foi fácil-peasy até que decidi usar bootstrap modal. Eu simplesmente copiei o código para abrir o modal do nosso outro projeto que não usa o angular-cli. Eu adicionei as dependências jquery e bootstrap aos scripts no arquivo angular-cli.json. jQuery é reconhecido no projeto, mas quando eu tento executar this.$modalEl.modal(options) dentro do componente angular, recebo um erro que jQuery is not defined .

Na verdade, o jQuery é importado para o projeto, mas como um $ global. Eu fiz algumas escavações e, aparentemente, o bootstrap espera que o jQuery seja passado para ele como uma variável 'jQuery'. Não dá a mínima para $ .

Eu poderia expor jQuery como uma variável no arquivo webpack.config.js como fazemos em outro projeto: (muito código omitido por brevidade)

var jQueryPlugin = {
  $: 'jquery',
  jquery: 'jquery',
  jQuery: 'jquery'
}

exports.root = root;

exports.plugins = {
  globalLibProvider: new webpack.ProvidePlugin(webpackMerge(jQueryPlugin, {
    svg4everybody: 'svg4everybody/dist/svg4everybody.js'
  }))
}

mas angular-cli equipe de desenvolvimento do angular-cli decidiu não deixar outros desenvolvedores se intrometerem nos arquivos de configuração do webpack. Obrigado rapazes! Muito atencioso de você.

Eu tentei importar o jQuery diretamente para o componente Angular e um monte de outras coisas mencionadas aqui https://github.com/angular/angular-cli/issues/3202 (adicionando importações ao arquivo vendor.ts e adicionando o vendor.ts para matriz de scripts em angular-cli.json) mas nada funciona.

Para ser honesto, estou muito chateado que um problema tão trivial como adicionar dependência jquery para ser usado com bootstrap em angular-cli é um campo minado.

Você já lidou com um problema semelhante?


Eu não usei especificamente Bootstrap com Angular 2, mas eu tenho com Angular 1 e a situação é a mesma em que a versão regular do Bootstrap é projetada para funcionar com jQuery e não é construída com o Angular em mente. Você pode, claro, instalar o jQuery, mas o Javascript pode não funcionar como esperado no contexto do Angular.

A solução mais fácil é usar uma versão construída com o Angular em mente, e acredito que o ng-bootstrap é o mais proeminente deles. Eu não usei isso sozinho, mas eu usei bootstrap angular-ui para Angular 1 e isso parece ser uma contrapartida Angular 2 para o mesmo projeto.

Alternativamente, você mesmo pode envolvê-lo em uma diretiva , mas eu evitaria fazê-lo se você pudesse fazer o ng-bootstrap para fazer o que você quer, já que será muito mais trabalhoso.








bootstrap-sass