How to Create Word Add-In With Angular 2+?

Word add-ins are one of many developer options you have on the Office add-in platform. In this blog, we can add the add-in using angular. Add-ins are just small web applications that run in one place and are served over HTTPS in the Office client.

Building an office add-in in Angular:

Step 1: In the package.json file, add the dependencies and dev dependencies and run the npm install command to install these dependencies.

{
  "name": "addin-demo",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.1",
    "@angular/common": "~11.0.1",
    "@angular/compiler": "~11.0.1",
    "@angular/core": "~11.0.1",
    "@angular/forms": "~11.0.1",
    "@angular/platform-browser": "~11.0.1",
    "@angular/platform-browser-dynamic": "~11.0.1",
    "@angular/router": "~11.0.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2",
    "@microsoft/office-js-helpers": "^1.0.1",
    "office-ui-fabric-js": "^1.3.0",
    "@types/office-js": "^1.0.23"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.2",
    "@angular/cli": "~11.0.2",
    "@angular/compiler-cli": "~11.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2",
    "@types/office-runtime": "^1.0.7",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "office-addin-debugging": "^2.1.13",
    "office-addin-dev-certs": "^1.0.1",
    "office-toolbox": "^0.1.1"
  }
}

Step 2: Add the office.js library and office UI fabric core CSS in the index.html file.

<xmp>
<!doctype html=""><html lang="en"><head>
    <meta charset="utf-8" /><title></title><base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" /><link href="favicon.ico" rel="icon" type="image/x-icon" />
    <!-- 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-core/10.0.0/css/fabric.min.css" rel="stylesheet" /></head><body>
    <app-root></app-root></body></html>
</!doctype></xmp>

Read More: Ngstyle In Angular For Dynamic Styling

Step 3: You should initialize the office in the main.ts file like below and replace the platformBrowserDynamic () function.

Your main.ts file look like this:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
  enableProdMode();
}
Office.initialize = reason => {  
  console.log('office is initialized');
   platformBrowserDynamic()
      .bootstrapModule(AppModule)
      .catch(error => console.error(error));
};

Step 4: After that, you should make sure that your target is to set the es5 and data typeRoots in the tsconfig.json file.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "module": "es2020",
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Step 5: Create the Manifest.xml file. To create the manifest.xml file, one of the simple ways is using Microsoft office Add-in Project Generator.

After installation, use the following command to start the generator.

After running this command, selecting the Office Add-in project containing the manifest only option.

Write the name of the add-in.

Select the word option.

After that, it automatically creates the manifest.xml file.

