This project was generated with Angular CLI version 11.0.6.
The project intends to build an office.js addin template using angular, for microsoft excel 365.
The projects initial code base was generated as a simple, new angular project.
Important It's important to note the microsoft REQUIRES that office.js addins have two items:
- they reference the most recent CDN in a script tag in the tag of the page.
` ... <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
`Thus, this was added to the root directory index.html page.
- they initialize the office add-in using either
Office.onReady()
orOffice.Initialize
. Other js framework initialize functions should be placed inside this.
More info on intializing the add-in can be found here https://docs.microsoft.com/en-us/office/dev/add-ins/develop/initialize-add-in
;
From there, the package.json files were modified to include required dependencies needed to build the microsoft excel 365 add in.
Then, a normal taskpane addin manifest.xml file was added to the project root folder. This file came from a project folder built using the yo generator. More information on the manifest.xml file can be found here https://docs.microsoft.com/en-us/office/dev/add-ins/develop/add-in-manifests?tabs=tabid-1
To transpile the add in, a webpack config file was added to the root. This webpack config file was also sourced from the example excel addin from Microsoft using the yo generator.
Excel add-ins using office.js, are set up based on a manifest.xml file. This file describes how the add in should be set up. Currently (June 2021), there are two types of excel office.js addins, content addins and taskpane addins.
The content addin opens a webpane object that can be placed in an excel worksheet.
The taskpane addin opens a sidebar taskpane which displays web content.
At June 2021, I don't believe there's an option to have both a content add in and a taskpane add in.
Run ng serve
for a dev server. Navigate to https://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.