Question

我正在开发一个github repo，它是一个有角度的示例应用程序，您可以检查它here。现在，我正在尝试添加Angular Universal并将其部署到firebase（这是由于functions文件夹造成的原因）。一切正常，漏洞构建过程和部署都很好，但是当我在本地主机上运行SSR时，我会遇到此错误：

Error: No NgModule metadata found for '[object Object]'.
at NgModuleResolver.resolve (/Users/iramos/WebstormProjects/angular7-example-app/functions/dist/server.js:60692:23)
at CompileMetadataResolver.getNgModuleMetadata (/Users/iramos/WebstormProjects/angular7-example-app/functions/dist/server.js:59334:43)
at JitCompiler._loadModules (/Users/iramos/WebstormProjects/angular7-example-app/functions/dist/server.js:66754:51)
at JitCompiler._compileModuleAndComponents (/Users/iramos/WebstormProjects/angular7-example-app/functions/dist/server.js:66735:36)
at JitCompiler.compileModuleAsync (/Users/iramos/WebstormProjects/angular7-example-app/functions/dist/server.js:66695:37)
at CompilerImpl.compileModuleAsync (/Users/iramos/WebstormProjects/angular7-example-app/functions/dist/server.js:87477:31)
...

重现该错误的步骤：

克隆存储库
npm i;
npm运行build：ssr，然后npm运行start：ssr
转到localhost：4000

我将在这里粘贴最重要的部分，但是您可以检查孔回购。

package.json

"scripts": {
    "start:ssr": "node functions/dist/server",
    "build": "ng build",
    "build:prod": "ng build --prod",
    "build:prod:es": "ng build --configuration=production-es",
    "build:server:prod": "ng run angularexampleapp:server:production",
    "build:client-and-server-bundles": "npm run build:prod && npm run build:prod:es && npm run build:server:prod",
    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server"
}

webpack.server.config.js

// Work around for https://github.com/angular/angular-cli/issues/7200

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'none',
  entry: {
    // This is our Express server for Dynamic universal
    server: './server.ts'
  },
  target: 'node',
  resolve: {extensions: ['.ts', '.js']},
  optimization: {
    minimize: false
  },
  output: {
    // Puts the output at the root of the dist folder
    path: path.join(__dirname, 'functions/dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {test: /\.ts$/, loader: 'ts-loader'}
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
};

server.ts

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

import {enableProdMode} from '@angular/core';
// Express Engine
import {ngExpressEngine} from '@nguniversal/express-engine';
// Import module map for lazy loading
import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';

import * as express from 'express';
import {join} from 'path';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'functions/dist/browser');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./functions/dist/server/main');

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', DIST_FOLDER);

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

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', {req});
});

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

angular.json

...
"configurations": {
    "production-en": {
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": true,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true,
        "serviceWorker": true,
        "baseHref": "/",
        "budgets": [
           {
             "type": "initial",
             "maximumWarning": "2mb",
             "maximumError": "5mb"
           }
        ],
        "fileReplacements": [
           {
             "replace": "src/environments/environment.ts",
             "with": "src/environments/environment.prod.ts"
           }
        ]
    }
}

...

"server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
       "outputPath": "functions/dist/server",
       "main": "src/main.server.ts",
       "tsConfig": "src/tsconfig.server.json"
    },
    "configurations": {
       "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "stylePreprocessorOptions": {
            "includePaths": [
              "src/app/styles"
            ]
          }
        }
      }
    }
 }

我已经尝试过的事情：

从angular.json删除“ outputHashing”
删除懒惰的加载路线（英雄模块中只有一个）
在angular json配置中关闭优化标记

没有一个起作用。

我将不胜感激！拜托！

谢谢！

Answer 1

最后，我必须删除一个文件夹，其中包含一些在构建过程中包含的脚本。您可以在github存储库中找到最终代码。

Angular Universal：错误：未找到“ [对象对象]”的NgModule元数据

1 个答案: