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 technology and love sharing exceptional insights on various platforms. I believe in constant learning and am passionate about being better every day.
Many finance teams struggle with manual processes, late reporting, and a lack of real-time data. Before adopting AI-powered Dynamics 365 Finance, CFOs frequently faced disconnected systems, unproductive workflows, and limited forecasting accuracy.
AI and Automation aren’t just options anymore. They are a necessity to keep yourself focused on what matters the most. Whether it is Zapier or Power Automate, ChatGPT or Copilot, every...
AI is everywhere now. Companies use it to handle customer questions, process accounts and even make real decisions that professionals used to spend hours on. What took days now happens...
