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.
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
A passionate Technical writer and an SEO freak working as a Content Development Manager at iFour Technolab, USA. With extensive experience in IT, Services, and Product sectors, I relish writing about Azure Cloud, Data Analytics, AI, & Workflow Automation and love sharing exceptional insights on various platforms. I believe in constant learning and am passionate about being better every day.
Introduction
Imagine standing in line at the grocery store, waiting to pay for groceries. You pull out your phone and scan each item’s barcode with a single tap. This seemingly...
Before navigating into the world of DevOps, it's important to know what DevOps is exactly. DevOps is a methodology that uses continuous integration, continuous delivery, and automation to shorten the software delivery lifecycle (SDLC). More than just a set of practices, DevOps embodies a culture and a philosophy that bridges the gap between developers (Dev) and IT operations (Ops) teams.
Microsoft PowerApps has become the preferred digital solution, particularly for non-tech clients. It is a simple and easy-to-use app development platform that does not require much coding and can help you create personalized apps effortlessly with drag-and-drop capabilities.
