How to use Angular for Office 365 Add-in development?

Angular is a leading JavaScript framework for developing web apps. It offers a number of advantages that make it well-suited for building Microsoft Office Add-ins. One of the key advantages is its ability to build complex and large-scale applications with ease. Angular's architecture, which is based on components and a hierarchical structure, allows developers to break down an application into smaller, reusable pieces, making it easier to manage and maintain.

Another benefit you may find with Angular is its flexibility. The framework provides a wide range of built-in directives, services, and modules that can be used for Microsoft Office Add-ins development, and its modular design allows developers to easily add or remove functionality as needed. Additionally, Angular's flawless two-way data binding and dependency injection support help to make the development process more efficient, by reducing the need for boilerplate code and making it easier to manage the application's state.

The support for Typescript is another important aspect of Angular that makes it suitable for building Office Add-ins. TypeScript is a typed superset of JavaScript that makes it easier to write robust and maintainable code. It also provides support for classes, modules, and interfaces, making it a better choice for object-oriented programming.

Looking for a reliable VSTO Add-in development company

How to use Angular with Office Add-ins?

You can use Angular to build Office Add-ins by following these steps:

Step 1: First, make sure you have the latest version of Node.js and npm (the Node.js package manager) installed on your machine. You can download the latest version of Node.js from the official website (https://nodejs.org/) or install it using a package manager like Chocolatey (Windows) or Homebrew (macOS).

Step 2: Next, install the Angular CLI (Command Line Interface) by running the following command in your terminal:

npm install -g @angular/cli

Step 3: Once the Angular CLI is installed, create a new Angular project by running the following command:

ng new my-office-add-in

Step 3: Once the Angular CLI is installed, create a new Angular project by running the following command:

ng new my-office-add-in

Step 4: This will create a new directory called "my-office-add-in" with a basic Angular project set up. Navigate to this directory by running:

cd my-office-add-in

You can now start building your Office Add-in using Angular. The Angular CLI provides a set of tools for building, testing, and deploying Angular applications, so you can use it to build your Office Add-in as well. For example, you can use the ng serve command to run a development server and test your Add-in locally.

Once you have finished building your Add-in, you can package it for deployment by running the ng build --prod command. This will generate a production-ready version of your Add-in in the dist directory, which you can then upload to the Office Store or distribute through other channels.

Read More: How Microsoft Office 365 Add-Ins can supercharge your productivity?

How to generate Office Add-in Angular Application with Yeoman Generator?

Angular is a stable and more reliable option for building Office Add-ins than some of the other frameworks. When it comes to UI development, it is a fantastic platform with a strong community and ecosystem, making it an excellent choice for designing Office Add-ins.

The framework has a large and active community of developers who contribute to its development, and a wealth of tutorials, resources, and third-party libraries available.

Now, let's go a step further and learn how to create Office 365 Addins with Angular using the yeoman generator.

Generate Office Add-in Angular Application with Yeoman Generator

Step 1: Open the command prompt, and run the following command. The Yeoman Generator Office gets installe/d.

npm install -g yo generator-office

Step 2: Now, we will add the Angular project structure to create Office. To do so, use this command

yo office --skip-install

Want to hire dedicated Angular developers? for your project

Step 3: The above command will provide interactive input. Choose the below options.

js
   Choose a project type: (Use arrow keys) 
   // choose (2) Office Add-in Task Pane project using Angular framework

   Choose a script type: (Use arrow keys)
   // choose (1) Typescript

   What do you want to name your add-in? (My Office Add-in) 
   //Give any name you want. for this tutorial, I would keep demo-addin

   Which Office client application would you like to support? 
   //choose (3) Outlook

Step 4: Our additional Outlook project structure has been created using the Yeoman generator. The structure of the resultant project would look like this.

.
+-- assets
¦   +-- icon-16.png
¦   +-- icon-32.png
¦   +-- icon-80.png
¦   +-- logo-filled.png
+-- CONTRIBUTING.md
+-- LICENSE
+-- manifest.xml
+-- package.json
+-- package-lock.json
+-- README.md
+-- src
¦   +-- commands
¦   +-- taskpane
+-- tsconfig.json
+-- webpack.config.js

Step 5: Using the Angular CLI to build an Angular application

• Install the Angular CLI

npm install -g @angular/cli

• Build an Angular app

ng new demo-angular-addin

• Run ng serve to make sure the app works

Read More: Office add-in development: VSTO Add-ins vs JavaScript API

The structure of our Angular app would look like this:

+-- angular.json
      +-- e2e
      +-- node_modules
      +-- package.json
      +-- package-lock.json
      +-- README.md
      +-- src
      +-- tsconfig.json
      +-- tslint.json

Step 6: Copy the Add-in manifest to our Angular application

Copy the demo plugin manifest.xmlfile we generated using the Yeomen generator and paste it into the root folder of the angular app.

Step 7: Change the Angular application’s default port number

Note that manifest.xml contains all mappings for port 3000, e.g. localhost:3000. Also, the default port of the angular app is 4200. We must alter the port in the manifest or the port of the Angular server. It should work either way.

Let's change the angular application's default port (4200) to 3000. Open the angular.json file, find the server key and change the default port. Here is an example.

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
      "browserTarget": "demo-angular-addin:build",
      "port": 3000
 },
 "configurations": {
             "production": {
     "browserTarget": "demo-angular-addin:build:production",
     "port": 3000
             }
 }
},

