Angular 5, Webpack, Can't resolve all parameters for Lightbox: (?, ?, ?, ?, ?, [object Object])

[titov-dmytro]

Hi, guys. Can't figure out what is the problem, I'm using ASP.NET 4.6 with webpack, here is my config:

Package.json

{ "name": "angular-quickstart", "version": "1.0.0", "description": "QuickStart package.json from the documentation, supplemented with testing support", "scripts": { "start": "webpack-dev-server --inline --progress --port 8080", "test": "karma start", "build": "rimraf dist && webpack --display-error-details --config ./webpack.prod.js --progress --profile --bail && ncp scripts ./" }, "keywords": [], "author": "", "license": "MIT", "dependencies": { "@angular/common": "5.0.0", "@angular/compiler": "5.0.0", "@angular/core": "5.0.0", "@angular/forms": "5.0.0", "@angular/compiler-cli": "5.0.0", "@angular/http": "5.0.0", "@angular/platform-browser": "5.0.0", "@angular/platform-browser-dynamic": "5.0.0", "@angular/router": "5.0.0", "angular2-text-mask": ">=8.0.4", "ng-click-outside": "2.3.5", "mydatepicker": "2.5.1", "angular-in-memory-web-api": "~0.3.0", "systemjs": "0.20.18", "ngx-clipboard": "8.1.2", "ng2-ckeditor": "1.1.9", "ncp": "^2.0.0", "angular2-chartjs": "0.4.1", "chartjs": "0.3.24", "ckeditor": "4.7.3", "systemjs-builder": "0.16.10", "core-js": "^2.4.1", "rxjs": "5.0.1", "reflect-metadata": "0.1.10", "zone.js": "^0.8.4", "moment": "2.19.2", "angular-moment": "1.0.1", "moment-timezone": "0.5.14", "angular2-lightbox": "1.1.5" }, "devDependencies": { "concurrently": "^3.2.0", "lite-server": "^2.2.2", "typescript": "2.4.1", "css-loader": "0.28.7", "extract-text-webpack-plugin": "3.0.2", "file-loader": "1.1.5", "url-loader": "0.6.2", "html-loader": "0.5.1", "json-loader": "0.5.7", "canonical-path": "0.0.2", "tslint": "^3.15.1", "lodash": "^4.16.4", "jasmine-core": "~2.4.1", "karma": "^1.3.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-jasmine-html-reporter": "^0.2.2", "karma-phantomjs-launcher": "^1.0.2", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^1.8.0", "protractor": "~4.0.14", "null-loader": "^0.1.1", "phantomjs-prebuilt": "^2.1.7", "raw-loader": "^0.5.1", "style-loader": "^0.13.1", "rimraf": "^2.5.4", "html-webpack-plugin": "2.30.1", "string_decoder": "1.0.3", "ajv-keywords": "2.1.1", "webpack": "3.8.1", "webpack-dev-server": "2.9.4", "webpack-merge": "4.1.1", "@types/core-js": "^0.9.34", "@types/node": "^6.0.46", "@types/jasmine": "2.5.36", "@types/moment-timezone": "0.5.1", "angular2-template-loader": "0.6.2", "awesome-typescript-loader": "3.3.0" }, "repository": {} }

webpack.common.js

` var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin');

var helpers = require('./helpers');

module.exports = {

entry: {
    'vendor': './app/vendor.ts',
    'app': './app/main.ts'
},

resolve: {
    extensions: ['.ts', '.js']
},
module: {
    loaders: [
      {
          test: /\.ts$/,
          loaders: ['awesome-typescript-loader', 'angular2-template-loader']
      },

      {
          test: /\.html$/,
          loader: 'html-loader'
      },
      {
          test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
          loader: 'file?name=assets/[name].[ext]'
      },
      {
          include: /\.json$/, loaders: ["json-loader"]
      },
      {
          test: /\.css$/,
          exclude: helpers.root('src', 'app'),
          loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
      },
      {
          test: /\.css$/,
          include: helpers.root('src', 'app'),
          loader: 'raw'
      }
    ]
    //rules: [
    //    {
    //        test: /\.ts$/,
    //        loader: '@ngtools/webpack'
    //    }
    //]
},

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor']
  }),

  new HtmlWebpackPlugin({
      template: './app/index.html'
  })
]

};`

webpack.prod.js:

`var webpack = require('webpack'); var webpackMerge = require('webpack-merge'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var commonConfig = require('./webpack.common.js'); var helpers = require('./helpers'); const path = require('path');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, { devtool: 'source-map',

output: {
    path: helpers.root('scripts'),
    publicPath: '/',
    filename: '[name].min.js',
    chunkFilename: '[id].chunk.js'
},

plugins: [
  new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)@angular/,
      path.resolve(__dirname, '../src')
    ),
  new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
      mangle: {
          keep_fnames: true
      }
  }),
  new ExtractTextPlugin('[name].min.css'),
  new webpack.DefinePlugin({
      'process.env': {
          'ENV': JSON.stringify(ENV)
      }
  })
]

});`

what can be the issue?

[themyth92]

Hi, sorry I have not tried to use webpack with angular5 with this module. I will try to take a look asap.

[titov-dmytro]

Hi, I have change order of loading and place 'import 'reflect-metadata' before angular modules and it has fixed this issue. So I think it was my problem with metadata.

[themyth92]

Oh right, then is it ok to close this issue ?

[titov-dmytro]

Absolutely