Angular-cli: Angular 2 Unexpected value 'MyDirective' declared by the module 'AppModule'

Created on 19 Oct 2016 · 7Comments · Source: angular/angular-cli

I am trying to create npm library with one directive and test it locally with the help of npm link.

But the problem is when I am including my directive in the declarations array I am getting this error:

Unexpected value 'MyDirective' declared by the module 'AppModule'

My library structure:

package.json

{
   "name": "my-directive",
   "main": "./dist/index.js",
   "typings":  "dist/index.d.ts"
 }

My src folder:

index.ts

export * from "./myDirective";

myDirective.ts

import {Directive} from '@angular/core';

@Directive({
  selector: "my-directive"
})
export class MyDirective {
  constructor() {
    console.log('directive works!');
  }
}

Now in my Angular 2 app that I'm linking this npm package:

import { MyDirective } from "my-directive";

// This line indeed log the constructor function...
console.log(MyDirective);
 // function MyDirective() {
    // console.log('directive works!');
 // }

@NgModule({
  declarations: [
    AppComponent,
    MyDirective
  ]
})

It's throwing the error:
Unexpected value 'MyDirective' declared by the module 'AppModule'

Source

ArielGueta

All 7 comments

https://github.com/angular/angular-cli/issues/2775 Not sure if he means this was already fixed and just waiting on a new build.

ShiftySituation on 19 Oct 2016

The import in npm package should be import { MyDirective } from "./my-directive";

Not import { MyDirective } from "my-directive";

bstumbo on 19 Oct 2016

👎1 👍1

It should be:
import { MyDirective } from "my-directive";

Because it is an npm module - I linked the package

ArielGueta on 19 Oct 2016

👎1 👍1

Try declaring and exporting the directive in its own module in the npm package and then importing (not declare) it in AppModule to see if it works.

cacogr on 20 Oct 2016

This is what I did. I mentioned that the import worked. If you read the code you will see that the console log indeed log the constructor function of the directive.

ArielGueta on 20 Oct 2016

Think I've seen this before, and I don't think we can do anything about it. See https://github.com/angular/angular-cli/issues/1514#issuecomment-240910842