Desenvolvimento

19 out, 2017

Publicando Modulo Angular 4 no NPM

1202 visualizações
Publicidade

Veremos nesse artigo um passo a passo para criação de um modulo de um projeto Angular 4 e como podemos compartilhar ele no portal npm Package Manager for JavaScript.

Para quem esta trabalhando com JavaScript nos últimos anos, o npm já faz parte do seu dia dia, mas para quem ainda não o conhece, segue uma breve descrição retirada do seu site oficial.

What is npm?

Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others.

Bom, agora pensando em compartilhar com a comunidade aquele módulo que você ficou desenvolvendo freneticamente, vejamos um passo a passo de como podemos publicar um modulo de um projeto desenvolvido em Angular 4 no portal npm.

Para esse artigo, nós iremos criar um modulo integrado com a API do Google Maps. Para isso, iremos seguir os passos a baixo:

1º Criaremos um novo projeto com o Angular Cli;

2º Precisaremos gerar uma chave no Console do Google.

3º Criação do nosso Modulo.

4º Publicação do nosso código no portal npm.

Para que o artigo não fique muito longo, nós não iremos abordar a instalação do Angular Cli, iremos partir de um ambiente com ele já instalado e configurado.

Criação de um projeto Angular 4

Nosso primeiro passo será a criação do nosso projeto. Escolha um diretório no seu computador e execute o comando abaixo passando um nome de sua preferência para sua aplicação. Nós iremos utilizar angular-googlemaps.

ng new angular-googlemaps

Agora execute o comando abaixo para que criarmos o nosso modulo responsável por gerenciar o nosso componente.

ng g m modules/maps

Assim que o comando acima finalizar, execute o próximo comando para criação do nosso componente.

ng g c modules/maps

Com a execução dos comandos, nós teremos a seguinte estrutura:

Obter chave no Console do Google

Para esse passo nós iremos precisar ter uma conta de e-mail do Google, para que possamos acessar o Console. Caso você já tenha uma conta e esteja logado, basta clicar no link para que seja direcionado a pagina de criação de uma aplicação:

Escolha um nome para o seu projeto e clique em continuar. Assim que o seu projeto for criado, você será direcionado à página de credenciais conforme a imagem abaixo. Clique no link chave de API.

Na próxima página, nós iremos deixar sem restrições, mas caso você precise utilizar essa API em produção recomendo que você escolha uma das outras opções que melhor atenda aos requisitos do seu projeto.

Clique em Criar e copie a chave que ele irá gerar, salve ela em um local de fácil acesso para que possamos utilizá-la nos próximos passos.
Agora execute o comando abaixo para que possamos adicionar a biblioteca do Google no nosso projeto:

npm install @agm/core — save

Implementação do nosso Modulo

Com tudo OK nos passos anteriores, vamos implementar o código do nosso modulo. Para isso, abra o projeto que criamos em um editor de sua preferência, nós iremos utilizar o Visual Studio Code para esse artigo por ele ser grátis e muito rápido. Com ele aberto, vamos editar o nosso arquivo maps.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MapsComponent } from './maps.component';
import { AgmCoreModule } from '@agm/core';
@NgModule({
  imports: [
    CommonModule,
    AgmCoreModule.forRoot({
      apiKey: 'Sua Chave'
    })
  ],
  declarations: [MapsComponent]
})
export class MapsModule { }

No código acima, nós estamos passando para a biblioteca que nós baixamos, a chave que nós criamos no Google Console.

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-maps',
  templateUrl: './maps.component.html',
  styleUrls: ['./maps.component.css']
})
export class MapsComponent {
  lat: number = -23.586479;
  lng: number = -46.682078;
  constructor() { }
}

Agora no nosso arquivo maps.component.ts, nós criamos duas novas variáveis lat para nossa latitude e lng para longitude.

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

No nosso template nós adicionamos as diretivas responsáveis por criar o nosso mapa. Até aqui, não tivemos nenhuma novidade. Vamos agora adicionar um tamanho para o nosso mapa.

.agm-map {
height: 300px;
}

Para que possamos testar o nosso componente, nós precisamos agora exportar o nosso modulo. Para isso, adicione o seguinte trecho de código no seu arquivo maps.module.ts abaixo de declarations. Em seguida, abra o seu arquivo app.module.ts e atualize ele conforme está no código abaixo, onde estamos importando o nosso MapsModule.

@NgModule({
  declarations: [
    AppComponent    
  ],
  imports: [
    BrowserModule,
    MapsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Execute o comando ng serve e abra no seu navegador a URL http://localhost:4200, em seguida adicione a diretiva a baixo no seu arquivo app.component.html

<app-maps></app-maps>

Caso tudo esteja configurado corretamente você irá ver o mapa com o endereço do prédio do Google São Paulo conforme está na imagem abaixo:

Um resumo do que fizemos até agora:

  • Criamos um novo projeto com o Angular Cli.
  • Criamos uma Chave no Google Console.
  • Adicionamos a biblioteca agm no nosso projeto.
  • Importamos o nosso modulo para testar se estava tudo OK.

Bom, agora, para que possamos subir o nosso modulo no npm, nós vamos precisar receber a nossa chave dinamicamente. Para isso, precisaremos fazer algumas alterações em alguns arquivos. Vamos começar com o nosso maps.module.ts:

import { NgModule, Injectable } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MapsComponent } from './maps.component';
import { AgmCoreModule } from '@agm/core';
@Injectable()
export class GoogleMapsConfig {
  apiKey: string;
public getApiKey(key: any) {
    this.apiKey = key;
  }
}
@NgModule({
  imports: [
    CommonModule,
     AgmCoreModule.forRoot()
  ],
  declarations: [MapsComponent],
  exports: [
    MapsComponent
  ],
  providers: [GoogleMapsConfig]
})
export class MapsModule { }

Vamos entender o código acima. Nós criamos um novo service chamado GoogleMapsConfig, iremos utilizar ele para passar a nossa chave para o nosso AgmCoreModule, em seguida nós adicionamos o nosso service provider.

Agora vamos para o nosso AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MapsModule, GoogleMapsConfig } from './modules/maps/maps.module';
import { MapsComponent } from './modules/maps/maps.component';
import { LAZY_MAPS_API_CONFIG } from '@agm/core';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MapsModule
  ],
  providers: [{ provide: LAZY_MAPS_API_CONFIG, useClass: GoogleMapsConfig }],
  bootstrap: [AppComponent]
})
export class AppModule { }

No código acima nós importamos LAZY_MAPS_API_CONFIG do agm/core para que possamos passar a nossa chave através do provider utilizando a nossa classe de GoogleMapsConfig.

Agora, para podermos finalizar essa parte do nosso código, abra o seu arquivo app.component.ts e atualize ele conforte está no código abaixo:

import { Component } from '@angular/core';
import { GoogleMapsConfig } from './modules/maps/maps.module';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title: string = 'App Component';
constructor(private googleMapsConfig: GoogleMapsConfig) {
    this.googleMapsConfig.getApiKey('sua chave');
  }
}

Aqui nós estamos injetando o nosso serviço no nosso componente e passando o valor da nossa chave como parâmetro do método getApiKey(). Para que possamos testar se tudo continua funcionando corretamente, execute o comando ng serve e abra o navegador novamente no endereço http://localhost:4200/. Caso tenha aparecido algum erro, revise os passos anteriores para que possa partir para o próximo passo.

Publicação no portal npm

Para essa etapa, precisaremos de uma conta no portal npm. Caso ainda não tenha basta clicar no link e criar uma. Com o seu usuário e senha do npm em mãos, digite no seu terminal npm login e passe as suas credenciais para ele.

Login no NPM

Agora que estamos logados no portal npm e com o nosso pacote pronto para ser publicado, nós precisamos de uma biblioteca chamada ng-packagr, ele irá compilar a nossa biblioteca criada em TypeScript para o formato de uma pacote do Angular. Execute o comando abaixo no seu terminal para importar o ng-packagr.

npm install ng-packagr --save-dev

Agora crie um novo arquivo chamado ng-package.json na raiz do seu projeto, conforme esta na imagem abaixo.

Em seguida, abra ele e adicione o seguinte código:

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "index.ts"
  }
}

Agora crie um novo arquivo chamado index.ts na raiz do seu projeto, conforme está no entyFile acima. Esse arquivo será responsável por importar o nosso Modulo. Agora precisamos importar o nosso MapsModule nele. Para isso, adicione o seguinte código:

export * from './src/app/modules/maps/maps.module'

O próximo passo será adicionar um novo script no nosso arquivo package.json:

"packagr": "ng-packagr -p ng-package.json"

Agora execute o comando npm run packagr, ele irá gerar um dist da nossa biblioteca. A execução desse comando irá criar os arquivos abaixo:

Por fim, execute os comandos npm pack para gerar um arquivo .tgz com a versão do nosso projeto e o comando: npm publish dist para que possamos publicar a nossa biblioteca no portal npm.

Com isso finalizamos o nosso artigo com a publicação da nossa biblioteca no portal. Caso queria ver como ficou a versão final do código que utilizamos nesse artigo, segue abaixo o seu link no GitHub e o link da biblioteca que nós criamos para esse artigo no portal npm.

GitHub: https://github.com/programadriano/angular-googlemaps

NPM: https://www.npmjs.com/package/angular-googlemaps