Configuration of dynamic routing in angular4+

< H1 > question background < / H1 >

the home page of the project needs to support access on PC side and Pad side. The page design drawings of PC side and Pad side are so different that it is basically impossible to use @ media.

< H1 > current situation < / H1 >

the solution I envisioned is to determine whether the current browser is a pad browser when configuring routing in the module file, as follows:

function isPad() {
    const ua = navigator.userAgent;
    return (ua.indexOf("Android") > 0 || ua.indexOf("iPhone") > 0 || ua.indexOf("iPad") > 0);
}

const routes: Routes = [];

// padPad
if(isPad()) {
    routes.push({
        path: "",
        component: PadIndexComponent
    });
} else {
     // PC
     routes.push({
        path: "",
        component: PcIndexComponent
    });
}

console.log("===>",routes);

@NgModule({
    imports: [
        CommonModule,
        HttpClientModule,
        RouterModule.forChild(routes),
    ],
   .... 
});

< H1 > question < / H1 >

there is no problem in the normal development mode, and there is no problem in the process of AOT, but after running AOT, the result page is white, and the source code of the page is viewed. Neither of the two components configured above is loaded into the page. There are no errors in Console, and the log method in the code is called normally.

so. Has anyone ever encountered such a need or scenario? How is it solved?

export class AppComponent { constructor( private router:Router ){ // let config = router.config // if(this.isPad()){ config[0].children.push({ path:'', component: PadIndexComponent }) }else{ config[0].children.push({ path:'child', component:PcIndexComponent }) } this.router.resetConfig(config) } isPad() { const ua = navigator.userAgent; return (ua.indexOf('Android') > 0 || ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0); } }