Angular outlook addin not working

[wolfmanfx]

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

[akrantz]

I did not have a problem changing the "dev-server" script in package.json to use --mode production instead of --mode development, running the "Dev Server", modifying the add-in to have *ngIf on an html tag, and loading the add-in in Outlook on the Web.

The error message shows ngif with a lowercase i. Perhaps that is the problem?

[akrantz]

I'm going to close this as I don't think there is a fundamental problem with the template. If you do find an issue, feel free to re-open.

[wolfmanfx]

Hi,

The error message convert the ngif to lower case - the ticket is still valid.

best regards Murat

[akrantz]

Please help clarify the repro steps. In step 3, can you provide the exact code modification that you've made. In step 4, are you using the dev server running on https://localhost:3000 (using npm run dev-server or using the Dev Server task in VS Code). Also, the project runs against the local dev server using --mode development. What are you doing to use --mode production. I edited the package.json script to switch it. Is this what you've done? Having specific steps will help us be able to understand how to reproduce and assist you. Thanks.

[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.

[matt-nordberg]

I had a similar problem, using an Angular add-in created with Yeoman. The *ngIf in my markup was being converted to *ngif (lowercase) during a webpack production build. I found (and confirmed from this thread) that a bug in html-loader version 0.5.5 was causing the caseSensitive loader option to fail. I was able to resolve the problem by replacing the rule { test: /\.html$/, exclude: /node_modules/, use: "html-loader" }, with { test: /\.html$/, exclude: /node_modules/, loader: "html-loader", options: { minimize: false } } in my webpack.config.js. This workaround did prevent minimization, which is not ideal, but got it working for the moment. A longer-term solution will probably be to update html-loader to get a fix for that bug.

[igor-ribeiiro]

@matt-nordberg could you share how you made it work? I tried your solution and also looked up how to make webpack be case sensitive but I could not make it work.

[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"
}