×

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 Technical Content 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

Enter your e-mail address Please enter valid e-mail

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 

Blog Our insights

Power BI Forecasting Challenges and Solutions
Power BI Forecasting Challenges and Solutions

Microsoft Power BI stands out for detailed data forecasting. By inspecting data patterns and using statistical models, Power BI provides a visual forecast of things to anticipate in...

Kotlin vs Java - Top 9 Differences CTOs Should Know
Kotlin vs Java - Top 9 Differences CTOs Should Know

Choosing the right programming language becomes crucial as it greatly influences the success of a software development project. When it comes to selecting the best programming language...

Security Best Practices for Power Apps
Security Best Practices for Power Apps

Being experts in custom software development, we're truly impressed by Microsoft Power Apps. The exceptional security features it offers as a low code platform amazes us and surprisingly...