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 http://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.