Unexpected value 'Angular2ImageGalleryModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

[alessandroderoma]

I installed it like this:

npm i -g --save --save-dev angular2-image-gallery

My app.module.ts:

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { Angular2ImageGalleryModule } from 'angular2-image-gallery'

import { AppComponent } from './app.component'


@NgModule({
	declarations: [
		AppComponent
	],
	imports: [
		BrowserModule,
		Angular2ImageGalleryModule
	],
	providers: [],
	bootstrap: [
		AppComponent
	]
})
export class AppModule { }

Generated a gallery with this command:

node node_modules/angular2-image-gallery/convert.js --gName=my_gallery_name "path/to/my/images"

It executed without errors.

I updated my polyfills.ts:

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

import 'web-animations-js/web-animations.min';
import 'hammerjs/hammer';
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
import 'core-js/es6/set';

Then, in my app.component.ts:

<gallery 
	[flexBorderSize]="3" 
	[flexImageSize]="7"
	galleryName="my_gallery_name">
</gallery>

Result:

compiler.js:486 Uncaught Error: Unexpected value 'Angular2ImageGalleryModule' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.js:486)
    at eval (compiler.js:15240)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15215)
    at JitCompiler._loadModules (compiler.js:34413)
    at JitCompiler._compileModuleAndComponents (compiler.js:34374)
    at JitCompiler.compileModuleAsync (compiler.js:34268)
    at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
    at PlatformRef.bootstrapModule (core.js:5578)
    at eval (main.ts:11)

Useful info:

ng -v
Angular CLI: 1.7.4
Node: 8.11.1
OS: win32 x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0


npm -v
5.8.0

[MrSkip]

Unfortunately, I have the same issue. @harlandraka did you find the way how to fix it?

[BenjaminBrandmeier]

Please try again with the latest version supporting Angular 6.

[masterbg94]

Anyone fixed ?