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

本文介绍了Angular 5:在ng build --prod之后没有CSS出现并且无法转到其他页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

No css are being appeared and unable to browse other pages except the index, after I run the ng build -- prod command in terminal. The index.html under dist is looks below:

<!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文件看起来像(部分粘贴在这里，如果需要的话，将发布完整的文件内容):

My .angular-cli.json file is look like (partially pasted here, will post the full file content if requested):

   {
  "$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找不到错误.

When I try to browse the same by typing "http://localhost/ngAngular/dist/", no css and js there. Also, when I tried to access the path like "http://localhost/ngAngular/dist/admin/book" or "http://localhost/ngAngular/dist/admin/product", it shows 404 Not Found error.

更新版本1:

我的src/app/下的 app-routing.ts 如下:

My app-routing.ts under src/app/ is below:

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如下:

Under /admin/ folder, my admin-routing.module.ts is below:

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}
        ],
      }
    ]
  }
];

dist

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

问题描述

推荐答案