Step 8: Copy the default icons from the generated Office Add-in into the Angle app

The default icons provided are set in the add-in manifest. These icons are displayed when the plugin loads.

In case both of these projects are in the same folder, perform the following command or run it manually.

cp -r demo-addin/assets/* demo-angular-addin/src/assets/

Looking for the best Outlook Add-in development company? Your search ends here

Step 9: Update the manifest map: replace it with index.html Page

In manifest.xml, update for each occurrence of taskpane.url or any other location where the URL looks like https://localhost:3000/taskpane.html, Update the taskpane.html to index.html. You can also remove taskpane.html and keep only host:port (localhost:3000).

Step 10: Add missing dependencies and development dependencies with npm

npm dependencies

npm install --save @microsoft/office-js @microsoft/office-js-helpers@^1.0.1 office-ui-fabric-js@^1.3.0

We have also added office-js as an npm dependency. However, Office js is not a valid es6 module and cannot be used as one. We still need to load it with CDN script tags.

Step 11: Adding npm dev dependencies

To install these dependencies, follow the steps below.

npm install --save-dev @types/office-js@^1.0.1 @types/office-runtime@^1.0.7 office-addin-debugging@^2.1.13 office-addin-dev-certs@^1.0.1 office-toolbox@^0.1.1

Step 12: Add missing types

The TypeScript compiler warns about missing types during compilation. We need to add office-js to the types since we will be using Microsoft Office APIs throughout development.

Update tsconfig.app.json and add office-js in the types array.

"types": [
  "office-js"
]

Read More: JavaScript based Excel Office Add-in in Visual Studio

Step 13: Copy the script from taskpane.html to index.html

As mentioned above, Office-js needs to be added from the CDN. If you intend to use Office fabric-ui to develop the plug-in UI, also include the CDN Fabric libraries.

<!-- Office JavaScript API -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>

<!-- For more information on Office UI Fabric, visit https://developer.microsoft.com/fabric. --><link href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css" rel="stylesheet"><link href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css" rel="stylesheet">
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>

Start the Bootstrap app inside the Office.initialize function.

Office.initialize ensures that the Add-in loads after the Office application has finished loading.

we update the main.ts file by including the bootstrap code in the initialization function.

So, this is how we use the Yoeman generator to generate an Office Add-in Angular application. That’s it from this blog. For more details, feel free to connect with us.

Conclusion

In summary, Angular is a powerful and flexible framework that is well-suited for building Microsoft Office Add-ins. Its ability to build complex, maintainable, and large-scale applications along with features such as two-way data binding, dependency injection, TypeScript support and strong community support makes it a great choice for building office add-ins.

In this blog, we learned how to create an Office 365 Addin using Angular. We also used PDFTron online viewer, a JavaScript-based PDF library, to add an Office document viewer to the Angular app.