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.
A content management system (CMS) is used to supervise and exploit website content. With a CMS, users can create, edit, and delete content from a website. Usually, CMS software provides...
To manage and deploy the website content, we use CMS i.e., Content Management System. With the assistance of CMS, you could create, maintain, and modify large volumes of content very...
What is DotNetNuke?
DotNetNuke is Web Content Management System (WCMS) used for managing any website and helps user to update and manage content of the complete website...
