当我在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();
}
}
什么可能导致这个问题？
如果需要,我会很乐意提供更具体的信息.
要么
如果要将工厂用于库实例,则必须在库之前将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简单,可维护和有用的选择.
原文地址：https://www.jb51.cc/angularjs/142051.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
