无法将我本地开发的Angular模块导入Angular应用程序

Question

I'm looking at using this Yeoman generator as a starter for a mini project containing a few reusable form components I can publish. The generator builds a module and an example component, directive, pipe and service configured for use ( you can see the template files for the generator here ).

I then used npm link to allow me to install the generated project in my Angular app, which appears to work fine, as demonstrated below taken from the project's node_modules directory;

I have then imported the module into my module within my Angular app;

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

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

This module import causes the error Uncaught Error: Unexpected value 'SampleModule' imported by the module 'TasksModule' and I cannot figure out why.

There are two things I notice when comparing the library I have imported with another third party library (eg ng-bootstrap )

1. As I have used npm link to import the library to allow me to test during development the entire folder structure has been imported (rather than just the dist directory. I assume this means the non-dist code is being imported by the TasksModule . If I attempt to import my-test-library/dist I get a module cannot be found error.
2. Unlike ng-bootstrap my library appears to be missing *.metadata.json files in the output.

My library's tsconfig.json file is as follows (unchanged from generator install)

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

Based on these items, or something else, what am I missing to get this working? Thanks!

Edit: sample.*.d.ts files (as default after installation)

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

Edit 2 So I tried symlinking the dist directory ( my-test-library/dist ) to the root of node_modules and importing the module from there and it worked fine.

1. Is there a way to, using npm link , only import the dist directory (at the root)?
2. I also don't understand why updating my original import to import { SampleModule } from 'my-test-library/dist'; does not work?

Answer 1

Did you try to run watch on your code (something like "npm run watch")? That would give a better error message.

Assuming this is your index.ts file or similar to this ( https://github.com/jvandemo/generator-angular2-library/blob/master/generators/app/templates/index.ts ) What I am guessing is that either your module is not being exported properly or there are some circular dependencies among your exports. First, try changing the following four lines in your index.ts from:

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

If that doesnt work, then try changing the order of your exports. If still no luck, then please trying sharing the whole folder somewhere. Thanks,

Answer 2

In your file listing I do not see a sample.module.ts , only a component , directive , pipe and service . If you do not have a file with the @ngModule decorator which imports/provides these, then you are not truly importing a SampleModule .

the file should look something like this:

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