Arquitectura, buenas prácticas y desarrollo sobre la nueva herramienta de Microsoft SharePoint 2016

SharePoint FrameWork: Cómo utilizar Angular 2 en los WebParts

Tal y como avanzamos en el artículo anterior, el nombre de la nueva herramienta de desarrollo sobre SharePoint induce a confusión. En este post vamos a ver cómo utilizar el framework JavaScript Angular 2 en de los «nuevos» WebParts . Para ello tendremos que aclarar algunos aspectos de configuración de la solución, que nos servirán  para asentar los conocimientos de los artículos anteriores.

 

Angular2 Typescript

En primer lugar crearemos la estructura del proyecto haciendo uso del template de Yeoman para la generación de la solución. Dentro de las plantillas que tenemos disponibles, seleccionaremos la opción «sin ningún framework». Tal y como se muestra la siguiente pantalla:

yeoman

Abriremos la solución utilizando Visual Studio Code, abriremos el fichero package.json y añadiremos las dependencias que son necesarias para el correcto funcionamiento de Angular. El fichero package.json quedará así:

{
  "name": "demo-blog-angular-2",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "dependencies": {
    "@microsoft/sp-client-base": "~0.2.0",
    "@microsoft/sp-client-preview": "~0.2.0",
    "@angular/common": "2.0.0-rc.6",
    "@angular/compiler": "2.0.0-rc.6",
    "@angular/compiler-cli": "0.6.0",
    "@angular/core": "2.0.0-rc.6",
    "@angular/forms": "2.0.0-rc.6",
    "@angular/http": "2.0.0-rc.6",
    "@angular/platform-browser": "2.0.0-rc.6",
    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
    "@angular/router": "3.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.6",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.11",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.17",
    "angular2-in-memory-web-api": "0.0.18",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~0.5.0",
    "@microsoft/sp-module-interfaces": "~0.2.0",
    "@microsoft/sp-webpart-workbench": "~0.2.0",
    "gulp": "~3.9.1" ,    
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "typescript": "^1.8.10",
    "typings":"^1.3.2"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp nuke",
    "test": "gulp test"
  }
}

Una vez modificamos este fichero «json», lo que vamos a hacer es que nuestra solución instale los paquetes de Angular 2 necesarios para su correcto funcionamiento.Para ello, nos ubicamos en la carpeta del proyecto y ejecutamos la siguiente instrucción:

npm install 

Una de las cosas que tiene Angular 2 es el uso de los Decoradores de TypeScript, de momento estos «decodaradores» son algo experimental en Typescript. Por este motivo, en el momento de que vayamos a crear un Componente, nuestra solución no compilará hasta que no modifiquemos la configuración de TypeScript. Nos iremos al fichero tsconfig.json y le indicaremos que nuestro desarrollo acepta el uso de decoradores, añadiendo la siguiente línea:

    "experimentalDecorators": true

Antes de empezar con el desarrollo, para poder utilizar los Frameworks necesitamos indicarle al SharePoint Framework la ubicación de las librerías de Angular2. Esta configuración está dentro de la carpeta «Config» en el fichero «config.json». Dentro del objeto «Externals» agregaremos las siguientes referencias:

   "BrowserModule" : "node_modules/@angular/platform-browser/src/platform-browser.js",
    "NgModule" : "node_modules/@angular/core/src/core.js",
    "CommonModule" : "node_modules/@angular/common/src/commonmodule.js",
    "FormsModule" :  "node_modules/@angular/forms/src/formsmodule.js",
    "HttpModule":  "node_modules/@angular/http/src/httpmodule.js"

Creando el Componente de Angular 2

Crearemos una carpeta «App» dentro de la ruta donde está el Webpart, en nuestro caso: «sr/webpart/helloAngular». Esta carpeta contendrá los siguientes ficheros: app.component.ts y app.module.ts.

El fichero app.component.ts tiene el siguiente código:

import { Component } from "@angular/core";
@Component({
  selector: "my-app",
  template: "
<h1>My First Angular 2 App</h1>

"
})
export class AppComponent { }

En el fichero «app.module.ts» añadiremos el siguiente código:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

El siguiente paso, es incluir la App dentro del WebPart. Para ello, nos vamos a la clase HelloAngularWebPart.ts y agregamos las siguientes referencias:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

En el constructor del WebPart cargaremos el módulo de carga de la plataforma, quedando de la siguiente forma:

 public constructor(context: IWebPartContext) {
    const platform = platformBrowserDynamic();
    platform.bootstrapModule(AppModule);
    super(context);
  }

En el método «Render»,  hacemos la llamada al componente de nuestra aplicación, quedando así:

public render(): void {
    this.domElement.innerHTML = `
      <my-app>Loading...</my-app>`;

  }

Si ejecutamos el comando gulp serve y agregamos el Webpart se mostrará el siguiente error:
error angular

Este error se ha producido porque dentro del WebPart nos falta incluir una serie de librerías de Angular2. Son las siguientes:

import "reflect-metadata";
import "core-js/es6/symbol";
import "core-js/es6/object";
import "core-js/es6/function";
import "core-js/es6/parse-int";
import "core-js/es6/parse-float";
import "core-js/es6/number";
import "core-js/es6/math";
import "core-js/es6/string";
import "core-js/es6/date";
import "core-js/es6/array";
import "core-js/es6/regexp";
import "core-js/es6/map";
import "core-js/es6/set";
import "core-js/es6/reflect";

import "core-js/es7/reflect";
import "zone.js/dist/zone";

Realizamos dicha modificación en nuestro código, ejecutamos otra vez el comando gulp serve, y ya tenemos nuestra aplicación funcionando con Angular.
angular 2

El código fuente de este ejemplo lo podéis encontrar en el siguiente repositorio de GitHub.
github

mm

Sobre Adrián Díaz

Adrián Díaz es Ingeniero Informático por la Universidad Politécnica de Valencia. Es MVP de Microsoft en la categoría Office Development desde 2014, MCPD de SharePoint 2010, Microsoft Active Profesional y Microsoft Comunity Contribuitor 2012. Cofundador del grupo de usuarios de SharePoint de Levante LevaPoint. Lleva desarrollando con tecnologías Microsoft más de 10 años y desde hace 3 años está centrado en el desarrollo sobre SharePoint. Actualmente es Software & Cloud Architect Lead en ENCAMINA.
Esta entrada ha sido publicada en javascript, Office 365, sharepoint 2013, sharepoint 2016 y etiquetada como , , , . Enlace permanente .

Suscríbete a Desarrollando sobre SharePoint

Recibe todas las actualizaciones semanalmente de nuestro blog

You have Successfully Subscribed!

ENCAMINA, piensa en colores