<!--?xml version="1.0" encoding="UTF-8"?-->
<officeapp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp">
  <!-- IMPORTANT! Id must be unique for your add-in, if you reuse this manifest ensure that you change this id to a new GUID. -->
  <id>723d118f-7c3b-44fa-ac05-be9cb09b5a92</id>
  <!--Version. Updates from the store only get triggered if there is a version change. -->
  <version>1.0.0.0</version>
  <providername>[Provider name]</providername>
  <defaultlocale>en-US</defaultlocale>
  <!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
  <displayname defaultvalue="Manifest">
  <description defaultvalue="[Document Add-in description]">
    <iconurl defaultvalue="https://localhost:3000/assets/icon-32.webp">
  <highresolutioniconurl defaultvalue="https://localhost:3000/assets/icon-80.webp">

  <!-- Domains that will be allowed when navigating. For example, if you use ShowTaskpane and then have an href link, navigation will only be allowed if the domain is on this list. -->
  <appdomains>
    <appdomain>AppDomain1</appdomain>
    <appdomain>AppDomain2</appdomain>
    <appdomain>AppDomain3</appdomain>
  </appdomains>
  <!--End Basic Settings. -->
  <!--Begin TaskPane Mode integration. This section is used if there are no VersionOverrides or if the Office client version does not support add-in commands. -->
  <hosts>
    <host name="Document">
  </host></hosts>
  <defaultsettings>
    <sourcelocation defaultvalue="https://localhost:3000/index.html">
  </sourcelocation></defaultsettings>
  <!-- End TaskPane Mode integration.  -->
  <permissions>ReadWriteDocument</permissions>
  <!-- Begin Add-in Commands Mode integration. -->
  <versionoverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
    <!-- The Hosts node is required. -->
    <hosts>     
      <host xsi:type="Document">
         <desktopformfactor>
          <getstarted>
            <!-- Title of the Getting Started callout. resid points to a ShortString resource --><title resid="GetStarted.Title"></title></getstarted>

          <functionfile resid="Commands.Url">
          <!-- PrimaryCommandSurface is the main Office Ribbon. -->
          <extensionpoint xsi:type="PrimaryCommandSurface">
            <!-- Use OfficeTab to extend an existing Tab. Use CustomTab to create a new tab. -->
            <officetab id="TabHome">
              <!-- Ensure you provide a unique id for the group. Recommendation for any IDs is to namespace using your company name. -->
              <group id="CommandsGroup">
                <!-- Label for your group. resid must point to a ShortString resource. -->
                <label resid="CommandsGroup.Label">

                <icon>
                  <bt:image resid="Icon.16x16" size="16">
                  <bt:image resid="Icon.32x32" size="32">
                  <bt:image resid="Icon.80x80" size="80">
                </bt:image></bt:image></bt:image></icon>
                <!-- Control. It can be of type "Button" or "Menu". -->
                <control id="TaskpaneButton" xsi:type="Button">
                  <label resid="TaskpaneButton.Label">
                  <supertip>
                    <!-- ToolTip title. resid must point to a ShortString resource. --><title resid="TaskpaneButton.Label"></title></supertip>
                  <icon>
                    <bt:image resid="Icon.16x16" size="16">
                    <bt:image resid="Icon.32x32" size="32">
                    <bt:image resid="Icon.80x80" size="80">
                  </bt:image></bt:image></bt:image></icon>
                  <!-- This is what happens when the command is triggered (E.g. click on the Ribbon). Supported actions are ExecuteFunction or ShowTaskpane. -->
                  <action xsi:type="ShowTaskpane">
                    <taskpaneid>ButtonId1</taskpaneid>
                    <!-- Provide a url resource id for the location that will be displayed on the task pane. -->
                    <sourcelocation resid="Taskpane.Url">
                  </sourcelocation></action>
                </label></control>
              </label></group>
            </officetab>
          </extensionpoint>
        </functionfile></desktopformfactor>
      </host>
    </hosts>
    <!-- You can use resources across hosts and form factors. -->
    <resources>
      <bt:images>
        <bt:image defaultvalue="https://localhost:3000/assets/icon-16.webp" id="Icon.16x16">
        <bt:image defaultvalue="https://localhost:3000/assets/icon-32.webp" id="Icon.32x32">
        <bt:image defaultvalue="https://localhost:3000/assets/icon-80.webp" id="Icon.80x80">
      </bt:image></bt:image></bt:image></bt:images>
      <bt:urls>
        <bt:url defaultvalue="https://go.microsoft.com/fwlink/?LinkId=276812" id="GetStarted.LearnMoreUrl">
        <bt:url defaultvalue="https://localhost:3000/commands.html" id="Commands.Url">
        <bt:url defaultvalue="https://localhost:3000/taskpane.html" id="Taskpane.Url">
      </bt:url></bt:url></bt:url></bt:urls>
      <!-- ShortStrings max characters==125. -->
      <bt:shortstrings>
        <bt:string defaultvalue="Get started with your sample add-in!" id="GetStarted.Title">
        <bt:string defaultvalue="Commands Group" id="CommandsGroup.Label">
        <bt:string defaultvalue="Show Taskpane" id="TaskpaneButton.Label">
      </bt:string></bt:string></bt:string></bt:shortstrings>
      <!-- LongStrings max characters==250. -->
      <bt:longstrings>
        <bt:string defaultvalue="Your sample add-in loaded succesfully. Go to the HOME tab and click the 'Show Taskpane' button to get started." id="GetStarted.Description">
        <bt:string defaultvalue="Click to Show a Taskpane" id="TaskpaneButton.Tooltip">
      </bt:string></bt:string></bt:longstrings>
    </resources>
  </versionoverrides>
  <!-- End Add-in Commands Mode integration. -->
</highresolutioniconurl></iconurl></description></displayname><!--!doctype--></officeapp>

Looking for Best Word Add-in Development Solutions? Your Search ends here.

Step 6: Add the following code in the polyfills.ts file to enable the polyfills for IE.

import 'core-js/client/shim';
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/weak-map';
import 'core-js/es6/set';

Conclusion

In this blog, we have explained how to build office add-in in angular. Add-ins are just small web applications that run in one place and are served over HTTPS in the Office client.

Categories:

Angular

Tags:

Angular Programming

How to Create Word Add-In With Angular 2+?

Categories:

Tags:

Related Posts