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



                
                

    


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

Is Java Still in Demand in 2023?
Is Java Still in Demand in 2023?

Table of Content 1.Factors that ensure Java’s continued dominance 1.1.The use case for Java 1.2.Java has a Vast ecosystem. 1.3.Java is both efficient and widely...

Key factors to consider before choosing Customized or Off-the-shelf software
Key factors to consider before choosing Customized or Off-the-shelf software

Table of Content 1.What is COTS? 2.What are the advantages of Off-the-shelf software development? 3.What are the advantages of Custom software development? 4.Customized...

Off-the-shelf vs custom software development: Choosing the best for business success.
Off-the-shelf vs custom software development: Choosing the best for business success.

Table of Content 1.What is Custom software development? 2.What is Off-the-shore software development? 3.How to choose the best software for business? 4.Off-the-shelf...