javascript – 无法将本地开发的角度模块导入Angular应用程序

我正在使用 this Yeoman generator作为一个迷你项目的启动器,其中包含一些可重复使用的表单组件,我可以发布.生成器构建一个模块和配置为使用的示例组件,指令,管道和服务( you can see the template files for the generator here).

然后我使用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};不行吗

解决方法

你尝试在你的代码上运行监视(像“npm run watch”)吗？这会给出更好的错误信息.

假设这是你的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";

如果这样做不起作用,请尝试更改您的出口订单.如果仍然没有运气,那么请尝试在某处共享整个文件夹.谢谢,

javascript – 无法将本地开发的角度模块导入Angular应用程序

解决方法

相关文章