WARNING: Tried to load angular more than once.

[parallaxisjones]

not sure exactly even where to start on this one.... anyone?

When including ui-leaflet & angular-simple-logger in my project using browserify I get this error: WARNING: Tried to load angular more than once.

my index.js file

require('angular')
require('angular-simple-logger')
require('ui-leaflet')
require('angular-cookies')
require('angular-storage/dist/angular-storage.min.js')
require('angular-modal-service')
require('ng-file-upload')
require('angular-ui-router')
require('angular-aria')
require('angular-animate')
require('angular-material')
require('angular-material-icons')
require('lodash')
require('leaflet')
require('uuid')
var $ = require('jquery');
require('materialize');

require('./app').inject(angular)

packages.json file

{
  "name": "angular_leaflet_app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Parker Jones <[email protected]>",
  "license": "ISC",
  "devDependencies": {
    "angular-environment": "^1.0.3",
    "browserify": "^9.0.3",
    "browserify-shim": "^3.8.12",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-clean-css": "^2.0.4",
    "gulp-concat": "^2.6.0",
    "gulp-concat-css": "^2.2.0",
    "gulp-connect": "^2.2.0",
    "gulp-install": "^0.6.0",
    "gulp-ruby-sass": "^2.0.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.5.3",
    "run-sequence": "^1.1.5",
    "vinyl-source-stream": "^1.1.0"
  },
  "dependencies": {
    "angular": "^1.3.15",
    "angular-animate": "^1.5.3",
    "angular-aria": "^1.5.3",
    "angular-cookies": "^1.5.3",
    "angular-material": "^1.0.6",
    "angular-material-icons": "^0.7.0",
    "angular-messages": "^1.5.3",
    "angular-modal-service": "^0.6.10",
    "angular-simple-logger": "^0.1.7",
    "angular-storage": "0.0.14",
    "angular-ui-router": "^0.2.18",
    "jquery": "^2.2.2",
    "jquery-browserify": "^1.8.1",
    "leaflet": "^0.7.7",
    "lodash": "^4.7.0",
    "materialize-css": "^0.97.6",
    "ng-file-upload": "^12.0.4",
    "ui-leaflet": "^1.0.0",
    "ui-router": "^1.0.0-alpha0",
    "uuid": "^2.0.1"
  },
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js",
    "materialize": "./node_modules/materialize-css/bin/materialize.js"
  },
  "browserify-shim": {
    "jquery": "$",
    "materialize": "materialize"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  }
}

[nmccready]

Curious what happens when you remove the first line to:

//require('angular')
require('angular-simple-logger')
require('ui-leaflet')
require('angular-cookies')
require('angular-storage/dist/angular-storage.min.js')
require('angular-modal-service')
require('ng-file-upload')
require('angular-ui-router')
require('angular-aria')
require('angular-animate')
require('angular-material')
require('angular-material-icons')
require('lodash')
require('leaflet')
require('uuid')
var $ = require('jquery');
require('materialize');

require('./app').inject(angular)

[Reeska]

Hi,

This issue is due to the following line in angular-simple-logger/dist/index.js line 9 :

var angular = require('angular');

So in Webpack build, AngularJS is loaded twice.

It will better to use IIFE declaration same as in index.light.js (without require('angular')). Why not use index.light.js for main property in package.json ? Moreover it seams pretty the same.

Example : https://github.com/Reeska/angular-simple-logger/commit/6e5223ff362300686e6449297f9b85008aaa3648

[nmccready]

Yeah I need to use rollup.js and fix angular-simple-logger. Thanks for the reminder.