Angular 5: CSS не появляется и не может переходить на другие страницы после ng build --prod

Никакие CSS не появляются и не могут просматривать другие страницы, кроме индекса, после того, как я запустил команду ng build -- prod в терминале. Index.html в dist выглядит ниже:

<!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: // локальный / ngAngular / dist /», там нет css и js. Кроме того, когда я пытался получить доступ к пути типа «http: // локальный / ngAngular / dist / admin / книга» или «http: // локальный хост / 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}
        ],
      }
    ]
  }
];

angular angular5

02.05.2018 12:30

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

1 281

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

попробуйте использовать относительный путь для базы

<base href = "./">

Я скопировал файлы / папки из dist и вставил их в другую папку на локальном хосте. Затем я изменил index.html, как вы предложили. Теперь появляется CSS (локальный / liveng / админ). Однако, когда я вручную набираю локальный / liveng / админ / продукт, отображается 404. (на самом деле я еще не реализовал структуру навигации)

— 02.05.2018 12:41

ну, вам нужно создать свою конфигурацию маршрутизации

— 02.05.2018 12:47

Я вижу в index.html в разделе dist, <div class = "wrapper"> <app-root> </app-root> </div> - недостаточно?

— 02.05.2018 12:48

но есть ли у вас / admin / product path в вашем routing.ts, если нет или неправильно реализован, у вас будет ошибка 404

— 02.05.2018 12:57

Я обновил свой вопрос. Надеюсь, это решит ваш вопрос.

— 02.05.2018 13:27

вы используете lazyLoading? я не вижу, как вы входите в модуль администратора из app-routing.ts

— 02.05.2018 13:33

Позвольте нам продолжить обсуждение в чате.