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.
Picture this: You're sitting at home, feeling inspired to try out a new recipe for a dinner party you're hosting over the weekend. As you start searching for ingredients and recipe ideas on your favorite social media platform, you stumble upon a captivating video of a chef effortlessly creating a mouthwatering dish. The video is not only visually appealing but also conveniently includes a link to purchase the exact ingredients and kitchen tools used in the recipe. Intrigued by the seamless integration of shopping and content, you decide to give it a try.
The advent of ecommerce has completely transformed the way of doing business. Consumers may buy goods and services across the world with just a mouse click, while entrepreneurs can...
Nowadays, businesses are looking for innovative ways to improve their customer service, increase engagement, and streamline operations. This is when chatbots come into the picture,...
