Bootstrap-decorator is broken with webpack

[xbill82]

Hi,
when trying to require('angular-schema-form/dist/bootstrap-decorator'), we get the following error

 ERROR in ./~/angular-schema-form/dist/bootstrap-decorator.js
  Module not found: Error: Cannot resolve module 'schemaForm' in /var/app/node_modules/angular-schema-form/dist

[Anthropic]

@xbill82 the decorator has recently been split out into its own repo, which versions are you using?

[Anthropic]

Most likely the files are not loaded in the correct order, if you can't sort it out please create a plunker to demonstrate what you are doing and we can try to help.

Please re-open if you do not feel the question has been answered sufficiently.

[gkubes]

Hello,

I'm experiencing the same issue.

infra = angular.module 'myapp', [
  require 'angular/angular'
  require 'angular-sanitize/angular-sanitize'
  require 'tv4/tv4'
  require 'objectpath/lib/ObjectPath'
  require 'angular-schema-form/dist/schema-form'
  require 'angular-schema-form/dist/bootstrap-decorator'
]

Error: Cannot find module 'schemaForm' from '<my_path>/bower_components/angular-schema-form/dist'

I am using version 0.8.13 so I think bootstrap-decorator is still in the same repo (even though there is a WHERE _IS_BOOTSTRAP_DECORATOR.md in there).

[Anthropic]

@GarrisonKubis use the version of the bootstrap decorator from the bootstrap repo for 0.8.13

[aelamrani]

+1

[legend80s]

+1 The solution: Use the npm package angular-schema-form-bootstrap.

[stevenmccord]

@Anthropic

Did anyone ever get the bundled version of bootstrap working with webpack? I am trying to utilize the imports-loader but I am still getting Can't resolve schemaForm. Any help would be appreciated.

I have been able to go to the separate repo working, but I want to get it working with the bundled to troubleshoot if there are any differences between them. Thanks!

[aelamrani]

@stevenmccord we had to copy files locally to get it work... a bit ugly but when we faced the issue, it was the only solution we found

You can find here how: https://github.com/gravitee-io/gravitee-management-webui/blob/master/src/management/management.module.ts#L77

[stevenmccord]

@aelamrani thanks for responding, I actually just figured this out and thought I might share, and might be a bit better than copying the files. It was pretty easy once I figured it out. Ultimately, webpack couldn't figure out how to resolve schemForm when the bootstrap defined it. So you just need to make a resolve.alias and point to the schema-form.js file that you need.

Here are the relevant parts of my webpack config.

Import Proper Deps to Schema Form

{
  test: require.resolve('angular-schema-form/dist/schema-form.js'),
  use: 'imports-loader?tv4,ngSanitize=angular-sanitize,objectPath=objectpath'
}

Alias schemaForm

resolve: {
  alias:{
    schemaForm: 'angular-schema-form/dist/schema-form.js'
}

[Anthropic]

@stevenmccord spot on :)

I was new to webpack when I started working on this so I had assumed it was just the way everyone worked with Webpack, obviously not quite the case, I would certainly appreciate a PR with a doc update with your findings otherwise I will try to do so after I finish the core work.

[stevenmccord]

@Anthropic done #932