Angular - отказался применить стиль из «<URL>»
Я работаю над угловым приложением и пытаюсь лениво загрузить модуль с именем ProjectsModule, компонент проектов отображается без проблем, и когда я перехожу к такому проекту, как /projects/1, все в порядке, пока я не нажму «Обновить».
когда я нажимаю кнопку обновления в браузере, стиль страницы становится беспорядочным (некоторые стили теряются, а основной макет страницы нарушается) с ошибкой: (8 раз с другим URL-адресом каждый раз)
Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
и остается сломанным, пока я не перейду на другую страницу и снова не нажму «Обновить». ПРИМЕЧАНИЕ: ошибка не появляется ни в одном компоненте, кроме этого.
это мой код:
"приложение-routing.module.ts":
const routes: Routes = [
// some other routes here
{path: 'projects', loadChildren: () => import('./views/projects/projects.module').then(m=>m.ProjectsModule)},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
"приложение.модуль.тс":
@NgModule({
components: [
App.component.ts,
// my components
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
ProjectsModule,
// other modules
],
bootstrap: [AppComponent]
})
export class AppModule { }
"проекты-routing.module.ts":
const routes: Routes = [
{path: '', component: ProjectsComponent},
{path: ':projectId', component: SingleProjectComponent}
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class ProjectsRoutingModule { }
"проекты.модуль.тс":
@NgModule({
declarations: [ProjectsComponent, SingleProjectComponent],
imports: [
CommonModule,
ProjectsRoutingModule,
// other modules
],
exports: [ProjectsComponent, SingleProjectComponent]
})
export class ProjectsModule { }
компонент под названием «SingleProjectComponent» пока ничего не содержит, и у него есть статические html-элементы в «single-project.component.html» и ничего особенного. если есть какой-то код, который я не показал, сообщите мне в комментариях.
Обновлено: "index.html":
<!doctype html>
<html lang = "en">
<head>
<title>Eline</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
<meta name = "author" content = "Eline">
<meta name = "viewport" content = "width=device-width,initial-scale=1.0,maximum-scale=1" />
<meta name = "description" content = "Eline">
<!-- favicon icon -->
<link rel = "shortcut icon" href = "assets/images/favicon.png">
<link rel = "apple-touch-icon" href = "assets/images/apple-touch-icon-57x57.png">
<link rel = "apple-touch-icon" sizes = "72x72" href = "assets/images/apple-touch-icon-72x72.png">
<link rel = "apple-touch-icon" sizes = "114x114" href = "assets/images/apple-touch-icon-114x114.png">
<!-- style sheets and font icons -->
<link rel = "stylesheet" type = "text/css" href = "assets/css/font-icons.min.css">
<link rel = "stylesheet" type = "text/css" href = "assets/css/theme-vendors.min.css">
<link rel = "stylesheet" type = "text/css" href = "assets/css/style.css" />
<link rel = "stylesheet" type = "text/css" href = "assets/css/responsive.css" />
<base href = "/">
<link rel = "preconnect" href = "https://fonts.gstatic.com">
<link href = "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel = "stylesheet">
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
</head>
<body data-mobile-nav-trigger-alignment = "right" data-mobile-nav-style = "full-screen-menu" data-mobile-nav-bg-color = "#33343a">
<app-root></app-root>
</body>
</html>
@KrunalLimbad app.component.html содержит только <router-outlet></router-outlet>, но я добавил теги ссылок в index.html, и все они имеют type = "text/css"
извините за плохое, пожалуйста, опубликуйте код index.html
@KrunalLimbad Я только что добавил это.
Кажется, все в порядке, не могли бы вы проверить этот решение?
Я проверил упомянутое вами решение, но оно не решило проблему, но URL-адреса файлов стилей в ошибке содержат /projects/, например: http://localhost:4200/projects/assets/css/style.css но настоящий без «проектов», так почему это так?
Ответы 1
Я решил проблему, добавив '/' в начало каждого тега ссылки href в файле index.html.
так они сейчас такие:
<link rel = "stylesheet" type = "text/css" href = "/assets/css/font-icons.min.css" />
<link rel = "stylesheet" type = "text/css" href = "/assets/css/theme-vendors.min.css" />
<link rel = "stylesheet" type = "text/css" href = "/assets/css/style.css" />
<link rel = "stylesheet" type = "text/css" href = "/assets/css/responsive.css" />
так что путь был относительно текущего модуля не к базе.
Хотя это действительно решает вашу проблему, в идеале вы вообще не должны ссылаться на CSS, а вместо этого использовать сборщик ресурсов Angular.
@MindingData На самом деле я пытался сделать это раньше, но это не сработало, потому что есть некоторые файлы, которые импортируются в файлы стилей по URL-адресам относительно их пути, а не пути моего приложения (многие файлы не найдены ошибки), поэтому вместо изменения десятков URL-адресов в стиле, который я решил импортировать в index.html.
Можете ли вы опубликовать код app.component.html здесь? Я думаю, вам нужно добавить type = "text/css" в тег ссылки для импорта css.