GVKun编程网logo

Angular 2 Error在静态解析符号值时遇到错误（angular静态资源路径）

16

对于想了解Angular2Error在静态解析符号值时遇到错误的读者，本文将提供新的信息，我们将详细介绍angular静态资源路径，并且为您提供关于Angular2“在遇到静态解析符号值时出错.”运行

对于想了解Angular 2 Error在静态解析符号值时遇到错误的读者，本文将提供新的信息，我们将详细介绍angular静态资源路径，并且为您提供关于Angular 2“在遇到静态解析符号值时出错.”运行i18n、Angular 4 – 在静态解析符号值时遇到错误、Angular 4构建错误：静态解析符号值时遇到错误、Angular AoT Custom Decorator在静态解析符号值时遇到错误的有价值信息。

本文目录一览：

Angular 2 Error在静态解析符号值时遇到错误（angular静态资源路径）

Angular 2 Error在静态解析符号值时遇到错误（angular静态资源路径）

我从 this example开始在Angular2中使用简单的TranslationModule.现在,在更新了angular-cli之后,我得到了上面提到的错误,但我不知道我必须在这里更改： 
import {NgModule} from "@angular/core";
import {TranslatePipe} from "./translate.pipe";
import {TRANSLATION_PROVIDERS} from "./translations";
import {TranslateService} from "./translate.service";

@NgModule({
  declarations: [
    TranslatePipe
  ],providers: [
    TRANSLATION_PROVIDERS,TranslateService
  ],exports: [
    TranslatePipe
  ]
})
export class TranslateModule {
}

而翻译.ts

import {Opaquetoken} from '@angular/core';

// import translations
import {LANG_EN_US_NAME,LANG_EN_US_TRANS} from './lang-en_US';
import {LANG_DE_DE_NAME,LANG_DE_DE_TRANS} from './lang-de_DE';

// translation token
export const TRANSLATIONS = new Opaquetoken('translations');

// default language
export const DEFAULT_LANG = "en_US";

// all translations
export const dictionary = {
  [LANG_EN_US_NAME]: LANG_EN_US_TRANS,[LANG_DE_DE_NAME]: LANG_DE_DE_TRANS
};

// providers
export const TRANSLATION_PROVIDERS = [
  {provide: TRANSLATIONS,useValue: dictionary}
];
尝试将键更改为静态值,如： 
export const dictionary = {
  'en': LANG_EN_US_TRANS,'de': LANG_DE_DE_TRANS
};

Angular 2“在遇到静态解析符号值时出错.”运行i18n

Angular 2“在遇到静态解析符号值时出错.”运行i18n

我正在尝试运行i18n提取工具来翻译我的角度2应用程序.
但是当我试图跑步时,我得到： 

Failed on type {"filePath":"C:/ng/anbud/src/app/_common/logging-error handler.ts","name":"LoggingErrorHandler"} with error Error: Error encountered resolving symbol values statically. Could
 not resolve type LoggingErrorHandlerOptions (position 34:53 in the original .ts file),resolving symbol LoggingErrorHandler in C:/ng/anbud/src/app/_common/logging-error-handler.ts
Error: Error encountered resolving symbol values statically. Could not resolve type LoggingErrorHandlerOptions (position 34:53 in the original .ts file),resolving symbol LoggingErrorHandle
r in C:/ng/anbud/src/app/_common/logging-error-handler.ts
    at simplifyInContext (C:\ng\anbud\node_modules\@angular\compiler-cli\src\static_reflector.js:469:23)
    at StaticReflector.simplify (C:\ng\anbud\node_modules\@angular\compiler-cli\src\static_reflector.js:472:22)
    at StaticReflector.parameters (C:\ng\anbud\node_modules\@angular\compiler-cli\src\static_reflector.js:102:47)
    at CompileMetadataResolver.getDependenciesMetadata (C:\ng\anbud\node_modules\@angular\compiler\bundles\compiler.umd.js:14317:56)
    at CompileMetadataResolver.getTypeMetadata (C:\ng\anbud\node_modules\@angular\compiler\bundles\compiler.umd.js:14282:28)
    at CompileMetadataResolver.getProviderMetadata (C:\ng\anbud\node_modules\@angular\compiler\bundles\compiler.umd.js:14473:42)
    at C:\ng\anbud\node_modules\@angular\compiler\bundles\compiler.umd.js:14421:47
    at Array.forEach (native)
    at CompileMetadataResolver.getProvidersMetadata (C:\ng\anbud\node_modules\@angular\compiler\bundles\compiler.umd.js:14405:21)
    at C:\ng\anbud\node_modules\@angular\compiler\bundles\compiler.umd.js:14412:43
Extraction Failed

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\js\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "i18n"
npm ERR! node v6.5.0
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! beskrivelse@0.1.0 i18n: `ng-xi18n`
npm ERR! Exit status 1

错误发生在我的自定义错误处理程序中：

// Import the core angular services.
import { ErrorHandler } from '@angular/core';
// import { forwardRef } from '@angular/core';
import { Inject } from '@angular/core';
import { Injectable } from '@angular/core';

