Question

在终端中运行ng build -- prod命令后，没有出现css且无法浏览除索引之外的其他页面。 dist下的index.html如下所示：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ShoptoMyDoor</title>
  <base href="/">

  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->
 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
          <![endif]-->

  
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
  
</head>
<body class="hold-transition skin-black-light sidebar-mini">

我的.angular-cli.json文件看起来像（部分粘贴在这里，如果需要，会发布完整的文件内容）：

   {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "angular"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss",
        "assets/css/bootstrap.min.css",
        "assets/css/font-awesome.min.css",
        "assets/css/ionicons.min.css",
        "assets/css/theme.min.css",
        "assets/css/all-skins.min.css",
        "assets/css/morris.css",
        "assets/css/jquery-jvectormap.css",
        "assets/css/bootstrap-datepicker.min.css",
        "assets/css/daterangepicker.css",
        "assets/css/bootstrap3-wysihtml5.min.css",
        "assets/css/style.css"],

当我尝试通过输入“http://localhost/ngAngular/dist/”来浏览时，没有css和js。此外，当我尝试访问“http://localhost/ngAngular/dist/admin/book”或“http://localhost/ngAngular/dist/admin/product”之类的路径时，它会显示404 Not Found错误。

更新版本1：

我的 app-routing.ts 位于src / app /下面：

const appRoutes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'admin/login', component: AdminLoginComponent},
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {path: 'register', component: RegisterComponent},
  {path: '**', component: PageNotFoundComponent}
];

在/ admin /文件夹下，我的admin-routing.module.ts如下：

const adminRoutes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthGuardService],
    children: [
      {
        path: '',
        canActivateChild: [AuthGuardService],
        children: [
          {path: 'book', component: BookComponent},
          {path: 'product', component: ProductComponent},
          {path: 'addbook', component: AddbookComponent},
          {path: '', component: AdminDashboardComponent},
          {path: 'update-product/:id', component: UpdateProductComponent}
        ],
      }
    ]
  }
];

Answer 1

尝试使用基础的相对路径

<base href="./">

Angular 5：没有css出现，并且在ng build --prod之后无法转到其他页面

1 个答案: