angular - 无法以角度加载延迟加载组件中的公共模块,请参阅说明
问题描述
我的角度应用程序中有以下结构:
App:
'auth' => lazyload AuthModule
(some auth routes which is working fine and not required for this question)
'' => lazyload MainSiteModule:
'home' => HomeComponent
'photos' => PhotosComponet
'managment' => lazyload ManagmentModule
'' => DashBoard Area
'edit-profile' => 'EditProfileComponent'
现在在 ManagmentModule 或我在 MainSiteModule 中延迟加载的任何模块(它本身是一个延迟加载的模块)中,我无法使用角管道、ngIf 和通用模块的东西,即使很难我在每个延迟加载的模块(例如管理模块)中导入共享模块。 ..
SharedModule 如下:
import { NgModule } from '@angular/core';
import { CommentComponent } from './comment-form/comment-form.component';
import { PostCommentsComponent } from './post-comments/post-comments.component';
import { PostComponent } from './post/post.component';
import { PeopleItemRemoveComponent } from './people-item-remove/people-item-remove.component';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [
CommentComponent,
PostCommentsComponent,
PostComponent,
PeopleItemRemoveComponent
],
imports: [CommonModule, RouterModule],
exports: [PostComponent, PeopleItemRemoveComponent, CommentComponent, PostCommentsComponent]
})
export class SharedModule { }
我 101% 确定导入没有任何问题,但是如果您需要模块内部的内容,这里就是为您准备的
应用模块:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthInterceptor } from './interceptors/auth.intercepter';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [
{ provide: HTTP_INTERCEPTORS, multi: true, useClass: AuthInterceptor }
],
bootstrap: [AppComponent]
})
export class AppModule { }
应用路由模块:
import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { MainSiteGuard } from './guards/mainsite-guard.service';
import { AuthGuard } from './guards/auth-guard.service';
const routes: Routes = [
{
path: 'auth',
canLoad: [AuthGuard],
loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
},
{
path: '',
canLoad: [MainSiteGuard],
loadChildren: () => import('./main-site/main-site.module').then(m => m.MainSiteModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
exports: [RouterModule]
})
export class AppRoutingModule { }
主站模块:
import { NgModule } from '@angular/core';
import { ToggleActiveClassDirective } from './shared-directives/toggle-active-class.directive';
import { HeaderComponent } from './header/header.component';
import { HomeComponent } from './home/home.component';
import { SharedModule } from './shared-components/shared.module';
import { NewTextPostComponent } from './home/new-text-post/new-text-post.component';
import { MainSiteComponent } from './main-site.component';
import { MainSiteRoutingModule } from './main-site-routing.module';
import { PhotosComponent } from './photos/photos.component';
import { NewPhotoPostComponent } from './photos/new-photo-post/new-photo-post.component';
import { PeopleComponent } from './people/people.component';
import { SearchUserComponent } from './people/search-user/search-user.component';
import { FollowedUsersComponent } from './people/followed-users/followed-users.component';
import { FollowersComponent } from './people/followers/followers.component';
import { BlockedUsersComponent } from './people/blocked-users/blocked-users.component';
import { ChatComponent } from './chat/chat.component';
@NgModule({
declarations: [
ToggleActiveClassDirective,
HeaderComponent,
MainSiteComponent,
HomeComponent,
NewTextPostComponent,
PhotosComponent,
NewPhotoPostComponent,
PeopleComponent,
SearchUserComponent,
FollowedUsersComponent,
FollowersComponent,
BlockedUsersComponent,
ChatComponent
],
imports: [
SharedModule,
MainSiteRoutingModule
]
})
export class MainSiteModule { }
主站路由模块:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainSiteComponent } from './main-site.component';
import { HomeComponent } from './home/home.component';
import { PhotosComponent } from './photos/photos.component';
import { PeopleComponent } from './people/people.component';
import { SearchUserComponent } from './people/search-user/search-user.component';
import { FollowedUsersComponent } from './people/followed-users/followed-users.component';
import { FollowersComponent } from './people/followers/followers.component';
import { BlockedUsersComponent } from './people/blocked-users/blocked-users.component';
import { ChatComponent } from './chat/chat.component';
import { PostCommentsComponent } from './shared-components/post-comments/post-comments.component';
import { MainSiteGuard } from '../guards/mainsite-guard.service';
const routes: Routes = [
{
path: '', component: MainSiteComponent, canLoad: [MainSiteGuard], canActivate: [MainSiteGuard], canActivateChild: [MainSiteGuard], children: [
{ path: '', pathMatch: 'full', redirectTo: '/home' },
{ path: 'home', component: HomeComponent },
{ path: 'photos', component: PhotosComponent },
{
path: 'people', component: PeopleComponent, children: [
{ path: '', redirectTo: '/people/search', pathMatch: 'full' },
{ path: 'search', component: SearchUserComponent },
{ path: 'followed', component: FollowedUsersComponent },
{ path: 'followers', component: FollowersComponent },
{ path: 'blocked', component: BlockedUsersComponent }
]
},
{ path: 'chat', component: ChatComponent },
{
path: 'post', children: [
{ path: 'comments', component: PostCommentsComponent }
]
},
{ path: 'managment', loadChildren: () => import('./managment/managment.module').then(m => m.ManagmentModule) }
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MainSiteRoutingModule { }
管理模块:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared-components/shared.module';
import { ManagmentMenuComponent } from './managment-menu/managment-menu.component';
import { ManagmentRoutingModule } from './managment-routing.module';
import { TermsAndConditionsComponent } from './terms-and-conditions/terms-and-conditions.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import { AboutComponent } from './about/about.component';
import { FeedbackComponent } from './feedback/feedback.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { EditProfileComponent } from './edit-profile/edit-profile.component';
import { UserAboutComponent } from './user-profile/user-about/user-about.component';
import { UserPostsComponent } from './user-profile/user-posts/user-posts.component';
import { UserPhotosComponent } from './user-profile/user-photos/user-photos.component';
@NgModule({
declarations: [
ManagmentMenuComponent,
UserProfileComponent,
UserAboutComponent,
UserPostsComponent,
UserPhotosComponent,
EditProfileComponent,
TermsAndConditionsComponent,
ContactUsComponent,
FeedbackComponent,
AboutComponent
],
imports: [
SharedModule,
ManagmentRoutingModule,
FormsModule,
ReactiveFormsModule
]
})
export class ManagmentModule { }
管理路由模块:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ManagmentMenuComponent } from './managment-menu/managment-menu.component';
import { TermsAndConditionsComponent } from './terms-and-conditions/terms-and-conditions.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import { AboutComponent } from './about/about.component';
import { FeedbackComponent } from './feedback/feedback.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { EditProfileComponent } from './edit-profile/edit-profile.component';
import { UserAboutComponent } from './user-profile/user-about/user-about.component';
import { UserPostsComponent } from './user-profile/user-posts/user-posts.component';
import { UserPhotosComponent } from './user-profile/user-photos/user-photos.component';
const routes: Routes = [
{ path: '', component: ManagmentMenuComponent, pathMatch: 'full' },
{ path: 'profile', component: UserProfileComponent, children: [
{ path: '', pathMatch: 'full', redirectTo: '/managment/profile/about' },
{ path: 'about', component: UserAboutComponent },
{ path: 'posts', component: UserPostsComponent },
{ path: 'photos', component: UserPhotosComponent }
]},
{ path: 'profile/edit', component: EditProfileComponent },
{ path: 'terms&conditions', component: TermsAndConditionsComponent },
{ path: 'contact-us', component: ContactUsComponent },
{ path: 'feedback', component: FeedbackComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ManagmentRoutingModule { }
现在在管理模块内部的路由“配置文件/编辑”中:
找不到错误 *ngIf 的图片
请帮我解决这个问题, Angular Version = 9。
解决方案
为了使CommonModule
导入您的模块可用SharedModule
,您必须将 添加CommonModule
到exports
您的SharedModule
.
@NgModule({
declarations: [
CommentComponent,
PostCommentsComponent,
PostComponent,
PeopleItemRemoveComponent
],
imports: [CommonModule, RouterModule],
exports: [CommonModule, PostComponent, PeopleItemRemoveComponent, CommentComponent, PostCommentsComponent]
})
export class SharedModule { }
推荐阅读
- sorting - SAS:排序错误(按变量排序不正确)
- python - 如何将多个 csv 合并到一个数据框中
- java - 对于 XSSFCell 类型,方法 getCellTypeEnum() 未定义
- r - 打印到 pdf() 时,在 ggplot2 中的轴标签中使用短划线
- python - 如何根据单词对的存在来选择子字符串?Python
- java - Spring Boot,无法让 Hibernate 工作
- javascript - 如果返回 Google Apps 脚本 GoogleSheets
- php - 无论如何把它放在一个函数中,这样就不会使用重复的代码
- nginx - 缓存 REST XML 响应
- jekyll - 在 Jekyll 中,如何根据 JEKYLL_ENV 排除文件?