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

iFour Team - 5 Jan 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

add-with-Angular

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

</!doctype>

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.

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+?

add-with-Angular

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

</!doctype>

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.

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.

Serving Industries Worldwide

Innovative Ways - Satisfied Clientele

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

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

Building an office add-in in Angular:

Read More: Ngstyle In Angular For Dynamic Styling

Looking for Best Word Add-in Development Solutions?

Your Search ends here.

Conclusion

Building an office add-in in Angular:

Read More: Ngstyle In Angular For Dynamic Styling

Looking for Best Word Add-in Development Solutions?

Your Search ends here.

Conclusion

recent post

category