Angular: при обновлении — ресурсы не найдены (автоматическое изменение URL-адреса запроса)

Постановка задачи

Выполненные шаги:

  1. откройте http://localhost:4200 (индексный файл успешно загружен)
  2. откройте http://localhost:4200/customers (пользовательский интерфейс успешно загружен)

Заголовок: нет ресурса/файла с кодом состояния 404)

Обратите внимание на URL-адрес запроса manifest.json http://localhost:4200/manifest.json.

введите здесь описание изображения

  1. Нажмите кнопку обновления

Случай 1: URL становится http://localhost:4200/customers/ (только индексный файл загружается без пользовательского интерфейса для /клиенты)

Обратите внимание, что URL-адрес manifest.json — http://localhost:4200/customers/manifest.json с кодом состояния 404

введите здесь описание изображения

Случай 2: несколько ресурсов не найдены из-за неправильного URL-адреса запроса

введите здесь описание изображения

Структура проекта введите здесь описание изображения

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="">


  <link rel="stylesheet" href="/assets/vendors/w3/w3css4w3.css">
  <link rel="stylesheet" href="/assets/vendors/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="/assets/vendors/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="/assets/vendors/themify-icons/css/themify-icons.css">
  <link rel="stylesheet" href="/assets/vendors/flag-icon-css/css/flag-icon.min.css">
  <link rel="stylesheet" href="/assets/vendors/selectFX/css/cs-skin-elastic.css">


  <link rel="stylesheet" type="text/css" href="/assets/vendors/chosen/chosen.min.css">
  <link rel="stylesheet" href="/assets/css/style.css">

  <link rel="stylesheet" href="../../../assets/vendors/datatables.net-bs4/css/dataTables.bootstrap4.min.css">


  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" rel="stylesheet" type="text/css">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#1976d2">
</head>
<body>
  <app-root></app-root>
  <script src="/assets/vendors/jquery/dist/jquery.min.js"></script>
  <script src="/assets/vendors/popper.js/dist/umd/popper.min.js"></script>
  <script src="/assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="/assets/js/main.js"></script>
  <script src="/assets/vendors/chosen/chosen.jquery.min.js"></script>


    <!-- //filters -->
    <script src="/assets/vendors/datatables.net/js/jquery.dataTables.min.js"></script> 
    <!-- //css effects -->
    <script src="/assets/vendors/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script> 
    <!-- //filters -->
    <script src="/assets/js/init-scripts/data-table/datatables-init.js"></script> 
  <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>

manifest.json

{
  "name": "MyAppName",
  "short_name": "MyAppName",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "prefer_related_applications": true,
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "MyAppName": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/MyAppName",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ],
              "serviceWorker": true,
              "ngswConfigPath": "src/ngsw-config.json"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "MyAppName:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "MyAppName:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "MyAppName:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "MyAppName-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "MyAppName:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "MyAppName:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "MyAppName"
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

//imports Component 

const routes: Routes = 
[
  {path:'customer/new',component:CreateCustomerAccountComponent,},
  {path:'customers',component:CustomersComponent},
  {path:'customers/:id/history',component:CustomerBuyHistoryComponent},
  {path:'items',component:ItemsComponent},
  {path:'item/new',component:CreateItemComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents=
[
  Components
]

***ng --version***

Angular CLI: 7.3.9
Node: 12.3.1
OS: win32 x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cli                      7.3.9
@angular/pwa                      0.12.4
@ngtools/webpack                  7.3.9
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

angular progressive-web-apps angular7 angular-ui-router angular7-router
person Patel Romil    schedule 17.06.2019    source источник
comment
Вы добавили <link rel="manifest" href="manifest.json"> в index.html?   -  person Nikola Stekovic    schedule 17.06.2019
comment
@NikolaStekovic да, я добавил index.html для справки.   -  person Patel Romil    schedule 17.06.2019
comment
Возможно, попробуйте косую черту в вашем index.html ‹base href=/›   -  person Mathias    schedule 17.06.2019

Ответы (2)


arrow_upward
2
arrow_downward

Поместите косую черту в ваш index.html

<base href="/">
person Mathias    schedule 17.06.2019

arrow_upward
1
arrow_downward

Добавление / в <base href="/"> в index.html решило проблему.

Почему?

<base href="/"> — это ваш корневой базовый путь, на его основе ссылаются все ресурсы и активы в вашем приложении.

Это означает, что ваше приложение будет запускаться из корневой папки, то есть локально оно будет рассматривать localhost:4200/, а на сервере — корневую папку.

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

person Patel Romil    schedule 18.06.2019