Angular 用户代理嗅探以分配模板时出错

我试图根据用户代理检测分配模板，但每当我编译脚本时，都会出现以下错误：

ERROR in ./src/app/home/home.component.ts
Module not found: Error: Can't resolve ' (isMobile) ? './home.component.mobile.html' : './home.component.html''

mobile.ts

const regex_mobile = new RegExp(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/, 'i');
export const isMobile = regex_mobile.test(window.navigator.userAgent);

import { Component, OnInit } from '@angular/core';
import { isMobile } from '../../providers/mobile/mobile';

@Component({
  templateUrl: (isMobile) ? './page.component.mobile.html' : './page.component.html'
})
export class HomeComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }
}

home.component.ts

const regex_mobile = new RegExp(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/, 'i');
export const isMobile = regex_mobile.test(window.navigator.userAgent);

import { Component, OnInit } from '@angular/core';
import { isMobile } from '../../providers/mobile/mobile';

@Component({
  templateUrl: (isMobile) ? './page.component.mobile.html' : './page.component.html'
})
export class HomeComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }
}

---

如何修复它？

不用自己编写，只需使用angulars的cdk包中的angulars断点观察程序即可

npm install @angular/cdk

---

---

不要编写自己的，只需使用angulars的cdk包中的angulars断点观察程序

npm install @angular/cdk

---

---

谢谢你。我是否可以交换掉

模板URL

？而不是将所有内容都放在同一页上？类似于此：。如果可能的话，我想把手机和桌面模板分开！不，你永远不会那样做。改为创建父组件，并根据得到的结果显示子组件。这在AngularJS中是可能的，但我想AngularJS是一种完全不同的野兽。父->子组件是什么样子的？父组件持有断点观察者，其模板类似：

。。。或者使用带有模板@methuselahThanks的if-else。我是否可以交换掉

模板URL

？而不是将所有内容都放在同一页上？类似于此：。如果可能的话，我想把手机和桌面模板分开！不，你永远不会那样做。改为创建父组件，并根据得到的结果显示子组件。这在AngularJS中是可能的，但我想AngularJS是一种完全不同的野兽。父->子组件是什么样子的？父组件持有断点观察者，其模板类似：

。。。或者在模板@methuselah中使用if-else