Error Angular 12 – Angular/express-engine

Published

Hello I’m getting an error when running angular 12 together with @nuniversal/express-engine I need help to solve this problem.

I don’t have any information about the erro like you can see bellow

Error wsl2

Error: invalid
    at ɵɵinvalidFactoryDep (/mnt/c/Users/felip/OneDrive/Documentos/site-oportunidade-frontend/dist/empregos-rio/server/main.js:1:190062)
    at Object.t_Factory [as factory] (ng:///t/ɵfac.js:5:29)
    at R3Injector.hydrate (/mnt/c/Users/felip/OneDrive/Documentos/site-oportunidade-frontend/dist/empregos-rio/server/main.js:1:264096)
    at R3Injector.get (/mnt/c/Users/felip/OneDrive/Documentos/site-oportunidade-frontend/dist/empregos-rio/server/main.js:1:261065)
    at /mnt/c/Users/felip/OneDrive/Documentos/site-oportunidade-frontend/dist/empregos-rio/server/main.js:1:261628
    at Set.forEach (<anonymous>)
    at R3Injector._resolveInjectorDefTypes (/mnt/c/Users/felip/OneDrive/Documentos/site-oportunidade-frontend/dist/empregos-rio/server/main.js:1:261606)
    at new NgModuleRef$1 (/mnt/c/Users/felip/OneDrive/Documentos/site-oportunidade-frontend/dist/empregos-rio/server/main.js:1:446597)
    at NgModuleFactory$1.create (/mnt/c/Users/felip/OneDrive/Documentos/site-oportunidade-frontend/dist/empregos-rio/server/main.js:1:447264)
    at /mnt/c/Users/felip/OneDrive/Documentos/site-oportunidade-frontend/dist/empregos-rio/server/main.js:1:506044

server.ts

import 'zone.js/dist/zone-node';

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/empregos-rio/browser');
  const indexHtml = existsSync(join(distFolder, 'index.html')) ? 'index.html' : 'index';

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // server.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  // All regular routes use the Universal engine
 server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });
  return server;
}

function run(): void {
  const port = process.env.PORT || 4000;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from './src/main.server';

This file was change when installed the @nguniversal/express-engine i removed the ‘development’ and put ‘production’ because it wasn’t running.

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": true
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "empregos-rio": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/empregos-rio/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json",
              "src/sitemap.xml",
              "src/robots.txt"
            ],
            "styles": [
              "src/styles.css",
              "src/theme.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "empregos-rio:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "empregos-rio:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "empregos-rio:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/empregos-rio/server",
            "main": "server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "sourceMap": false,
              "extractLicenses": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "configurations": {
            "development": {
              "browserTarget": "empregos-rio:build:development",
              "serverTarget": "empregos-rio:server:development"
            },
            "production": {
              "browserTarget": "empregos-rio:build:production",
              "serverTarget": "empregos-rio:server:production"
            }
          },
          "defaultConfiguration": "production"
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "routes": [
              "/"
            ]
          },
          "configurations": {
            "production": {
              "browserTarget": "empregos-rio:build:production",
              "serverTarget": "empregos-rio:server:production"
            },
            "development": {
              "browserTarget": "empregos-rio:build:development",
              "serverTarget": "empregos-rio:server:development"
            }
          },
          "defaultConfiguration": "production"
        }
      }
    },
    "empregos-rio-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "empregos-rio:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "empregos-rio:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "empregos-rio"
}

package.json

{
  "name": "empregos-rio",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev:ssr": "ng run empregos-rio:serve-ssr",
    "serve:ssr": "node dist/empregos-rio/server/main.js",
    "build:ssr": "ng build && ng run empregos-rio:server",
    "prerender": "ng run empregos-rio:prerender"
      },
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.1.2",
    "@angular/cdk": "^12.1.2",
    "@angular/common": "^12.1.2",
    "@angular/compiler": "^12.1.2",
    "@angular/core": "^12.1.2",
    "@angular/forms": "^12.1.2",
    "@angular/material": "^12.1.2",
    "@angular/material-moment-adapter": "^12.1.2",
    "@angular/platform-browser": "^12.1.2",
    "@angular/platform-browser-dynamic": "^12.1.2",
    "@angular/platform-server": "^12.1.2",
    "@angular/router": "^12.1.2",
    "@angular/service-worker": "^12.1.2",
    "@auth0/angular-jwt": "^2.1.2",
    "@nguniversal/express-engine": "^12.1.0",
    "@ngx-lite/json-ld": "^0.6.4",
    "@ngx-loading-bar/core": "^2.2.0",
    "@ngx-loading-bar/router": "^2.2.0",
    "angulartics2": "^10.0.0",
    "core-js": "^2.6.12",
    "express": "^4.15.2",
    "hammerjs": "^2.0.8",
    "moment": "^2.29.1",
    "ng-recaptcha": "8.0.0",
    "ngx-infinite-scroll": "^6.9.1",
    "rxjs": "^6.6.7",
    "rxjs-compat": "^6.6.7",
    "zone.js": "^0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.2",
    "@angular/cli": "~12.1.2",
    "@angular/compiler-cli": "^12.1.2",
    "@angular/language-service": "^12.1.2",
    "@angular/pwa": "^12.1.2",
    "@nguniversal/builders": "^12.1.0",
    "@types/express": "^4.17.0",
    "@types/jasmine": "^2.8.18",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^10.17.60",
    "codelyzer": "~6.0.2 ",
    "jasmine-core": "~3.8.0 ",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^6.3.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "protractor": "^5.4.4",
    "ts-node": "~7.0.1",
    "tslint": "~5.11.0",
    "typescript": "4.3.5"
  }
}


The error haven't any information and idon't know how fix this.

Source: Angular Questions

Published
Categorized as angular, express, http, javascript Tagged , , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq