Office-js-docs-pr: yo office - Generating a project for Angular - Unclear instructions and missing screenshot

[sameera]

Article URL

https://docs.microsoft.com/en-us/office/dev/add-ins/excel/excel-add-ins-get-started-angular

Issue

There are few issues on this page.

1. It's unclear what to expect the generator would do. The instructions tell me to cd in to the folder generated by ng new and to run yo office inside it. It appears as the docs assume that the project will be generated on that root folder and update the existing package.json (because the docs also say not to let the generator overwrite package.json). However, the generator puts the files in a sub folder with the project name given to it. There's no way around this also as specifying --output will result in an erorr.

1. The block just above "Secure the app" appears to be incorrectly formatted. And is missing the screenshot.

[TCourtneyOwen]

I agree that these instructions are flawed. Personally, I think all the add-in tutorials that reference Yo Office should be updated so there's no reference to steps such as "Install the Angular CLI globally." If we instruct users to just generate their projects via Yo Office, several of the currently specified steps aren't necessary, and the whole process is greatly simplified. For example, I just created an Excel Angular add-in, ran npm run start, npm run sideload and all worked well.

[kbrandl]

Thank you for reporting this issue; we're looking into it.
MS internal: https://office.visualstudio.com/OC/_workitems/edit/2508542

[cakriwut]

Update getting started Angular #372

[cschoeni]

The whole thing isn't used much at the moment because it's just too complicated. Each manual explains something different.

Once you should run yo office and then choose angular 6, but many folders I have in a normal Angular project were missing. If I first create an Angular 6 project and then create a manifest with yo office, it creates a new folder for me instead of adapting the created Angular project so that I can start it with the Office Add In.

It's just a pity that everything at Microsoft has to be made so complicated. Keep simple should be a guiding principle here.

[kbrandl]

@sameera We've significantly revised this quick start, to reflect that the Yeoman generator for Office Add-ins is now the recommended way of generating an Office Add-in project using the Angular framework. Please give the new instructions a try and feel free to reach out again if you have any trouble.