Require.js problem on fresh installation

[binarious]

Problem

 Uncaught Error: Mismatched anonymous define() module: function (module) {  in require.js:166

Steps to reproduce

• New angular app: yo angular
  • 3x yes (Sass, Bootstrap, Bootstrap Sass)
  • include all modules
• Install ng-admin: bower install ng-admin --save
  • Select 1.3.* at the version conflict
• Run the server: grunt serve
• Check the console

Any ideas what I did wrong?

[fzaninotto]

This completely fails on my laptop with errors unrelated to ng-admin. I have no idea what's wrong with this installer...

oh, wait: I have the same error. Is it because of ng-admin?

[fzaninotto]

So, I managed to reproduce the error. It seems that the generator you use includes all dependencies required by bower as third-party scripts:

<!-- Present by default -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-messages/angular-messages.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- Added by simply adding ng-admin using npm -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="bower_components/angular-ui-codemirror/ui-codemirror.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/codemirror/lib/codemirror.js"></script>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/humane/humane.min.js"></script>
    <script src="bower_components/inflection/inflection.min.js"></script>
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <script src="bower_components/lodash/dist/lodash.compat.js"></script>
    <script src="bower_components/ng-file-upload/angular-file-upload.js"></script>
    <script src="bower_components/ngInflection/ngInflection.js"></script>
    <script src="bower_components/nprogress/nprogress.js"></script>
    <script src="bower_components/requirejs-text/text.js"></script>
    <script src="bower_components/requirejs/require.js"></script>
    <script src="bower_components/restangular/dist/restangular.js"></script>
    <script src="bower_components/textAngular/dist/textAngular.min.js"></script>
    <script src="bower_components/ng-admin/build/ng-admin.min.js"></script>

Except ng-admin.min.js already includes all the new ones!

And, by trying by hand, I manage to trigger the same error just by adding these two lines to the default generated yo angular:

    <script src="bower_components/requirejs/require.js"></script>
    <script src="bower_components/requirejs-text/text.js"></script>

Which is obviously not related to angular or ng-admin.

My conclusion: I don't know how this generator is supposed to work, but for me it doesn't. I suggest you open an issue in their repository.

[fzaninotto]

@manuquentin Now that I think about it, ng-admin defines many packages as dependencies, while they are really needed for devs - for the build step. Moving all but the angular dependency to devDependencies solves the bug outlined here. What do you think?

{
  "name": "ng-admin",
  "version": "0.5.0",
  "main": [
    "build/ng-admin.min.css",
    "build/ng-admin.min.js"
  ],
  "dependencies": {
    "angular": "~1.3.1"
  },
  "devDependencies": {
    "angular-bootstrap": "~0.12.0",
    "angular-resource": "~1.3.1",
    "angular-cookies": "~1.3.1",
    "angular-sanitize": "~1.3.1",
    "json3": "~3.2.6",
    "es5-shim": "~3.4.0",
    "jquery": "~1.11.0",
    "requirejs": "~2.1.14",
    "requirejs-text": "~2.0.12",
    "bootstrap-sass-official": "~3.3.0",
    "restangular": "~1.4.0",
    "angular-ui-router": "~0.2.13",
    "bootstrap": "~3.3.1",
    "fontawesome": "~4.1.0",
    "humane": "~3.2.0",
    "nprogress": "~0.1.6",
    "textAngular": "~1.2.2",
    "ngInflection": "~1.0.0",
    "angular-ui-codemirror": "~0.2.2",
    "jsonlint": "~1.6.0",
    "ng-file-upload": "~2.2.2",
    "angular-mocks": "~1.3.1",
    "angular-scenario": "1.2.15",
    "almond": "~0.3.0"
  },
  "resolutions": {
    "angular": "~1.3.1"
  }
}

[binarious]

Well I think it is problematic to have the dependencies minified in the
distributed file. I haven't seen this in other bower-compatible packages
AFAIR. They should be defined as normal dependencies, but the dist file
should just be the ng-admin stuff, shouldn't it?

Francois Zaninotto notifications@github.com schrieb am Mo., 23. Feb. 2015
23:52:

@manuquentin https://github.com/manuquentin Now that I think about it,
ng-admin defines many packages as dependencies, while they are really
needed for devs - for the build step. Moving all but the angular dependency
to devDependencies solves the bug outlined here. What do you think?

{
"name": "ng-admin",
"version": "0.5.0",
"main": [
"build/ng-admin.min.css",
"build/ng-admin.min.js"
],
"dependencies": {
"angular": "~1.3.1"
},
"devDependencies": {
"angular-bootstrap": "~0.12.0",
"angular-resource": "~1.3.1",
"angular-cookies": "~1.3.1",
"angular-sanitize": "~1.3.1",
"json3": "~3.2.6",
"es5-shim": "~3.4.0",
"jquery": "~1.11.0",
"requirejs": "~2.1.14",
"requirejs-text": "~2.0.12",
"bootstrap-sass-official": "~3.3.0",
"restangular": "~1.4.0",
"angular-ui-router": "~0.2.13",
"bootstrap": "~3.3.1",
"fontawesome": "~4.1.0",
"humane": "~3.2.0",
"nprogress": "~0.1.6",
"textAngular": "~1.2.2",
"ngInflection": "~1.0.0",
"angular-ui-codemirror": "~0.2.2",
"jsonlint": "~1.6.0",
"ng-file-upload": "~2.2.2",
"angular-mocks": "~1.3.1",
"angular-scenario": "1.2.15",
"almond": "~0.3.0"
},
"resolutions": {
"angular": "~1.3.1"
}
}

—
Reply to this email directly or view it on GitHub
#322 (comment).

[fzaninotto]

Except it makes the installation without bower really hard...

I think we should bundle two files: one for quick setup with all dependencies, the other to be used with bower containing only ng-admin files.

@manuquentin Any idea how to do that?

[manuquentin]

Yes a build script that produces a ng-admin-all.min.js & ng-admin.min.js can be a good compromise

[fzaninotto]

I think this can be closed now that we don't user require.js anymore. @jpetitcolas can you confirm?

[jpetitcolas]

Yes, we can close. @binarious, feel free to re-open it if you still encounter some issues.