Getting ngIf not found on production

[tobiashoeft]

run : npm run build

➜ XXXX git:(main) npm run build

> office-addin-taskpane-angular@1.0.1 build
> webpack --mode production

assets by status 1.48 KiB [cached] 1 asset
assets by status 323 KiB [compared for emit]
  assets by path assets/ 135 KiB
    assets by path assets/*.png 94.9 KiB 8 assets
    + 2 assets
  assets by path *.html 3.28 KiB
    asset app.component.html 1.81 KiB [compared for emit]
    + 2 assets
  assets by path *.js 176 KiB
    asset polyfill.js 176 KiB [compared for emit] [minimized] (name: polyfill) 1 related asset
    asset commands.js 597 bytes [compared for emit] [minimized] (name: commands) 1 related asset
  assets by path *.xml 8.74 KiB
    asset manifest.prod.prod.xml 4.49 KiB [compared for emit] [from: manifest.prod.xml] [copied]
    asset manifest.prod.xml 4.26 KiB [compared for emit] [from: manifest.xml] [copied]
asset taskpane.js 996 KiB [emitted] [minimized] [big] (name: taskpane) 2 related assets
orphan modules 1.5 MiB [orphan] 199 modules
runtime modules 1.33 KiB 6 modules
modules by path ./node_modules/core-js/ 541 KiB 520 modules
modules by path ./node_modules/rxjs/dist/ 297 KiB 217 modules
modules by path ./src/ 15.9 KiB
  modules by path ./src/taskpane/app/ 14 KiB 3 modules
  + 2 modules
modules by path ./node_modules/@angular/ 2.97 MiB
  modules by path ./node_modules/@angular/common/fesm2015/*.js 293 KiB 2 modules
  + 3 modules
./node_modules/regenerator-runtime/runtime.js 24.6 KiB [built] [code generated]
./node_modules/zone.js/fesm2015/zone.js 122 KiB [built] [code generated]
./node_modules/tslib/tslib.es6.js 14.4 KiB [built] [code generated]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  taskpane.js (996 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  taskpane (996 KiB)
      taskpane.js

WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.76.0 compiled with 3 warnings in 12875 ms

package.json

{
  "name": "XXXXX",
  "version": "1.0.1",
  "repository": {
    "type": "git",
    "url": "XXXXXXX"
  },
  "license": "MIT",
  "config": {
    "app_to_debug": "excel",
    "app_type_to_debug": "desktop",
    "dev_server_port": 3000
  },
  "engines": {
    "node": ">=14 <17",
    "npm": ">=6 <9"
  },
  "scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "convert-to-single-host": "node convertToSingleHost.js",
    "dev-server": "webpack serve --mode development",
    "lint": "office-addin-lint check",
    "lint:fix": "office-addin-lint fix",
    "prettier": "office-addin-lint prettier",
    "start": "office-addin-debugging start manifest.xml",
    "start:desktop": "office-addin-debugging start manifest.xml desktop",
    "start:desktop:outlook": "office-addin-debugging start manifest.outlook.xml desktop --app outlook",
    "start:web": "office-addin-debugging start manifest.xml web",
    "stop": "office-addin-debugging stop manifest.xml",
    "test": "npm run test:unit && npm run test:e2e",
    "test:e2e": "mocha -r ts-node/register test/end-to-end/*.ts",
    "test:unit": "mocha -r ts-node/register test/unit/*.test.ts",
    "validate": "office-addin-manifest validate manifest.xml",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "@angular/common": "^12.2.16",
    "@angular/compiler": "^12.2.16",
    "@angular/core": "^12.2.16",
    "@angular/platform-browser": "^12.2.16",
    "@angular/platform-browser-dynamic": "^12.2.16",
    "@microsoft/office-js-helpers": "^1.0.1",
    "core-js": "^3.9.1",
    "office-ui-fabric-js": "^1.3.0",
    "regenerator-runtime": "^0.13.7",
    "rxjs": "~7.5.0",
    "zone.js": "^0.11.4"
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-typescript": "^7.13.0",
    "@types/mocha": "^8.2.0",
    "@types/node": "^14.14.22",
    "@types/office-js": "^1.0.256",
    "@types/office-runtime": "^1.0.23",
    "acorn": "^8.5.0",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^9.0.1",
    "eslint-plugin-office-addins": "^2.1.4",
    "file-loader": "^6.2.0",
    "html-loader": "^4.1.0",
    "html-webpack-plugin": "^5.5.0",
    "mocha": "^10.1.0",
    "office-addin-cli": "^1.5.4",
    "office-addin-debugging": "^5.0.2",
    "office-addin-dev-certs": "^1.11.1",
    "office-addin-lint": "^2.2.4",
    "office-addin-manifest": "^1.12.0",
    "office-addin-mock": "^2.3.6",
    "office-addin-prettier-config": "^1.2.0",
    "office-addin-test-helpers": "^1.4.4",
    "office-addin-test-server": "^1.4.6",
    "os-browserify": "^0.3.0",
    "process": "^0.11.10",
    "source-map-loader": "^3.0.0",
    "ts-loader": "^9.4.1",
    "ts-node": "^10.9.1",
    "typescript": "^4.3.5",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "4.7.4"
  },
  "prettier": "office-addin-prettier-config",
  "browserslist": [
    "ie 11"
  ]
}

Getting the following error on production server:

Anyone can help me or suggest an solution?

[millerds]

This looks like something specific to the angular framework rather than office add-ins specifically. You should probably post on stack overflow or someplace where more Angular experts might see.

[tobiashoeft]

I think there is a problem with "build": "webpack --mode production",

Okay thx u!

[millerds]

The build command is calling webpack to create the bundled output files based on the settings in the webpack config file (also not specific to office addins). The use of 'nlif' is specific to angular. If you search the web you'll find other places that speak more to this angular construct and the potentially related problems.