然后我使用npm链接,允许我在我的Angular应用程序中安装生成的项目,这似乎工作正常,如下所示从项目的node_modules目录中获取;
然后我将模块导入我的Angular应用程序中的模块中;
import { SampleModule } from 'my-test-library'; @NgModule({ imports: [ CommonModule,FormsModule,ReactiveFormsModule,NgbModule,MomentModule,SampleModule // <-- Imported Here ],declarations: [],providers: [] }) export class TasksModule { }
该模块导入导致错误Uncaught错误:模块“TasksModule”导入的意外值“SampleModule”,我无法弄清楚为什么.
比较我导入的图书馆与另一个第三方图书馆(例如ng-bootstrap)时,我注意到两件事情
>因为我使用npm链接导入库,以便我在开发过程中测试整个文件夹结构是否已被导入(而不仅仅是dist目录),我认为这是由TasksModule导入的非dist代码.我试图导入我的test-library / dist我得到一个模块找不到错误.
>与ng-bootstrap不同,我的库似乎在输出中缺少* .Metadata.json文件.
我的库的tsconfig.json文件如下(从发生器安装不变)
{ "compilerOptions": { "noImplicitAny": true,"module": "commonjs","target": "ES5","emitDecoratorMetadata": true,<-- Checked to ensure this was true "experimentalDecorators": true,"sourceMap": true,"declaration": true,"outDir": "./dist" },"files": [ "typings/index.d.ts","index.ts" ],"exclude": [ "node_modules","dist" ] }
基于这些项目,还是别的什么,我缺少什么才能使这项工作?谢谢!
编辑:sample.* .d.ts文件(默认安装后)
// sample.component.d.ts export declare class SampleComponent { constructor(); } // sample.directive.d.ts import { ElementRef } from '@angular/core'; export declare class SampleDirective { private el; constructor(el: ElementRef); }
编辑2
所以我尝试将dist目录(my-test-library / dist)连接到node_modules的根目录,并从那里导入模块,并且工作正常.
有没有办法,使用npm链接,只导入dist目录(在根目录下)?
>我也不明白为什么要更新我的原始导入从’my-test-library / dist’导入{SampleModule};不行吗
解决方法
假设这是你的index.ts文件或类似的(https://github.com/jvandemo/generator-angular2-library/blob/master/generators/app/templates/index.ts)我猜猜是你的模块没有被正确导出,或者你的导出之间有一些循环依赖.首先,尝试在index.ts中更改以下四行:
export * from './src/sample.component'; export * from './src/sample.directive'; export * from './src/sample.pipe'; export * from './src/sample.service';
至
export {SampleComponent} from "./src/sample.component"; export {SampleDirective} from "./src/sample.directive"; export {SamplePipe} from "./src/sample.pipe"; export {SampleService} from "./src/sample.service";
如果这样做不起作用,请尝试更改您的出口订单.如果仍然没有运气,那么请尝试在某处共享整个文件夹.谢谢,