×
iFour Logo

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

iFour Team - January 05, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

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.


<!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><p>
    <app-root></app-root></p></body></html>

</!doctype>
               

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.

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 

Blog Our insights

 A step-by-step guide on Excel Add-in development using React.js
A step-by-step guide on Excel Add-in development using React.js

Table of Content 1.What is an Excel Add-in? 2.Prerequisites for setting up your development environment 3.How to build Excel Add-in using React 4.How to run...

Read More
11 Ways AR and VR (Augmented Reality and Virtual Reality) Transforming the Healthcare sector
11 Ways AR and VR (Augmented Reality and Virtual Reality) Transforming the Healthcare sector

Table of Content 1. Helps in surgical procedures and treats phobias 2. Create new training opportunities for doctors 3. Real-time information helps to escape from painful...

Read More
How E-discovery tools can benefit the Legal industry?
How E-discovery tools can benefit the Legal industry?

Table of Content 1.Gather essential information quickly 2.Automate and streamline tedious tasks 3.Save considerable time and money in the discovery process 4.Analyze...

Read More