繁体   English   中英

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

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

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

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

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

谢谢您的回答

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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