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报错
然后尝试百度以及官网发现{ 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>
麻烦点个赞,让我知道我写博客除了防止猪脑过载还能帮到人、比个心。