Importar em projeto Angular 2

[chrisbenseler]

@filipedeschamps estou brincando com Angular 2 pensei usar o cep-promise num teste.

Existe uma forma de dar um import nele?
import cep from 'cep-promise'
não funciona, diz que não existe o módulo. Testei, meio que no chute, com
import cep from 'cep-promise/dist/cep-promise'
mas não rola também.

Agora, usando um require, funciona normalmente. Exemplo:

let cep = require('cep-promise/dist/cep-promise');
...
export class SearchComponent implements OnInit {
  ngOnInit() {
  	cep('04477-100')
  	.then( data => {
  		console.log(data)
  	})
  }
}

Eu nem sei se isso é uma issue na real, se tem alguma coisa a ver com o TypeScript, se é algo relacionado com o babelify.

[lucianopf]

@chrisbenseler
E se vc usar a importação assim:
import * as cepModule from 'cep-promise'
Não rola não?!
Se for, assim acho que vc chama assim: cepModule.cep('127836213')

[chrisbenseler]

Não rolou @lucianopf

search.component.ts (3,28): Cannot find module 'cep-promise'.

Na raiz da pasta node_modules/cep-promise/ não tem nenhum .js, só tem os .MD, o LICENSE e o package.json
Pastas, só tem a content/, coverage/ e dist/

[lucianopf]

Mas o package.json aponta pro dist direitinho, isso que usualmente é identificado. =/
Por isso funciona no node de boa, tenta fazer isso usando a versão web pfv. =/

[lucianopf]

@chrisbenseler
Mano, usando em um projeto react meu aqui eu consegui acessar ele assim agora:
import { default as cep } from 'cep-promise'

[chrisbenseler]

Mesmo problema aqui. Se quiser tentar reproduzir, tendo o angular-cli instalado ai no environment (fiz do 0 aqui, um projeto blank, pra ver se tinha algo a ver)

na cli:

ng new testeceppromise
npm install --save cep-promise

fazer o import no app.components.ts
import { default as cep } from 'cep-promise';

na cli:
ng serve

nesse projeto novo, se troco o import por aquele require, também funciona.
Estou com a versão 2.0.3 da cep-promise e versão 6.4.0 do node.

PS: também tem essa implementação nesse projetinho aqui, de estudos

[lucianopf]

@petronetto consegue dar um help pro camarada aí?! rsrs

[chrisbenseler]

@lucianopf to achando que tem alguma coisa a ver com o compilador do TypeScript, mas é um chute. Vou dar uma googlada. Tipo essa issue aqui.

[petronetto]

@chrisbenseler se você está usando o angular-cli const cep = require('cep-promise') vai funcionar. Se você quiser usar o import você tem que criar um arquivo de definição https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html

Você pode criar um arquivo, por exemplo cep.d.ts, com o conteúdo:

declare module 'cep-promise' {
  const cep: any;
  export = cep;
}

Se esse arquivo estiver em um diretório diferente do seu componente, então você precisa informar onde ele está com /// <reference path="/path/to/cep.d.ts" />

Espero ter ajudado.

[petronetto]

Criei um Pull Request com a definição, com isso o import { default as cep } from 'cep-promise' vai funcionar.

[filipedeschamps]

Open source = ❤️

[chrisbenseler]

@petronetto com o require estava funcionando mesmo, eu até estava usando assim. Vou dar uma estudada nessa questão, junto com teu PR, pra ver se entendo o que mudou. Obrigado!

[petronetto]

@chrisbenseler em linhas gerais, quando você usa o require, simplesmente está pegado algo do seu node_modules e jogando para dentro de uma constante qualquer, o TS não vai fazer nenhuma validação e não vai te dar autocomplete nem nada do tipo.
Quando você usa o import o TS vai procurar um arquivo de definição, para que ele possa fazer a validação. Com a definição que criei por exemplo, o TS sabe que retorna uma promise, com isso ele pode ter dar o autocomplete e sabe também que aceita string ou number como parâmetros de entrada, se você tentar fazer cep(true), por exemplo, o TS vai acusar um erro e te dizer que boolean não é um parâmetro de entrada válido.

Qualquer dúvida estamos ai.

[chrisbenseler]

Valeu @petronetto

Assim que for pro npm a atualização, testo essas mudanças todas.

[filipedeschamps]

@chrisbenseler acabei de fazer o release 👍 está na 2.0.4