[英]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.