Question

运行npm后，运行build：ssr和npm run serve：ssr，该应用将永远加载-等待本地主机和源不重新加载。控制台中未显示任何错误，该应用仅在控制台中运行，但浏览器中未呈现任何视图。

index.html

<!doctype html>
<html lang="en" >

<head>
  <meta charset="utf-8">
  <title>Online store</title>
  <base href="/">
</head>

<body>

  <app-root></app-root>

  <noscript>Please enable JavaScript to continue using this application.</noscript>
  <!-- Custom script -->
  <script>
  </script>
  <!-- Google Analytics Integration -->
  <script>
    (function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date(); a = s.createElement(o),
      m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
  </script>
  <!-- End Google Analytics Integration -->

  <!-- Facebook Pixel Code -->
  <script>
    !function (f, b, e, v, n, t, s) {
      if (f.fbq) return; n = f.fbq = function () {
        n.callMethod ?
        n.callMethod.apply(n, arguments) : n.queue.push(arguments)
      };
      if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0';
      n.queue = []; t = b.createElement(e); t.async = !0;
      t.src = v; s = b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t, s)
    }(window, document, 'script',
      'https://connect.facebook.net/en_US/fbevents.js');
  </script>
  <noscript>
    <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id="
      +localStorage.getItem('facebookPixelId')+"&ev=PageView&noscript=1" />
  </noscript>
  <!-- End Facebook Pixel Code -->
</body>

</html>

package.json

"@angular/core": "^7.2.7",
"@angular/platform-server": "^7.2.7",
"@angular/pwa": "^0.12.4",
"@angular/service-worker": "^7.2.7",
"@nguniversal/express-engine": "^7.1.1",
"@nguniversal/module-map-ngfactory-loader": "^7.1.1",

server.ts

...
app.engine('html', (_, options, callback) => {
  const engine = ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
      provideModuleMap(LAZY_MODULE_MAP),
      {provide: 'host', useFactory: () => options.req.get('host'), deps: []}
    ]
  });
  engine(_, options, callback);
});

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

// Serve static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser'), {
  maxAge: '1y'
}));

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

app.get('*', (req, res) => { res.sendFile( join(DIST_FOLDER, 'browser' , 'index.html'), {req}); });

tsconfig.server.json

{
"extends": "./tsconfig.app.json",
"compilerOptions": {
 "outDir": "../out-tsc/app-server",
 "baseUrl": "."
},
"angularCompilerOptions": {
 "entryModule": "app/app.server.module#AppServerModule"
}
}

angular.json

....
"server": {
       "builder": "@angular-devkit/build-angular:server",
       "options": {
         "outputPath": "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"
             }
           ]
         }
       }
     }
   ....

package.json

"scripts": {
...
"compile:server": "webpack --config webpack.server.config.js --progress --colors",
 "serve:ssr": "node dist/server",
 "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
 "build:client-and-server-bundles": "ng build --prod && ng run my-project:server:production",
 "ssr-only": "ng run my-project:server:production && npm run compile:server && node dist/server"
....
}

我的项目出了什么问题？

Answer 1

您正在服务器端使用document和localStorage，而在ssr上不可用。这可能就是为什么页面无法加载的原因。

Answer 2

我遇到了同样的问题，为了解决这个问题，我不得不在后面加上应用程序名称。即：http://localhost:port/appname

源未加载，使用ssr服务时将永远等待localhost

2 个答案: