我有一个Angular 6.1应用程序,它导入一些外部模块.

当我在AOT模式下编译应用程序时:

$ng build –aot

我收到这个错误:

ERROR in ./src/app.component.ngfactory.js
Module not found: Error: Can't resolve '/home/user/project/node_modules/@acme/library/src/library/library' in '/home/user/project/src/app'
resolve '/home/user/project/node_modules/@acme/library/src/library/library' in '/home/user/project/src/app'
  using description file: /home/user/project/package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/user/project/node_modules/@acme/library/package.json (relative path: ./src/library/library)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/project/node_modules/@acme/library/src/library/library doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/project/node_modules/@acme/library/src/library/library.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/project/node_modules/@acme/library/src/library/library.tsx doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/project/node_modules/@acme/library/src/library/library.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/project/node_modules/@acme/library/src/library/library.js doesn't exist
      as directory
        /home/user/project/node_modules/@acme/library/src/library/library doesn't exist
[/home/user/project/node_modules/@acme/library/src/library/library]
[/home/user/project/node_modules/@acme/library/src/library/library.ts]
[/home/user/project/node_modules/@acme/library/src/library/library.tsx]
[/home/user/project/node_modules/@acme/library/src/library/library.mjs]
[/home/user/project/node_modules/@acme/library/src/library/library.js]
 @ ./src/app.component.ngfactory.js 12:0-92 30:102-122 30:186-206 33:204-224 33:289-309 36:204-224 36:289-309 45:102-122 45:187-207 51:102-122 51:187-207 120:102-122 120:187-207
 @ ./src/app/app.module.ngfactory.js
 @ ./src/main.ts
 @ multi ./src/main.ts

路径node_modules / @ acme / library / src / library / library指向library.d.ts文件,该文件存在于模块目录中.

如果我从外部包中完全删除键入信息,则应用程序将编译并正常工作.此外,如果我手动将所有打字合并到一个index.d.ts文件中,编译就完成了.

我认为编译器解析类型定义文件的方式有些不对,看起来因为某些原因它没有查找扩展名为.d.ts的文件.

更新1

外部模块@ acme / library也是由我开发和预编译的.它是一个简单的TypeScript库,包含一些导出的类和函数.它没有使用像Angular那样的装饰和东西.

它的package.json包含以下字段:

"es2015": "index.es2015.js","main": "index.min.js","module": "index.es5.js","typings": "index.d.ts",

所有提到的文件都存在于包的根目录中.

更新2

经过进一步调查,看起来问题是由依赖注入引起的.请参阅下面的示例.

我正在使用自定义工厂提供程序,以便将一个Library实例注入组件的构造函数.

libraryFactory函数是从外部模块导入的,它看起来像这样:

export function libraryFactory(): Library {
  const dep1 = new Dep1();
  const dep2 = new Dep2();
  return new Library(dep1,dep2);
}

失败的例子

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

import {Library,libraryFactory} from '@acme/library';


@Component({
  selector: 'app-foo',templateUrl: './foo.component.html',providers: [
    {
      provide: Library,useFactory: libraryFactory
    }
  ]
})
export class FooComponent {

  constructor(public library: Library) {
  }

}

工作实例

但是,如果我摆脱DI它编译并正常工作:

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

import {Library,templateUrl: './foo.component.html'
})
export class FooComponent {

  public library: Library;


  constructor() {
    this.library = libraryFactory();
  }

}

什么可能导致这个问题?

如果需要,我会很乐意提供更具体的信息.

Angular不知道要向Library类注入什么,因为在使用useFactory之前不会注入Dep1和Dep2.所以你可以在失败的例子中简单地将useFactory更改为useValue,然后它一定没问题.

要么

如果要将工厂用于库实例,则必须在库之前将Dep1和Dep2注入提供程序.如果Dep1和Dep2本身没有依赖关系,它必须工作.如果他们也有依赖关系,你也必须注入它们.

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

import {Library,Dep1,Dep2} from '@acme/library';

const dep1instance = new Dep1();
const dep2instance = new Dep2();

@Component({
  selector: 'app-foo',providers: [
    {
      provide: Dep1,useValue: dep1instance
    },{
      provide: Dep2,useValue: dep2instance
    },{
      provide: Library,useFactory: (dep1: Dep1,dep2: Dep2) => new Library(dep1,dep2),deps:[Dep1,Dep2]
    }
  ]
})
export class FooComponent {

  constructor(public library: Library) {
  }

}

要么

您可以使用Injectible装饰器分割您的库,以实现角度DI兼容性. IMO简单,可维护和有用的选择.

