当先锋百科网

首页 1 2 3 4 5 6 7

Angular自定义模块的子路由报错

// app-routing.module.ts
import { CssStudyModule } from './css-study/css-study.module';
import { HomepageComponent } from './homepage/homepage.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomepageComponent },
  { path: 'CssStudy', loadChildren:()=>import('./css-study/css-study.module').then(m=>m.CssStudyModule)}
  ];

@NgModule({
  imports: [RouterModule.forRoot(routes,{ enableTracing: true })],
    //{ enableTracing: true }是调试用的
  exports: [RouterModule]
})
export class AppRoutingModule { }
// 自定义module模块的路由
import { CssModuleComponent } from './components/css-module/css-module.component';
import { SecondComponent } from './components/second/second.component';
import { FirstCss } from './components/first/first.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  {
    path: '', component: CssModuleComponent,
    children:[
      { path: 'first', component: FirstCss},
      { path: 'second', component: SecondComponent}
    ]
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CssRoutingModule { }
//css-module的html文件,要加上<router-outlet>
<p>css-module works!</p>
<div style="display: flex; flex-direction: row;">
    <div routerLink="first"> first</div>
    <div routerLink="second"> second</div></div>

<router-outlet></router-outlet>

访问/CssStudy/first报错
访问/CssStudy/first报错
然后尝试百度以及官网发现{ enableTracing: true }可以调试路由,然而看不太懂意义不大。
然后在自定义模块设置跳转到first,点击成功了。
在这里插入图片描述
问题:跳转链接可以,但是直接路由跳转会报错。
Refused to apply style from ‘http://localhost:51666/CssStudy/styles.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled
答案:个人猜测是子模块是懒加载,以至于我直接调用子模块的children路由会报错。

Tips:

1、生成指定位置的组件默认是在src/app下面的
	example: ng g component css-study/components/cssModule 
2、子模块的主页面路由是空才可以,(不懂,之后在研究)
3、子模块的主页面的html中要加上路由出口<router-outlet></router-outlet>

麻烦点个赞,让我知道我写博客除了防止猪脑过载还能帮到人、比个心。