初始捆绑包中的独立组件

Question

我正在使用 Angular 18，我的一个模块有问题。

我使用“source-map-explorer”插件检查了初始包，我发现一个模块中的 3 个组件（所有组件都是独立组件）被放置在初始包中。它们仅在本模块中使用。

我不明白为什么这 3 个组件被放置在初始包/块中，并且它们在应用程序启动时加载。我希望它们被放入模块新闻捆绑中，并且仅在新闻页面上加载。

您有什么建议我可以检查什么来解决这个问题吗？

应用程序路由定义

provideRouter(
  {..},
  {
    path: 'news',
    loadChildren: () => import('./news/news.module').then((m) => m.NewsModule),
    canMatch: [() => enabledFeatures.newsSection],
    canActivate: [authGuardCanActivate],
  }
)

模块定义

@NgModule({
  imports: [NewsRoutingModule, NgxsModule.forFeature(newsStateObjects)],
})
export class NewsModule {}

模块路由：

@NgModule({
  imports: [RouterModule.forChild(
    { path: '', component: NewsDashboardComponent },
  )],
  exports: [RouterModule],
})
export class NewsRoutingModule {}

组件定义

@Component({
  selector: 'app-news-item',
  templateUrl: './news-item.component.html',
  styleUrls: ['./news-item.component.scss'],
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
NgOptimizedImage,MiddleClickDirectiveDirective,NgClass, NewsItemUserLabelsComponent,DatePipe, 
    TranslateModule,TimeAgoPipe, MatCard,MatCardTitle, MatCardSubtitle,
    MatCardContent, MatTooltip,MatCardActions, MatButton,MatIcon,
  ],
})
export class NewsItemComponent {}

source-map-explorer 输出图像:
请注意，新闻模块有单独的捆绑包，但在下图中不可见

Answer 1

要充分利用独立组件和延迟加载，您应该完全避免模块并简单地提供路由文档。

下面给出了演示这一点的简化示例：

// app.routes.ts

export const APP_ROUTES: Route[] = [
    {
        path: 'news',
        loadChildren: () =>
            import('./features/news/news.routes').then(
                (mod) => mod.NEWS_ROUTES
            ),
    },
  ]

// news.routes.ts

export const NEWS_ROUTES: Route[] = [

            {
                path: 'overview',
                loadComponent: () =>
                    import(
                        '../news/news-overview/news-overview.component'
                    ).then((m) => m.NewsOverviewComponent),
            },
            {
                path: 'article' + '/:articleId',
                loadComponent: () =>
                    import(
                        '../news/news-article/news-article.component'
                    ).then((m) => m.NewsArticleComponent),
            }
    ]

使用这种方法意味着在显式导航到其路由之前不会加载任何组件，从而为您留下最小的初始包。