Angular - 拒绝应用来自“”的样式

发布于 2025-01-17 02:17:07 字数 3613 浏览 0 评论 0原文

我正在开发一个角度应用程序，并尝试延迟加载名为 ProjectsModule 的模块，项目组件显示没有任何问题，当我导航到 /projects/1 等项目时一切正常，直到我点击刷新。
当我单击浏览器中的刷新按钮时，页面的样式变得混乱（某些样式丢失并且页面的主要布局被破坏）并出现错误：（每次使用不同的网址 8 次）

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.

并保持损坏状态，直到我去到另一个页面并再次点击刷新。
注意：除了这个组件之外，该错误不会出现在任何组件中。

这是我的代码：
"app-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 { }

"app.module.ts":

@NgModule({
  components: [
    App.component.ts,
    // my components
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    ProjectsModule,
    // other modules
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

"projects-routing.module.ts":

const routes: Routes = [
  {path: '', component: ProjectsComponent},
  {path: ':projectId', component: SingleProjectComponent}
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class ProjectsRoutingModule { }

"projects.module.ts":

@NgModule({
  declarations: [ProjectsComponent, SingleProjectComponent],
  imports: [
    CommonModule,
    ProjectsRoutingModule,
    // other modules
  ],
  exports: [ProjectsComponent, SingleProjectComponent]
})
export class ProjectsModule { }

名为“SingleProjectComponent”的组件目前不包含任何内容，并且具有静态“single-project.component.html”中的 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>

原文

I am working on an angular application and trying to lazy load a module called ProjectsModule the projects component is shown without any problems and when I navigate to a project like /projects/1 it's all right until I hit refresh.
when I click the refresh button in the browser the style of the page becomes messy(some styles are lost and the main layout of the page is broken) with the error: (8 times with a different url everytime)

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.

and stays broken until I go to another page and hit refresh again.
NOTE: the error doesn't appear in any component except this one.

this is my code:
"app-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 { }

"app.module.ts":

@NgModule({
  components: [
    App.component.ts,
    // my components
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    ProjectsModule,
    // other modules
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

"projects-routing.module.ts":

const routes: Routes = [
  {path: '', component: ProjectsComponent},
  {path: ':projectId', component: SingleProjectComponent}
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class ProjectsRoutingModule { }

"projects.module.ts":

@NgModule({
  declarations: [ProjectsComponent, SingleProjectComponent],
  imports: [
    CommonModule,
    ProjectsRoutingModule,
    // other modules
  ],
  exports: [ProjectsComponent, SingleProjectComponent]
})
export class ProjectsModule { }

the component called "SingleProjectComponent" contains nothing for now and it has static html elements in "single-project.component.html" and nothing special.
if there is any code that I didn't show please tell me in the comments.

EDIT: "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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦与时光遇 2025-01-24 02:17:07

我通过在index.html 文件中每个链接标记href 的开头添加“/”解决了这个问题。
所以它们现在是这样的：

<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" />

所以路径是相对于当前模块的，而不是相对于基础的。

I solved the problem by adding '/' to the beginning of every link tag href in index.html file.
so they are now like this:

<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" />

so the path was relative to the current module no to the base.

回复收藏 0 原文

~没有更多了~