简体   繁体   English

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

[英]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: 和Visual Studio完全可以看到它,但是当我尝试将SharedModule添加到导入时,我得到了错误:

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: 然后我用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: 或使用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 code: 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 { }

The solution was simple: 解决方案很简单:
My project include node_modules and imported npm package also include node_modules folder. 我的项目包括node_modules,而导入的npm包也包括node_modules文件夹。 There was a conflict, when i delete node_modules after npm link command from my npm package folder everything works great. 有一个冲突,当我从npm软件包文件夹中的npm link命令删除node_modules后,一切正常。

Thank you for your answers 谢谢您的回答

暂无
暂无

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

相关问题 仅当我在localhost中运行时,才能将外部库添加到Angular 6项目中 - Adding external library to my Angular 6 project only works when I'm running in localhost 不使用NPM将库导入Angular2 / WebPack项目 - Import library into Angular2/WebPack project without NPM 将Angular2 Modal添加到我的项目 - Add an Angular2 Modal to my project 在我的angular2应用程序上运行npm install和ng serve时,出现以下错误 - I am getting an below error when i run npm install and ng serve on my angular2 application 当我运行“ npm start”时,在正常的Angular 2项目上会收到“ SyntaxError:意外的令牌导入” - When I run “npm start” I get a “SyntaxError: Unexpected token import” on a normal Angular 2 project 将javascript库导入到我在Angular2项目中使用的自定义javascript文件中 - Import a javascript library into a custom javascript file which I use in my Angular2 project Angular2服务中的意外值。请添加注释 - Angular2 Unexpected value in Service. Please add annotation 将自定义的第三方库添加到Angular2 Project - Add a customised third party library to Angular2 Project 在angular2中,我只想将addthis插件添加到特定的路径,例如我的/博客网址,但是当我添加一个脚本库时它不起作用 - In angular2 I only want to add the addthis plugin to a specific route e.g. my /blog url but when I add a the script library it doesnt work 尝试安装angular2下拉多选库时出现警告 - Warning when trying to install angular2 dropdown multiselect library
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM