私の独自のnpmライブラリをangular2プロジェクトに追加しようとすると、予期しない値 "MyModule"

Question

私は自分のライブラリにモジュールとコンポーネントを1つずつ持っています。

import { SharedModule} from 'ng2-shared'; 

とVisual Studioがcorectlyそれを参照してください、私は追加しようとすると： した後、私は私のモジュールに行を追加しようと、私は

npm link ng-shared 

で私のメインプロジェクトに追加マイライブラリのコンパイル輸入品への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フォルダが含まnode_modules、輸入NPMパッケージが含まれます。 npmパッケージのフォルダからnpm linkコマンドを実行した後にnode_modulesを削除したときに競合が発生しました。

あなたのお返事ありがとう