Angular outlook addin not working

Hi,

I have created a new addin project for outlook using Angular, the problem is that the addin is not working after a prod build is done. You can reproduce this error:

1. Create a addin project with yo
2. Select outlook w Angular
3. Add a *ngIf=“false” to any html tag (root div)
4. Build the project and adapt the manifest pointing to a server where you gonna host the addin (https)
5. Add the add-in to outlook web
6. Look at the js console and see the error below

Uncaught Error: Template parse errors: Can't bind to 'ngif' since it isn't a known property of 'main'. ("ontSize-su ms-fontWeight-light ms-fontColor-neutralPrimary">{{welcomeMessage}}</h1> </header> <main [ERROR ->]*ngif=false class=ms-welcome__main> <h2 class="ms-font-xl ms-fontWeight-semilight ms-fontColor-neutra"): ng:///e/e.html@0:323 Property binding ngif not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("="ms-fontSize-su ms-fontWeight-light ms-fontColor-neutralPrimary">{{welcomeMessage}}</h1> </header> [ERROR ->]<main *ngif=false class=ms-welcome__main> <h2 class="ms-font-xl ms-fontWeight-semilight ms-fontColor-"): ng:///e/e.html@0:317

It seems that the generator is not working correctly for prod builds - maybe the angular project is not bootstrapped?

best regards Murat

[sjgarland]

I had (and resolved) this and another problem that occurred when I created an Excel add-in using Yeoman and added a simple *ngFor in app.component.html. The add-in ran successfully on https://localhost:3000 using npm start, but not over the web when using the dist directory produced by npm run build. Furthermore, the icons in the assets directory did not display properly.

See https://github.com/sjgarland/YoTest for modifications to the generated code that fix these problems.

[itsdaniellucas]

Managed to solve this issue, just need to set minify to false on HtmlWebpackPlugin in webpack.config.js e.g.:

new HtmlWebpackPlugin({
  filename: "taskpane.html",
  template: "./src/taskpane/taskpane.html",
  chunks: ["polyfill", "taskpane"],
  minify: false
})

Works for the following package.json:

{
  "html-loader": "^4.2.0",
  "html-webpack-plugin": "^5.5.0",
  "webpack": "^5.50.0"
}