在将Angular元素嵌入到另一个Angular项目中时,如果路由无法解析并且只显示
,可能是由于以下几个原因:
RouterModule
和其他必要的模块。你可以在父项目的app.module.ts
文件中查看是否正确导入了RouterModule
。import { RouterModule } from '@angular/router';
@NgModule({
imports: [
// 其他导入的模块
RouterModule.forRoot([]) // 确保正确导入 RouterModule 并使用 forRoot() 方法
],
// 其他配置项
})
export class AppModule { }
app-routing.module.ts
文件中添加路由配置。import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
// 添加路由配置
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
@Component({
selector: 'app-child-component', // 确保选择器与父项目中使用的选择器相匹配
// 其他配置项
})
export class ChildComponent { }
如果以上解决方法都没有解决问题,那可能是因为子项目的构建输出方式不正确。确保子项目正确构建并生成了可以在父项目中使用的组件和模块。你可以检查子项目的构建配置,例如angular.json
文件中的projects
配置项。