NgUniveral не получает css файлов после перезагрузки страницы по разным маршрутам - PullRequest
0 голосов
/ 06 апреля 2020

Когда я запускаю команду npm run build:ssr && npm run serve: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>

Мой вопрос, почему стиль ссылки стоит перед HTML? Я что-то пропустил? Он отлично работает в http://localhost: 4000 , но когда я посещаю http://localhost: 4000 / что-то и когда я перезагружаю страницу, CSS отсутствует, и я получаю только обычный HTML?

server.ts

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

1 Ответ

0 голосов
/ 09 апреля 2020

Я выяснил, что angular использует компилятор aot по умолчанию (angular. json), а извлечение Css также имеет значение true по умолчанию. И я изменил эти значения на ложь, и это сработало. Я думал, что это может быть полезно для других. Это было angular 8.xx

...