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.
Today, we’re thrilled to present you with the first glimpse of .NET 9 release and let you know what features and updates you can anticipate in this new version. Various professionals believe that it’s the right time to explore and adopt the latest version of .NET for your upcoming projects. It is even recommended for projects built using .NET 6 or .NET 8, due to the framework updates made in this version.
The dominance of Android, which holds a 71% market share, coupled with iOS supremacy in the US market, shows just how important it is to create apps that work on different platforms....
DOT NET is a prominent platform for custom software development chosen mostly by large-scale IT giants. According to statistics, there are more than 307,590 developers working in the...