// Import the application components and services.
import { ErrorLogService } from './error-log.service';

export interface LoggingErrorHandlerOptions {
  rethrowError: boolean;
  unwrapError: boolean;
}

export var LOGGING_ERROR_HANDLER_OPTIONS: LoggingErrorHandlerOptions = {
  rethrowError: false,unwrapError: false
};

@Injectable()
export class LoggingErrorHandler implements ErrorHandler {

  private errorLogService: ErrorLogService;
  private options: LoggingErrorHandlerOptions;

  constructor(
    errorLogService: ErrorLogService,@Inject(LOGGING_ERROR_HANDLER_OPTIONS) options: LoggingErrorHandlerOptions <!--- ERROR
  ) {
    this.errorLogService = errorLogService;
    this.options = options;
  }

错误处理程序基于以下文章：
https://www.bennadel.com/blog/3138-creating-a-custom-errorhandler-in-angular-2-rc-6.htm

因此,如果您想要查看完整的代码,您可以在那里看到它.

任何人都知道为什么会抛出这个错误？

解决方法

这里只是一个疯狂的猜测：

更改

export interface LoggingErrorHandlerOptions

至

export class LoggingErrorHandlerOptions

Angular 4 – 在静态解析符号值时遇到错误

Angular 4 – 在静态解析符号值时遇到错误

我的一个功能模块有以下内容： 

declare function require(name: string);

@NgModule({
imports: [
// other modules here
ChartModule.forRoot(
  require('highcharts'),require('highcharts/highcharts-more'),require('highcharts/modules/funnel'),require('highcharts/modules/heatmap')
)

它在本地运行良好,但是当我使用prod标志构建它时它会失败.我得到的错误是：

ERROR in Error encountered resolving symbol values statically. Reference to a non-exported function (position 26
:18 in the original .ts file),resolving symbol ….

ERROR in ./src/main.ts
Module not found: Error: Can’t resolve ‘./$$_gendir/app/app.module.ngfactory’ in …

有关如何解决此问题的任何想法？

解决方法

我不能指出你的确切行,因为你没有包含完整的@NgModule装饰器.当你有这样的事情时,这个错误通常在providers数组中： 

@NgModule({
// imports,exports and declarations
  providers: [{
    provide: XSRFStrategy,useValue: new CookieXSRFStrategy('RESPONSE_TOKEN','RESPONSE_TOKEN') 
  }]
})
export class MyModule {}

当你有这样的内联函数调用时,你不能使用AOT.因此,将useValue替换为useFactory和导出的函数(如错误消息中所述).

这是我第一个上市的AOT安全版本：

export function xsrfFactory() {
  return new CookieXSRFStrategy('XSRF-TOKEN','X-XSRF-TOKEN');
}
@NgModule({
// imports,useFactory: xsrfFactory
  }]
})
export class MyModule {}

Angular 4构建错误：静态解析符号值时遇到错误

Angular 4构建错误：静态解析符号值时遇到错误

我正在以前正在运行的ng2应用程序中升级Angular CLI(v1.0.0),Angular(v4.0.2)和相关软件包,以便引入更新版本的Angular Material.在由于破坏变化而与其他几个错误作斗争后,我在构建中留下了这个：

ERROR in Error encountered resolving symbol values statically. Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler (position 15:22 in the original .ts file),

resolving symbol ROUTES in /path/node_modules/@angular/router/src/router_config_loader.d.ts,

resolving symbol makeRootProviders in /path/node_modules/ui-router-ng2/lib/uiRouterNgModule.d.ts,

resolving symbol UIRouterModule.forRoot in /path/node_modules/ui-router-ng2/lib/uiRouterNgModule.d.ts,

resolving symbol AppModule in /path/src/app/app.module.ts,

resolving symbol AppModule in /path/src/app/app.module.ts

ERROR in ./src/main.ts
Module not found: Error: Can’t resolve ‘./$$_gendir/app/app.module.ngfactory’ in ‘/path/src’
@ ./src/main.ts 5:0-74
@ multi ./src/main.ts

我相信错误涉及我的UIRouter配置(在app.module.ts中),但我真的不确定：

imports: [
    browserModule,FormsModule,HttpModule,MaterialModule.forRoot(),FlexLayoutModule,UIRouterModule.forRoot({
        states: [
            homeState,buttonsstate,colorState,fontsstate,iconsstate,logosstate,messagingState,typographyState
        ],useHash: false
    })
],

我怀疑第一个错误会在第一个错误解决时消失.我试图创建一个返回UIRouterModule配置的函数,但这没有帮助.援助表示感谢

解决方法

我认为问题在于import语句.看起来您尝试将ROUTES导入到.ts文件中,例如：

从’@ angular / router / src / router_config_loader’导入{ROUTES};

任何导入都应该来自@ angular / router而不是’@ angular / router / src / router_config_loader’.可能发生的是您的IDE自动为您导入常量,并且它使用了错误的路径.

我有一个类似的问题,由this SO answer解决.

Angular AoT Custom Decorator在静态解析符号值时遇到错误

Angular AoT Custom Decorator在静态解析符号值时遇到错误

我创建了一个装饰器来帮助我处理桌面/移动事件 

import { HostListener } from '@angular/core';

type MobileAwareEventName =
  | 'clickstart'
  | 'clickmove'
  | 'clickend'
  | 'document:clickstart'
  | 'document:clickmove'
  | 'document:clickend'
  | 'window:clickstart'
  | 'window:clickmove'
  | 'window:clickend';

export const normalizeEventName = (eventName: string) => {
  return typeof document.ontouchstart !== 'undefined'
    ? eventName
        .replace('clickstart','touchstart')
        .replace('clickmove','touchmove')
        .replace('clickend','touchend')
    : eventName
        .replace('clickstart','mousedown')
        .replace('clickmove','mousemove')
        .replace('clickend','mouseup');
};

export const MobileAwareHostListener = (
  eventName: MobileAwareEventName,args?: string[],) => {
  return HostListener(normalizeEventName(eventName),args);
};

问题是当我尝试使用–prod编译时,我收到以下错误

typescript 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 26:40 in the original .ts file),resolving symbol MobileAwareHostListener in
.../event-listener.decorator.ts,resolving symbol HomePage in
.../home.ts

Error: The Angular AoT build Failed. See the issues above

怎么了？我该如何解决这个问题？

解决方法

这意味着错误说明了什么.您正在执行此操作的位置不支持函数调用. Angular内置装饰器 isn’t supported的行为的扩展.

AOT编译(由–prod选项触发)允许静态分析现有代码并用预期的评估结果替换一些部分.这些地方的动态行为意味着AOT不能用于应用程序,这是应用程序的主要缺点.

如果需要自定义行为,则不应使用HostListener.由于它基本上在元素上设置了一个监听器,因此应该使用渲染器提供程序手动完成,这是优于DOM的Angular抽象.

这可以通过自定义装饰器来解决：

interface IMobileAwareDirective {
  injector: Injector;
  ngOnInit?: Function;
  ngOnDestroy?: Function;
}

export function MobileAwareListener(eventName) {
  return (classproto: IMobileAwareDirective,prop,decorator) => {
    if (!classproto['_maPatched']) {
      classproto['_maPatched'] = true;
      classproto['_maEventsMap'] = [...(classproto['_maEventsMap'] || [])];

      const ngOnInitUnpatched = classproto.ngOnInit;
      classproto.ngOnInit = function(this: IMobileAwareDirective) {
        const renderer2 = this.injector.get(Renderer2);
        const elementRef = this.injector.get(ElementRef);
        const eventNameRegex = /^(?:(window|document|body):|)(.+)/;

        for (const { eventName,listener } of classproto['_maEventsMap']) {
          // parse targets
          const [,eventTarget,eventTargetedname] = eventName.match(eventNameRegex);
          const unlisten = renderer2.listen(
            eventTarget || elementRef.nativeElement,eventTargetedname,listener.bind(this)
          );
          // save unlisten callbacks for ngOnDestroy
          // ...
        }

        if (ngOnInitUnpatched)
          return ngOnInitUnpatched.call(this);
      }
      // patch classproto.ngOnDestroy if it exists to remove a listener
      // ...
    }

    // eventName can be tampered here or later in patched ngOnInit
    classproto['_maEventsMap'].push({ eventName,listener:  classproto[prop] });
  }
}

使用如下：

export class FooComponent {
  constructor(public injector: Injector) {}

