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.

 

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:

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:

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.

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