×

iFour Logo

How to create word add-in with Angular 2+?

Kapil Panchal January 05, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

  • play
  • pause
  • pause
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.



                
                

    


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.




  
                723d118f-7c3b-44fa-ac05-be9cb09b5a92

  
                1.0.0.0
                [Provider name]
                en-US

  
                
                
                
                
 
  
                
                AppDomain1
                AppDomain2
                AppDomain3
  
  

  
                
                
  
                
                
  
  

                ReadWriteDocument
  
                
    
                     
                
                
                
            
         
                
          
                
            
                
              
                
                
                
            
          
        
      
    
    
                
                
                
                
                
      
                
                
                
                
      
      
                
                
                
                
      
      
                
                
                
      
    
  
  

               

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.

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. 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. 723d118f-7c3b-44fa-ac05-be9cb09b5a92 1.0.0.0 [Provider name] en-US AppDomain1 AppDomain2 AppDomain3 ReadWriteDocument ButtonId1 Looking for Best Word Add-in Development Solutions? Your Search ends here. See 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.
Kapil Panchal

Kapil Panchal

A passionate Technical writer and an SEO freak working as a Content Development Manager at iFour Technolab, USA. With extensive experience in IT, Services, and Product sectors, I relish writing about technology and love sharing exceptional insights on various platforms. I believe in constant learning and am passionate about being better every day.

Build Your Agile Team

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 
Blog Our insights
Modernizing applications with the 7 R strategy – A CTO’s Guide

16 October 2025

Lochan Paliwal

Modernizing applications with the 7 R strategy – A CTO’s Guide

Think about the last time CTOs spent most of their time fixing old systems. Updates were slow, servers were expensive, and adding new features took time. Now, things have changed....

Top Shift Left security Best Practices CTOs should consider

10 October 2025

Lochan Paliwal

Top Shift Left security Best Practices CTOs should consider

According to HackerOne, fixing a security issue after software is released can cost 30 times more than fixing it during development. Today, CTOs take a different approach. Shift...

Real-world Consequences of Ignoring DevSecOps In Your Strategy

29 September 2025

Lochan Paliwal

Real-world Consequences of Ignoring DevSecOps In Your Strategy

A few years ago, companies built software first and thought about security later. Developers and security teams did not cooperate, and problems were fixed only after release. This activated DevSecOps vulnerabilities and many DevSecOps failures.