简体   繁体   中英

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

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM