Не удалось импортировать локально разработанный модуль Angular в приложение Angular

Я смотрю на использование этот генератор Yeoman в качестве стартера для мини-проекта, содержащего несколько многоразовых форм компоненты, которые я могу опубликовать. Генератор создает модуль и примерный компонент, директиву, канал и службу, настроенные для использования (вы можете увидеть файлы шаблонов для генератора здесь).

Затем я использовал npm link, чтобы разрешить мне сгенерировать сгенерированный проект в моем приложении 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 Error: Unexpected value 'SampleModule' imported by the module 'TasksModule', и я не могу понять, почему.

Есть две вещи, которые я замечаю при сравнении библиотеки, которую я импортировал с другой сторонней библиотекой (например, ng-bootstrap)

Поскольку я использовал npm link для импорта библиотеки, чтобы я мог протестировать ее во время разработки, была импортирована вся структура папок (а не только каталог dist). Я предполагаю, что это означает, что импортируемый код не импортируется по TasksModule. Если я попытаюсь импортировать my-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 link, импортировать только каталог dist (в корневой каталог)?
Я также не понимаю, почему обновление моего исходного импорта до import { SampleModule } from 'my-test-library/dist'; не работает?

Ответ 1

Вы пытались запустить просмотр своего кода (что-то вроде "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';

to

export {SampleComponent} from "./src/sample.component";
export {SampleDirective} from "./src/sample.directive";
export {SamplePipe} from "./src/sample.pipe";
export {SampleService} from "./src/sample.service";

Если это не работает, попробуйте изменить порядок экспорта. Если вам все равно не повезло, попробуйте, поделившись всей папкой где-нибудь. Спасибо,

Ответ 2

В вашем списке файлов я не вижу sample.module.ts, только component, directive, pipe и service. Если у вас нет файла с декоратором @ngModule, который импортирует/предоставляет их, то вы действительно не импортируете SampleModule.

файл должен выглядеть примерно так:

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