  @MobileAwareListener('clickstart')
  bar(e) {
    console.log('bar',e);
  }

  @MobileAwareListener('body:clickstart')
  baz(e) {
    console.log('baz',e);
  }  
}

IMobileAwareDirective接口在这里发挥着重要作用.它强制类具有注入器属性,这种方式可以访问其注入器和自己的依赖项(包括ElementRef,它是本地的,显然在根注入器上不可用).此约定是装饰器与类实例依赖项交互的首选方法. class … implements IMobileAwareDirective也可以添加表达性.

MobileAwareListener与HostListener的不同之处在于后者接受参数名称列表(包括魔法$event),而前者只接受事件对象并绑定到类实例.这可以在需要时更改.

这是a demo.

此处还有几个问题需要解决.应该在ngOnDestroy中删除事件侦听器.类继承可能存在潜在问题,需要另外测试.

关于Angular 2 Error在静态解析符号值时遇到错误和angular静态资源路径的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于Angular 2“在遇到静态解析符号值时出错.”运行i18n、Angular 4 – 在静态解析符号值时遇到错误、Angular 4构建错误：静态解析符号值时遇到错误、Angular AoT Custom Decorator在静态解析符号值时遇到错误等相关内容，可以在本站寻找。

本文标签：

上一篇如何检测Angular 4中表单控件数组的变化？（angular表单校验）

下一篇angular – 当另一个Observable(通知程序)发出时,从源Observable发出下一个值

相关文章