Question

我希望针对Web应用程序实现与移动/桌面版本相同的项目，但为我的Web应用程序选择不同的路由，因此我可以为移动设备定义某些视图，为桌面定义其他视图，如果定义它们，则使用相同的组件。

我使用Angular 6.1.0。

我尝试了这种方法，该方法可以很好地编译，但是不起作用（从Angular 2 routing for master detail responsive page开始）

const appDesktopRoutes: Routes = [
      { path: 'home', component: HomeDesktopComponent},
      { path: '**', component: HomeDesktopComponent }
 ];

 const appMobileRoutes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'planning', component: PlanningComponent },
    { path: '**', component: HomeComponent }
  ];



 @NgModule({
       imports: [
             RouterModule.forRoot(
               appDesktopRoutes, 
               { preloadingStrategy: PreloadAllModules} 
              )
             ],
        declarations: [],
       exports: [
            RouterModule
           ]
  })
  export class AppRoutingModule {
     MOBILE_WIDTH = 500;
     constructor(router: Router, resolutionService: AppResolutionService) {
         // subscribe to resolution service to get current width
         resolutionService.width.subscribe(width => {
               console.warn("resolution : ", width);
              if (width < this.MOBILE_WIDTH) {
                    console.warn("going Mobile");
                    router.resetConfig(appMobileRoutes);
              } else {
                    console.warn("going Desktop");
                    router.resetConfig(appDesktopRoutes);
          }
      });
    }
   }

通过服务将网络应用设置为在chrome上正常运行。因此，宽度检测效果很好，但是如果我从chrome更改宽度，检测就完成了，但是控制台中出现错误：

ERROR Error: Uncaught (in promise): Error: No component factory found for
 HomeComponent. Did you add it to @NgModule.entryComponents?

但是，如果我更改行RouterModule.forRoot( appDesktopRoutes, 到RouterModule.forRoot( appMobileRoutes,，则组件正常工作。在我看来，如果我执行导入操作，组件不会“完全”加载。还是resetConfig有问题？

我使用的指南来自2017年...也许太旧了？ https://medium.com/@golan.yosi/creating-angular-webapp-for-multiple-views-and-screen-sizes-50fe8a83c433

你们有什么想法吗？

我的Angular路由移动/桌面错误是什么？

0 个答案: