Error: No template for dependency: PureExpressionDependency

Viewed 367

I am getting this error whenever I try to make build using angular ssr.

I upgraded Angular 12.0.1 to 13.2. After this I had error saying

IDBIndex is not defined

To sovled this I follwed this repo from Firebase also got help by creating custom webpack config js file

After completing those steps now I am facing this issue during ssr bundle generation. I have no clue what is this error saying.


āœ” Server application bundle generation complete.

Initial Chunk Files | Names                     | Raw Size
main.js             | main                      |  3.03 MB | 
server.js           | server                    |  3.03 MB | 

                    | Initial Total             |  6.06 MB

Lazy Chunk Files    | Names                     | Raw Size
59.js               | utils-multipart-parser-js | 13.24 kB | 

Build at: 2022-01-27T17:59:26.906Z - Hash: 606174cd0faf82ba - Time: 1431ms

./node_modules/@angular/animations/fesm2015/browser.mjs - Error: No template for dependency: PureExpressionDependency

./node_modules/@angular/common/fesm2015/http.mjs - Error: No template for dependency: PureExpressionDependency

./node_modules/@angular/compiler/fesm2015/compiler.mjs - Error: No template for dependency: PureExpressionDependency

./node_modules/@angular/core/fesm2015/core.mjs - Error: No template for dependency: PureExpressionDependency

./node_modules/@angular/platform-server/fesm2015/init.mjs - Error: No template for dependency: PureExpressionDependency

./node_modules/data-uri-to-buffer/dist/index.js - Error: No template for dependency: PureExpressionDependency

./node_modules/fetch-blob/file.js - Error: No template for dependency: PureExpressionDependency

./node_modules/fetch-blob/from.js - Error: No template for dependency: PureExpressionDependency

./node_modules/fetch-blob/index.js - Error: No template for dependency: PureExpressionDependency

./node_modules/formdata-polyfill/esm.min.js - Error: No template for dependency: PureExpressionDependency

./node_modules/node-fetch/src/body.js - Error: No template for dependency: PureExpressionDependency

./node_modules/node-fetch/src/errors/abort-error.js - Error: No template for dependency: PureExpressionDependency

./node_modules/node-fetch/src/errors/fetch-error.js - Error: No template for dependency: PureExpressionDependency

package.json


  "dependencies": {
    "@angular-builders/custom-webpack": "^13.0.0",
    "@angular-material-components/datetime-picker": "6.0.3",
    "@angular/animations": "^13.2.0",
    "@angular/cdk": "^13.2.0",
    "@angular/common": "13.2.0",
    "@angular/compiler": "13.2.0",
    "@angular/core": "13.2.0",
    "@angular/fire": "^6.1.4",
    "@angular/forms": "13.2.0",
    "@angular/material": "13.2.0",
    "@angular/material-moment-adapter": "13.2.0",
    "@angular/platform-browser": "13.2.0",
    "@angular/platform-browser-dynamic": "13.2.0",
    "@angular/platform-server": "13.2.0",
    "@angular/router": "13.2.0",

    "bootstrap": "^5.1.3",
    "crypto-js": "4.0.0",
    "data-uri-to-buffer": "^4.0.0",
    "domino": "^2.1.6",
    "fetch-blob": "^3.1.4",
    "filestack-js": "^3.23.1",
    "firebase": "^8.6.8",
    "formdata-polyfill": "^4.0.10",
    "highlight.js": "10.7.2",
    "jspdf": "^2.3.1",
    "lodash-es": "4.17.21",
    "moment": "^2.29.1",
    "ng-apexcharts": "^1.5.9",
    "ng-starrating": "^1.0.20",
    "ng-stripe-checkout": "^1.0.4",
    "ng-wistia-components": "0.0.2",
    "ngx-infinite-scroll": "^10.0.1",
    "ngx-mat-select-search": "^3.2.0",
    "ngx-moment": "^5.0.0",
    "node-fetch": "^3.2.0",
    "rrule": "2.6.8",
    "rxjs": "7.5.2",
    
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "13.2.0",
    "@angular/cli": "13.2.0",
    "@angular/compiler-cli": "13.2.0",
    "@angular/language-service": "13.2.0",
    "@nguniversal/builders": "^12.0.0",
    "@nguniversal/express-engine": "^13.0.2",
    "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
    "@ngx-builders/analyze": "^3.0.1",
    "@types/crypto-js": "4.0.1",
    "@types/express": "^4.17.0",
    "@types/highlight.js": "9.12.4",
    "@types/jasmine": "3.6.10",
    "@types/jasminewd2": "2.0.8",
    "@types/lodash-es": "4.17.4",
    "@types/node": "15.0.1",
    "protractor": "7.0.0",
    "tailwindcss": "^2.2.19",
    "ts-loader": "^9.2.6",
    "ts-node": "9.1.1",
    "tslint": "6.1.2",
    "typescript": "~4.5.5",
    "utf-8-validate": "^5.0.5",
    "webpack-cli": "^4.9.2",
    "ws": "^8.2.2",
    "xhr2": "^0.2.1"
  }


Got response from maintainer

AngularFire maintainer here, the root cause appears to be Firebase JS SDK's usage of the idb library. The version of the library that it uses doesn't have exports in its package.json and expects CJS to be loaded in Node.js. In Angular 13.1+ (unsure exactly which minor the change was introduced) that means unguarded calls to IndexDB are present in your server bundle, since it's now bundling ESM, and causing runtime exceptions on load...

0 Answers
Related