平均堆叠 - 角度2站点未完全加载

时间:2017-12-19 09:31:09

标签: html css angular2-routing

我目前正在使用带有角度2的MEAN堆栈。

我无法弄清楚问题所在。

我正在获取未完全加载的网站。不确定它的CSS问题。

以下是为端口的文件夹结构

但是当我尝试点击页面时:http://my_ip:9200/admin/login我的css得到了不完整的加载。 ie)页面没有完全加载。

https://imgur.com/a/ByeLK

/var/www/html/Express/Local-MEAN-dev/index.js

...
const port = process.env.PORT || 9000;
....
//Start Server: Listen on port 9000
app.listen(port, () => {
    console.log('Listening on port ' + port);
});

的package.json

{
  "name": "mean-ang2",
  "version": "1.0.0",
  "description": "MEAN Stack with Angular 2",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "build": "cd client && ng build --prod"
  },
"repository": {
"type": "git",
"url": ""
   },
 "keywords": [
   ..
 ],
"author": "",
"license": "ISC",
"bugs": {
  "url": ""
},
"homepage": "",
"dependencies": {
  ...
},
"devDependencies": {
  "@angular/cli": "^1.2.3"
}
}

/ var / www / html / Express / Local-MEAN-dev / admin

我的角色2代码在哪里。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Food4Smiles</title>
  <base href="/admin">
  <!--<link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.css">-->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/static/hmicon.png">
</head>

<body>
  <app-root></app-root>
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

要为admin配置自定义端口,我已编辑了以下文件:

\本地-MEAN-dev的\管理员\ node_modules \ @angular \ CLI \命令\ serve.js

const defaultPort = process.env.PORT ||9200;

1 个答案:

答案 0 :(得分:0)

在head标签中添加bootstrap css链接。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">