Không thể nhập mô-đun Góc phát triển cục bộ của tôi vào ứng dụng Góc

Question

Tôi đang xem sử dụng this Yeoman generator làm khởi động cho một dự án nhỏ có chứa một số thành phần biểu mẫu có thể sử dụng lại mà tôi có thể xuất bản. Các máy phát điện xây dựng một mô-đun và một thành phần ví dụ, chỉ thị, đường ống và dịch vụ được cấu hình để sử dụng (you can see the template files for the generator here).

Sau đó, tôi sử dụng npm link để cho phép tôi cài đặt dự án đã tạo trong ứng dụng Góc của tôi, hoạt động tốt, như được minh họa bên dưới từ thư mục node_modules của dự án;

Tôi đã sau đó nhập khẩu các mô-đun vào mô-đun của tôi trong ứng dụng kiễu góc của tôi;

import { SampleModule } from 'my-test-library'; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    ReactiveFormsModule, 
    NgbModule, 
    MomentModule, 
    SampleModule // <-- Imported Here 
    ], 
    declarations: [], 
    providers: [] 
}) 
export class TasksModule { } 

Nhập mô-đun này gây ra lỗi Uncaught Error: Unexpected value 'SampleModule' imported by the module 'TasksModule' và tôi không thể hiểu tại sao.

Có hai điều tôi nhận thấy khi so sánh thư viện tôi đã nhập khẩu với một thư viện của bên thứ ba (ví dụ ng-bootstrap)

1. Như tôi đã sử dụng npm link nhập thư viện để cho phép tôi để kiểm tra trong quá trình phát triển toàn bộ Cấu trúc thư mục đã được nhập (thay vì chỉ là thư mục dist. Tôi cho rằng điều này có nghĩa là mã không phải là mã đã được nhập bởi TasksModule. Nếu tôi cố gắng nhập my-test-library/dist tôi nhận được một mô-đun không thể tìm thấy lỗi.
2. Không giống như ng-bootstrap thư viện dường như bị thiếu *.metadata.json tệp ở đầu ra.

tập tin thư viện của tôi tsconfig.json là như sau (không thay đổi từ máy phát điện cài đặt)

{ 
    "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" 
    ] 
} 

Dựa trên các mặt hàng này, hay cái gì khác, những gì tôi thiếu để làm việc này? Cảm ơn!

Edit:.. * Mẫu d.ts file (như mặc định sau khi cài đặt)

// 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); 
} 

Chỉnh sửa 2 Vì vậy, tôi đã cố gắng symlinking các dist thư mục (my-test-library/dist) vào thư mục gốc của node_modules và nhập mô-đun từ đó và nó hoạt động tốt.

1. Có cách nào để sử dụng npm link, chỉ nhập thư mục dist (ở gốc)?
2. Tôi cũng không hiểu tại sao việc cập nhật lần nhập ban đầu của mình thành import { SampleModule } from 'my-test-library/dist'; không hoạt động?

Answer 1

Bạn có cố gắng chạy đồng hồ trên mã của mình không (ví dụ như "npm run watch")? Điều đó sẽ cung cấp một thông báo lỗi tốt hơn.

Giả sử đây là tệp index.ts của bạn hoặc tương tự với điều này (https://github.com/jvandemo/generator-angular2-library/blob/master/generators/app/templates/index.ts) Điều tôi đoán là mô-đun của bạn không được xuất đúng cách hoặc có một số phụ thuộc vòng tròn trong số các lần xuất của bạn. Trước tiên, hãy thử thay đổi bốn dòng sau trong chỉ mục của bạn.ts từ:

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"; 

Nếu đó doesnt làm việc, sau đó hãy thử thay đổi thứ tự của kim ngạch xuất khẩu của bạn. Nếu vẫn không có may mắn, thì hãy thử chia sẻ toàn bộ thư mục ở đâu đó. Cảm ơn,

Answer 2

Trong tập tin danh sách của bạn tôi không thấy một sample.module.ts, chỉ có một component, directive, pipe và service. Nếu bạn không có tệp có trình trang trí @ngModule nhập/cung cấp các tệp này, thì bạn không thực sự nhập SampleModule.

file nên tìm một cái gì đó như thế này:

sample.modeule.ts

import { NgModule } from '@angular/core'; 
import { SampleDirective } from './sample.directive'; 
import { SampleComponent } from '../sample.component'; 
import { SamplePipe } from './sample.pipe'; 
import { SampleService } from './sample.service'; 

@NgModule({ 
    imports: [ ], 
    declarations: [ 
    SampleDirective, 
    SampleComponent, 
    SamplePipe 
    ], 
    providers:[SampleService], 
    exports: [ 
    SampleDirective, 
    SampleComponent, 
    SamplePipe 
    ] 
}) 
export class DayModule { }