当我尝试将自己的npm库添加到angular2项目时，出现意外值“ MyModule”

Question

我有自己的库，其中包含一个模块和一个组件。 编译我的库后，我将其添加到我的主项目中

npm link ng-shared

然后我尝试在我的模块中添加行：

import { SharedModule} from 'ng2-shared';

和Visual Studio完全可以看到它，但是当我尝试将SharedModule添加到导入时，我得到了错误：

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

我试图长时间查找此问题的原因，但我一无所知。

模块代码：

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

组件代码：

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

然后我用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
        })
    ]
};

或使用tsconfig与tsc一起使用：

{
  "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代码：

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

Answer 1

解决方案很简单：
我的项目包括node_modules，而导入的npm包也包括node_modules文件夹。 有一个冲突，当我从npm软件包文件夹中的npm link命令删除node_modules后，一切正常。

谢谢您的回答