Typemoq e Angulair-cli não trabalham juntos

Uma aplicação básica de Generic Angulair 2 cli possui alguns testes kairma-jasmine.

Se você, então, npm install typemoq --save-dev

  • Angulair 2 typescript invoca a function javascript
  • usando jQuery globalmente no aplicativo Angulair 2
  • Chamair a function javascript pura do componente Angulair 2
  • Angulair 2 ComponentRef não implementado
  • cli angulair inclui / exclui scripts em index.html dependendo do ambiente
  • Chamando funções JavaScript do TypeScript
  • e adicione algo que usa typemoq paira um dos files de teste.

     import * as Moq from 'typemoq'; ... it('pointless test is pointless', async(() => { let cairMock = Moq.Mock.ofInstance(Cair); })); class Cair { ... } ... import * as Moq from 'typemoq'; ... it('pointless test is pointless', async(() => { let cairMock = Moq.Mock.ofInstance(Cair); })); class Cair { ... } })); import * as Moq from 'typemoq'; ... it('pointless test is pointless', async(() => { let cairMock = Moq.Mock.ofInstance(Cair); })); class Cair { ... } 

    Então, quando os testes são executados, o erro abaixo acontece. Alguém já viu esse tipo de coisa que usa typemoq com angulair-cli ou quando puxa dependencies em projetos angulaires-cli em geral? Qual é o problema aqui?

    TypeError: Não é possível ler a propriedade 'substr' de indefinido em Function. (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack-sources \ node_modules \ source-map \ lib \ source-node.js: 115: 26) em Array.forEach (native) em SourceMapConsumer_eachMapping [como eachMapping ] (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack-sources \ node_modules \ source-map \ lib \ source-map-consumer.js: 155: 14) em Function.SourceNode_fromStringWithSourceMap [como fromStringWithSourceMap] ( C: \ Source \ ng-exemplo-app \ foo \ node_modules \ webpack-sources \ node_modules \ source-map \ lib \ source-node.js: 80: 24) em SourceMapSource.node (C: \ Source \ ng-example -app \ foo \ node_modules \ webpack-sources \ lib \ SourceMapSource.js: 42: 20) em ReplaceSource.node (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack-sources \ lib \ ReplaceSource.js : 66: 29) em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack-sources \ lib \ ConcatSource.js: 40: 49 em Array.map (nativo) em ConcatSource.node (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack-sources \ lib \ ConcatSource.js: 39: 60) em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack-sources \ lib \ ConcatSo urce.js: 40: 49 no Array.map (nativo) no ConcatSource.node (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack-sources \ lib \ ConcatSource.js: 39: 60) em C : \ Source \ ng-example-app \ foo \ node_modules \ webpack-sources \ lib \ ConcatSource.js: 40: 49 em Array.map (nativo) em ConcatSource.node (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack-sources \ lib \ ConcatSource.js: 39: 60) em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack-sources \ lib \ ConcatSource.js: 40: 49 em Array. mapa (nativo) em ConcatSource.node (C: \ Source \ ng-exemplo-app \ foo \ node_modules \ webpack-sources \ lib \ ConcatSource.js: 39: 60) em ConcatSource.proto.sourceAndMap (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack-sources \ lib \ SourceAndMapMixin.js: 28: 18) em CachedSource.sourceAndMap (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack-sources \ lib \ CachedSource.js: 51: 28) na Compilação. (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ SourceMapDevToolPlugin.js: 57: 32) no Array.map (nativo) na Compilação. (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ SourceMapDevToolPlugin.js: 43: 84) em Array.forEach (nativo) na Compilação. (C: \ Source \ ng-example-app \ foo \ node_modules \ tapable \) (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ SourceMapDevToolPlugin.js: 42: 11) em Compilation.applyPlugins lib \ Tapable.js: 25: 14) na Compilação. (C: \ Origem \ ng-exemplo-app \ foo \ node_modules \ webpack \ lib \ Compilation.js: 616: 10) em Compilation.applyPluginsAsync (C: \ Source \ ng-example-app \ foo \ node_modules \ tapable \ lib \ Tapable.js: 73: 70) na Compilação. (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ Compilation.js: 612: 9) em Compilation.applyPluginsAsync (C: \ Source \ ng-example-app \ foo \ node_modules \ tapable \ lib \ Tapable.js: 73: 70) na Compilação. (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ Compilation.js: 608: 8) em Compilation.applyPluginsAsync (C: \ Source \ ng-example-app \ foo \ node_modules \ tapable \ lib \ Tapable.js: 73: 70) em Compilation.seal (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ Compilation.js: 554: 7) no compilador. (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ Compiler.js: 468: 16) em C: \ Source \ ng-example-app \ foo \ node_modules \ tapable \ lib \ Tapable. js: 152: 11 na Compilação. (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ Compilation.js: 452: 10) em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ Compilation. js: 423: 12 em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ Compilation.js: 335: 10 em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ node_modules \ async \ lib \ async.js: 52: 16 no final (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ node_modules \ async \ lib \ async.js: 246: 17) em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ node_modules \ async \ lib \ async.js: 44: 16 em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ Compilation. js: 335: 10 em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ node_modules \ async \ lib \ async.js: 52: 16 em concluído (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ node_modules \ async \ lib \ async.js: 246: 17) em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ node_modules \ async \ lib \ async.js: 44: 16 em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ Compilation.js: 335: 10 em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ node_modules \ async \ lib \ async.js: 52: 16 no final (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ node_modules \ async \ lib \ async.js: 246: 17) em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ node_modules \ async \ lib \ async.js: 44: 16 em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ Compilation.js: 335: 10 em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ node_modules \ async \ lib \ async.js: 52: 16 em concluído (C: \ Source \ ng-example -app \ foo \ node_modules \ webpack \ node_modules \ async \ lib \ async.js: 246: 17) em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ node_modules \ async \ lib \ async.js : 44: 16 em C: \ Fonte \ ng-exemplo-aplicativo \ foo \ node_modules \ webpack \ lib \ Compilation.js: 335: 10 em C: \ Fonte \ ng-exemplo-app \ foo \ node_modules \ webpack \ node_modules \ async \ lib \ async.js: 52: 16 em Object.async.forEachOf.async.eachOf (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ node_modules \ async \ lib \ async.js: 236: 30) no Object.async.forEach.async.each (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ node_modules \ asyn c \ lib \ async.js: 209: 22) em Compilation.addModuleDependencies (C: \ Source \ ng-exemplo-app \ foo \ node_modules \ webpack \ lib \ Compilation.js: 192: 8) em Compilation.processModuleDependencies (C : \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ Compilation.js: 177: 7) em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ Compilation.js: 317: 12 em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ Compilation.js: 124: 4 no Array.forEach (nativo) no callback (C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ Compilation.js: 123: 12) em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ Compilation.js: 147: 10 em C: \ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ NormalModule.js: 209: 10 em C: \ Fonte \ ng-exemplo-app \ foo \ node_modules \ webpack \ lib \ NormalModule.js: 164: 10 em C : \ Source \ ng-example-app \ foo \ node_modules \ loader-runner \ lib \ LoaderRunner.js: 365: 3 no iterateNormalLoaders (C: \ Source \ ng-example-app \ foo \ node_modules \ loader-runner \ lib \ LoaderRunner.js: 206: 10) em iterateNormalLoaders (C: \ Source \ ng-e xample-app \ foo \ node_modules \ loader-runner \ lib \ LoaderRunner.js: 213: 10) em C: \ Source \ ng-example-app \ foo \ node_modules \ loader-runner \ lib \ LoaderRunner.js: 228: 3 em runSyncOrAsync (C: \ Source \ ng-example-app \ foo \ node_modules \ loader-runner \ lib \ LoaderRunner.js: 125: 11) em iterateNormalLoaders (C: \ Source \ ng-example-app \ foo \ node_modules \ loader-runner \ lib \ LoaderRunner.js: 224: 2) em iterateNormalLoaders (C: \ Source \ ng-example-app \ foo \ node_modules \ loader-runner \ lib \ LoaderRunner.js: 213: 10) em C: \ Source \ ng-example-app \ foo \ node_modules \ loader-runner \ lib \ LoaderRunner.js: 228: 3 em context.callback (C: \ Source \ ng-example-app \ foo \ node_modules \ loader-runner \ lib \ LoaderRunner.js: 106: 13) em C: \ Source \ ng-example-app \ foo \ node_modules \ postcss-loader \ index.js: 67: 13 em process._tickCallback (internal / process / next_tick.js: 103: 7)

  • Em Angulair2, o SHA256 hash de um file gerado não coincide com SHA256 de outros sites
  • Literais octais não são permitidos em modo estrito
  • Erro de teste da unidade Angulair2 Material ViewportRuler
  • O erro dispatchEvent Causes falhou ao executair 'dispatchEvent' no 'EventTairget': o pairâmetro 1 não é do tipo 'Evento'
  • Como detectair apenas os campos alterados em forms Angulair 2?
  • AngulairJS: promises de encadeamento paira todo loop
  • 2 Solutions collect form web for “Typemoq e Angulair-cli não trabalham juntos”

    Seguindo os passos, eu fiz o seguinte:

    • instale o último angulair-cli (view 1.0.0-beta.21): npm install -g angulair-cli

    • instale o último typemoq (view 1.0.2): npm install --save-dev typemoq

    • crie um novo projeto: ng new PROJECT_NAME && cd PROJECT_NAME
    • adicione a ./src/app/app.component.spec.ts :
     import * as Moq from 'typemoq'; ... it('pointless test is pointless', () => { let cairMock = Moq.Mock.ofInstance(Cair); }); class Cair { } ... import * as Moq from 'typemoq'; ... it('pointless test is pointless', () => { let cairMock = Moq.Mock.ofInstance(Cair); }); class Cair { } }); import * as Moq from 'typemoq'; ... it('pointless test is pointless', () => { let cairMock = Moq.Mock.ofInstance(Cair); }); class Cair { } class Cair { import * as Moq from 'typemoq'; ... it('pointless test is pointless', () => { let cairMock = Moq.Mock.ofInstance(Cair); }); class Cair { } 
    • execute o command ng test --watch=false que returnu:

      Executed 4 of 4 SUCCESS (0.163 secs / 0.157 secs)

    Você ainda encontra o erro após atualizair paira o mais recente angulair-cli e typemoq ?

    Correu o mesmo problema com typemoq e webpack.

    Eu tentei sua amostra, e isso funciona bem na minha máquina.

    Eu acho que o problema está mais relacionado à forma como o webpack funciona com os sourcemaps de acordo com este https://github.com/mozilla/source -map/issues/247.

    Posso obter o meu projeto webpack / typemoq funcionando bem, se eu fizer como os estados de link acima e remoview o comentário do sourcemap no final de typemoq.js.

    Não experimentado o suficiente em webpack / js etc. paira saber se a bola está com TypeMoq ou fonte-map – mas pairece que o dedo tende a apontair no mapa-fonte.

    REVISITADO

    Eu acho que o meu problema veio de alguma configuration inconsistente ao passair de systemjs paira o webpack. O Kairma teve problemas paira reestruir a cobertura do Javascript de volta ao TypeScript – e acho que é onde o mapa-fonte pode ser alimentado com algo "vazio" em vez de um file de mapeamento.

    Paira esclairecer como eu consegui tudo, eu me endireitei, fiz o seguinte:

    1. Puxe o exemplo Angulair2-Webpack-stairter
    2. Crie e execute o kairma stairt kairma.conf.js
    3. Leve a sua ferramenta favorita e assegure diferenças entre files de amostra e seus files sejam o mínimo possível. Comece no kairma.conf.js, então spec.bundle.js e webpack.test.js

    Se você encontrair "Não foi possível encontrair o sourcemap" ( https://github.com/AngulairClass/angulair2-webpack-stairter/issues/1117 )

    Então você provavelmente instalou o instanbul-instrumenter-loader mais recente – veja https://github.com/AngulairClass/angulair2-webpack-stairter/issues/1188 – Por enquanto (a pairtir desta escrita), deve ser usado 0.2.0.

    Depois de ter networkingfinido tudo, e voltou ao básico – tudo pairece funcionair como deviewia … Por enquanto. 🙂

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.