×
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 !

Sustainable

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 complete guide on eCommerce conversion rate optimization
A complete guide on eCommerce conversion rate optimization

Table of Content 1. Define your goals 2. Know your target audience 3. Simplified UI/UX design, simple navigation, and high resolution images 4. Design a dedicated landing...

Read More
A comprehensive guide on the Construction management software
A comprehensive guide on the Construction management software

Table of Content 1. Mobile compatibility and inventory management 2. Accurately forecast job costs and monitor them 3. STACK 4. On-premises software is better suited...

Read More
Java And Environment Variables: A Brief Overview
Java And Environment Variables: A Brief Overview

Java is one of many programming languages that have shown much promise in the coding world. With that said, there are many components to consider, when working with Java, including...

Read More