Angular NgUniveral在以不同路径重新加载页面后不会获取css文件_Angular_Server Side Rendering

Angular NgUniveral在以不同路径重新加载页面后不会获取css文件

angular

Angular NgUniveral在以不同路径重新加载页面后不会获取css文件,angular,server-side-rendering,Angular,Server Side Rendering,当我运行命令npm run build:ssr&&npm run service:ssr dist/browser/index是这样的 <link rel="stylesheet" href="styles.45a41eb7c44bd9bdf7bf.css"> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Reservati

当我运行命令

npm run build:ssr&&npm run service:ssr

dist/browser/index是这样的

<link rel="stylesheet" href="styles.45a41eb7c44bd9bdf7bf.css">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ReservationUI</title>
  <base href="">  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="https://kit.fontawesome.com/da86338538.js" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> -->
<body class="igx-typography">
  <app-root></app-root>
<script src="runtime-es2015.161cf48ce892f504309d.js" type="module"></script><script src="runtime-es5.161cf48ce892f504309d.js" nomodule defer></script><script src="polyfills-es5.3e8196928d184a6e5319.js" nomodule defer></script><script src="polyfills-es2015.5b10b8fd823b6392f1fd.js" type="module"></script><script src="main-es2015.1a48faabc8bb930555e4.js" type="module"></script><script src="main-es5.1a48faabc8bb930555e4.js" nomodule defer></script></body>
</html>

我发现angular在默认情况下使用的是aot编译器（angular.json），extractCss在默认情况下也是如此。我把这些值改为false，结果成功了。我想这可能对其他人有帮助。这是8.xx

const app = express();

global['localStorage'] = localStorage;

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

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./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);



// Serve 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}`);
});