[RFR] Better integration with module bundlers

[jpetitcolas]

• Update README and UPGRADE files
• Upgrade Getting started snippets
• Update package.json to point on correct files

[jpetitcolas]

Seems I missed an ALT + TAB. To delete.

[jpetitcolas]

With the help of @RobinBressan, switching to RFR.

@djhi, meanwhile, can you try using this branch on your project? I heard you got some troubles building an admin app in production with master version of ng-admin. It should fix your issue.

[Phocea]

Hello,

I am actually in the process of using the ng-admin-only way because I needed to add ngCookies to my app.
As you stated, the production page is out of date and it was a painful process to get it right again. I have now something working but I am not 100% that ll the dependencies I added are needed!

Anyway, does this branch means that it will be solved by simply adding a require(ng-admin) in the js loaded by our webpack build, as well as to ngCookies. And will simply be able to declare the module when initializing the module ?

var myApp = angular.module('myApp', [ 'ng-admin','ngCookies' ]);

If so, I will put my refactor on the backboiler for now, and wont submit my changes for the production documentation :)

Thanks

[jpetitcolas]

@Phocea: unfortunately for your changes, this is indeed the aim of this PR. :)

[djhi]

s/ng-admin/sass/ng-admin.scss/ng-admin/src/sass/ng-admin.scss

[jpetitcolas]

To sum up a private discussion with @djhi:

• Move admin-config as a prod dependency
• Update Webpack configuration sample to exclude node_modules

[Phocea]

@jpetitcolas great :) Well this is great news really because the old way was really painful and as you stated, the production.md page was impossible to maintain.
Can't wait to have this available on main. Thanks for the rework

[Phocea]

Hello @jpetitcolas , any update on when this is going to be merged on the main branch? No rush, but it would sort out the mess I had to implement :)
Thanks

[jpetitcolas]

@Phocea you're right, this PR definitively needs some love. I take back a look on it. :)

[Phocea]

Merci Monsieur !

[fzaninotto]

s/pernicious/obscure/

[fzaninotto]

s/embed ng-admin the old way/include ng-admin with a <script> tag/

[fzaninotto]

I think you should revert the changes on this one, to let newcomers begin with the simplest version (<script> tag)

[fzaninotto]

s/this only version/this '-only' version/ s/painful we/painful that we/

[jpetitcolas]

Code review applied.

[fzaninotto]

\o/

[jpetitcolas]

[Phocea]

+1 .... here we go, more work for me to come ;)
As this method been applied to the demo by any chance ?

[jpetitcolas]

@Phocea: good point: we forget that. Need to work on it.

However, if you speak of Poster Galore, here is the related PR: marmelab/ng-admin-demo#26

[Phocea]

@jpetitcolas Yeap meant the poster galore demo . Sorry more work for you too then :)

[Phocea]

Hello @jpetitcolas,

I have started to use your refactor in our own webpack build and went through a bit of trouble :)
I pinpointed it to a path problem, but kept going in circle about it and could not see a solution without making changes to ng-admin structure itself.
Let me try to explain:

1.

var myApp = angular.module('myApp', [
 require('ng-admin'),
]);

The only way for webpack to find the ng-admin module is to either give a path relative to the javascript this is required from, or add an alias in webpack.config like so (for example):

  resolve : {
    root : [ path.join(__dirname, 'node_modules') ],
    alias : { 'ng-admin' : 'ng-admin/src/javascripts/ng-admin.js',}
  },

Might be something to add to the documentation ?

2.
With above fixed, I am now getting some errors when webpack is resolving the require statements present in ng-admin vendor.js. All which refer to a package directly inside the node_modules is ok, all the other are failing to find the related file.
Would it not be better to use aliases in the ng-admin webpack config to avoid that path configuration trouble.
Also the vendor.js looks like it could be simplified:

• No need for path for angular.
• textAngular-sanitize mentionned twice

In the end I have managed to have a it wokring with the following resolve section in my webpack config:

  resolve : {
    root : [ path.join(__dirname, 'node_modules') ],
    alias : { 'ng-admin' : 'ng-admin/src/javascripts/ng-admin.js',
              'rangy-core' : 'rangy/lib/rangy-core',
              'rangy-selectionsaverestore' : 'rangy/lib/rangy-selectionsaverestore',
              'textAngular-sanitize' : 'textangular/dist/textAngular-sanitize',
              'angular-numeraljs' : 'angular-numeraljs/dist/angular-numeraljs',
              'ui-bootstrap-tpls' : 'angular-ui-bootstrap/dist/ui-bootstrap-tpls',
              'ng-file-upload' : 'ng-file-upload/dist/ng-file-upload',
            }
  },

and ng-admin vendor.js modified to look like:

global.rangy = require('rangy-core');
global.rangy = require('rangy-selectionsaverestore');
global.numeral = require('numeral');

require('angular');
require('angular-ui-router');
require('angular-ui-codemirror');
require('textAngular-sanitize'),
require('textangular');
require('nginflection');
require('ui-select');
require('angular-translate');

require('angular-numeraljs');
require('ui-bootstrap-tpls');
require('ng-file-upload');

global._ = require('underscore');

Does this sound acceptable ?

[jpetitcolas]

@Phocea: there was some mistakes in this build (we didn't see them because of the use of npm link). Can you try with the updated branch on #1189?

I'm on Gitter if you need some support. But I'm working on a brand new project using the branch related to my PR, and it seems to work.

[Phocea]

lol .. was just about to say that I have a bit of css problem now !
Will try to grab your branch.. ! am building on windows using Maven (!!) so may encounteer some unexpected stuff.
I really have to stop making the same fixes you do ;)