Question

根据设备类型添加动态模板加载后，执行build命令时出现以下错误。但是使用ng server

运行时它可以正常工作

使用构建命令时遇到的错误（ng build --prod --build-optimizer --base-href=. ）：

ERROR in Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 11:12 in the original .ts file), resolving symbol ɵ0 in /home/private/3/nie-frontend/src/app/smiley-feedback/smiley-feedback.component.ts, resolving symbol SmileyFeedbackComponent in /home/private/3/nie-frontend/src/app/smiley-feedback/smiley-feedback.component.ts, resolving symbol SmileyFeedbackComponent in /home/private/3/nie-frontend/src/app/smiley-feedback/smiley-feedback.component.ts, resolving symbol SmileyFeedbackComponent in /home/private/3/nie-frontend/src/app/smiley-feedback/smiley-feedback.component.ts

以下是我的component代码

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
import { GlobalVariableService } from '../shared/services/global-variable.service';
import { FeedbackService } from '../shared/services/feedback.service';

import { AgtContentService } from '../shared/services/agt-content.service';


@Component({
  selector: 'app-smiley-feedback',
  template:function(){
    if(SmileyFeedbackComponent.detectmob()) {

      return require("./smiley-feedback.component.mobile.html");
    }
    else
    {
      return require("./smiley-feedback.component.html");
    }
  }(),
  styleUrls: ['./smiley-feedback.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class SmileyFeedbackComponent implements OnInit {

  constructor(private globalVariable: GlobalVariableService, private router: Router, private feedback: FeedbackService,
              private agtContentService: AgtContentService) {

    // this.agtContentService.smileys = [];
  }

  ngOnInit() {

  }

  static detectmob() {
    if( navigator.userAgent.match(/Android/i)
      || navigator.userAgent.match(/webOS/i)
      || navigator.userAgent.match(/iPhone/i)
      || navigator.userAgent.match(/iPad/i)
      || navigator.userAgent.match(/iPod/i)
      || navigator.userAgent.match(/BlackBerry/i)
      || navigator.userAgent.match(/Windows Phone/i)
    ){
      return true;
    }
    else {
      return false;
    }
  }

  onClickSmiley(smiley): void {
    if (smiley.rating == "EXTREMELY_DISSATISFIED" || smiley.rating == "DISSATISFIED" ) {
      this.router.navigate(['feedback']);
    }
    else {
      this.router.navigate(['thank-you'])
    }

    this.feedback.rating = smiley.rating;
  }

}

Answer 1

代码

template:function(){
   if(SmileyFeedbackComponent.detectmob()) {

     return require("./smiley-feedback.component.mobile.html");
   }
   else
   {
     return require("./smiley-feedback.component.html");
   }
}()

无法静态解决。在AOT期间，因为编译器尝试静态地确定该值，所以它会为可能修改引用的值的任何代码抛出错误。

如异常中所述，您可以使用导出功能，例如：

// in component decorator use
template: determineView()

// determine view
export function determineView() {

  if (SmileyFeedbackComponent.detectmob()) {
    return require("./smiley-feedback.component.mobile.html");
  }
  else
  {
    return require("./smiley-feedback.component.html");
  }
}

由于您没有提供一个plunkr，我无法验证这是否适用于这种情况。但也请尝试以下方法：不要使用＆＃34;模板＆＃34;并且需要该文件，而不是使用templateUrl并以字符串形式返回文件的相对路径，例如：

// in component decorator use
templateUrl: determineView()

// determine view
export function determineView() {

  if (SmileyFeedbackComponent.detectmob()) {
    return './smiley-feedback.component.mobile.html';
  }
  else
  {
    return './smiley-feedback.component.html';
  }
}

错误中的Angular ERROR：静态解析符号值时出错

1 个答案: