Unexpected value "MyModule" when i'm trying to add my own npm library to angular2 project

Question

I've got my own library which include one module and one component. After compile my library i add it to my main project by

npm link ng-shared

Then i try to add line in my module:

import { SharedModule} from 'ng2-shared';

and visual studio see it corectly, but when i try to add SharedModule to imports then i got the error:

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

I'm trying to find the cause of this problem for long time now and i can't figure out anything.

Module code:

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";

import { FirstComponent } from "./first.component";

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    exports: [
        FirstComponent
    ],
    declarations: [
        FirstComponent
    ]
})

export class SharedModule { }

Component code:

import { Component, Input, Output, OnChanges, ElementRef, EventEmitter } from "@angular/core"

@Component({
    selector: "com-copybox",
    template: `<h1>Hello</h1>`,
    host: {
        "(document:keydown)": "handleKeyboardEvents($event)",
        "(document:click)": "handleClick($event)"
    }
})

export class FirstComponent implements OnChanges {

    handleKeyboardEvents(event: KeyboardEvent): void {
        if (event.code === "Enter")
            console.log("HELLO");
    }

    handleClick(event: any): void {
      console.log("CLICK");
    }
}

Then i compile this with webpack:

const helpers = require('./config/helpers'),
    webpack = require('webpack'),
    CleanWebpackPlugin = require('clean-webpack-plugin');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');

module.exports = {
    devtool: 'inline-source-map',

    resolve: {
        extensions: ['.ts', '.js']
    },

    entry: helpers.root('index.ts'),

    output: {
        path: helpers.root('bundles'),
        publicPath: '/',
        filename: 'core.umd.js',
        library: 'ng-shared',
        libraryTarget: 'umd'
    },
    externals: [/^\@angular\//, /^rxjs\//],

    module: {
        rules: [{
            enforce: 'pre',
            test: /\.ts$/,
            loader: 'tslint-loader',
            exclude: [helpers.root('node_modules')]
        }, {
            test: /\.ts$/,
            loader: 'awesome-typescript-loader',
            options: {
                declaration: false
            },
            exclude: [/\.spec\.ts$/]
        }]
    },

    plugins: [
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            helpers.root('./src')
        ),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            'window.jQuery': 'jquery',
            'window.$': 'jquery',
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                tslintLoader: {
                    emitErrors: false,
                    failOnHint: false
                }
            }
        }),

        new CleanWebpackPlugin(['bundles'], {
            root: helpers.root(),
            verbose: false,
            dry: false
        })
    ]
};

or simple with tsc with tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "es6", "dom"],
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules",
  ],
  "angularCompilerOptions": {
    "strictMetadataEmit": true,
    "skipTemplateCodegen": true
  }
}

AppModule code:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpModule, JsonpModule } from "@angular/http";
import { RouterModule, Routes } from "@angular/router";
import { APP_INITIALIZER } from "@angular/core";
import { LoginService } from "../services/login.service";
import { PanelGuard } from "../guards/panel.guard";
import { AppComponent } from "../components/app.component";
import { SharedModule } from 'ng-shared';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        SharedModule
    ],
    declarations: [
        AppComponent,
    ],
    bootstrap: [
        AppComponent,
    ],
    providers: [
        LoginService,
        PanelGuard
    ]
})

export class AppModule { }

You can't add `@NgModule` to `declarations` array, only `imports` or `exports` — yurzui, Apr 03 '17 at 11:34
put `console.log(SharedModule);` front of @NgModule. What is the output? — yurzui, Apr 03 '17 at 11:40

score 0 · Accepted Answer · answered Apr 03 '17 at 12:51

The solution was simple:
My project include node_modules and imported npm package also include node_modules folder. There was a conflict, when i delete node_modules after npm link command from my npm package folder everything works great.

Thank you for your answers

Unexpected value "MyModule" when i'm trying to add my own npm library to angular2 project

1 Answers1