当在Angular中的DI中使用从库导入的工厂函数时,AOT编译失败的更多相关文章

  1. ios – Xamarin Ahead-of-Time(AOT)编译器与普通编译器

    我的理解是Xamarin的Ahead-of-Time编译器直接将Xamarin.iOS应用程序编译为本机ARM汇编代码.然而,我没有得到的是为什么它需要被称为“Ahead-of-Time”而不仅仅是一个普通的编译器.Xamarin的AOT编译器和传统编译器之间有什么区别,还是仅仅是一个营销术语?没有.Xamarin在该段中传达的信息是,他们的代码比简单的基于字节码的语言执行得更快.对于iOS和Android,他们都能够在热代码路径上执行本机代码以提高性能.AOT和JIT这两个术语是关于他们如何做到这一点的

  2. .dylib在Debug中链接,在XCode中找不到适用于iPhone的版本

    所以我已经将libxml2.2.dylib库包含在我的iPhoneXCode项目中,以创建一些Xml和XPath解析实用程序.当我编译并运行在模拟器和设备的调试模式时,我没有问题,但是,当我切换到发布模式我得到…

  3. 在编译的iOS应用程序(IPA)中加密内容

    由于IPA结构只是一个压缩文件,包含编译代码媒体内容,如图像&音频,我如何保护内容免受别人的窃取?是否有加密可以添加到IPA?

  4. IOS:AOT提前,它是什么?

    我读过Xamarin的一篇文章,并且遇到了一个特定的计算机科学词:提前.根据一些谷歌搜索结果,这个AOT不允许在运行时生成代码.这是不是意味着,它不支持动态的东西?我知道这个问题可能很愚蠢,我对IOS有0个知识,希望能从这里得到一些答案.谢谢解决方法首先,动态的定义是什么?

  5. ios – Swift 4向后兼容性

    一起使用.有没有办法在两个版本的Xcode中使这个工作?Swift4是否应该向后兼容?

  6. Swift与OC混合编译

    SWift调用OC新建swift文件此时系统自动生成-Bridging-Header.h文件并且TARGETS->BuildSettings->Objective-CBridgingHeader(搜索bridg)选项中会自动填入以上头文件的路径在-Bridging-Header.h中#import要调用的OC对象头文件OC调用Swift在OC文件中#import“

  7. Swift教程01-使用switfc终端命令编译运行swift程序

    应公司的要求,要我研究swift语言,然后给大家进行swift技术培训,买了4,5本swift相关的书籍就开始研究了.今天来介绍一下,swift相关的终端的命令.1.首先我们在桌面上建一个swift文件夹用来存放.swift源文件,打开终端输入cd加空格拖拽文件夹到终端(使用命令ls,cd目录也是等效)3.使用vi命令创建一个HelloWorld.swift源文件进入swift文件夹后,然后使用如

  8. 驳狗屎文 "我为什么放弃Go语言"

    开门见山地说,我当初放弃Go语言,就是因为两个“不爽”:第一,对Go语言本身不爽;第二,对Go语言社区里的某些人不爽。两年之后,2011年底,Go语言发布1.0的计划被提上日程,相关的报道又多起来,我再次关注它,重新评估之后决定深入参与Go语言。外加Go语言社区里的某些人,其中也包括Google公司负责开发Go语言的某些人,其态度、言行,让我极度厌恶,促使我决绝地离弃Go语言。第1节:我为什么对Go语言不爽?

  9. Swift语法特点

    从它的语法中能看到Ojective-CJavaScriptC#Python等语言的影子swift借鉴了以上几门语言的特点我们可以从swift身上看到这几种语言的影子同时还具备了编译型语言额高能性和脚本语言的灵活交互性OC-C#都是编译型的语言也就是我们写完代码要保证每一行代码编译通过才能跑起来这叫编译型语言一般编译型的语言性能比较高能做的事情比较强大比如说OC能开发手机程序C#能开发服务器程序脚本

  10. Swift思量与初探:我需要学习Swift吗?

    最近,除了N多的基于Swift的服务端开发框架,笔者不由深思,到底该这么评价Swift呢?前两点在Swift的语法和语言特性中已经表现得淋漓尽致:像是尾随闭包,枚举关联值,可选值和强制的类型安全等都是Swift显而易见的优点。综上所述,Swift拥有着被广泛使用以及当做第一学习语言的潜质。Swift在语法层次上会更加高级,并且Swift并没有使用GC机制,因此可以与C更好地相兼容。Swift中的注释与C语言的注释非常相似。

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数?也不由AppModalComponent获取:它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html:app.component.ts:

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现:1)在控制器中定义选项卡href:2)声明一个函数来改变控制器中的散列:3)使用以下标记:我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用?>但是标签外的按钮(登陆)工作正常,为什么?>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2:将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线:app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗?

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的:零件:服务:我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid:过滤后如何获取总项数

    提前致谢:)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数:要么您可以使用以下命令获取所选行的数量:

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包?

返回
顶部