Fix loopback explorer issue

package.json

@@ -83,6 +83,7 @@
     "lodash": "^3.9.3",
     "loopback": "^2.22.0",
     "loopback-boot": "^2.13.0",
+    "loopback-component-explorer": "^2.1.1",
     "loopback-component-passport": "https://github.com/FreeCodeCamp/loopback-component-passport.git#feature/flashfailure",
     "loopback-connector-mongodb": "^1.10.0",
     "lusca": "~1.3.0",
@@ -137,7 +138,7 @@
     "envify": "^3.4.0",
     "istanbul": "^0.4.0",
     "jsonlint": "^1.6.2",
-    "loopback-explorer": "^2.0.2",
+    "loopback-component-explorer": "^2.1.1",
     "loopback-testing": "^1.1.0",
     "mocha": "~2.3.3",
     "multiline": "~1.0.1",

server/boot/explorer.js

@@ -4,27 +4,26 @@ module.exports = function mountLoopBackExplorer(app) {
   }
   var explorer;
   try {
-    explorer = require('loopback-explorer');
+    explorer = require('loopback-component-explorer');
   } catch (err) {
     // Print the message only when the app was started via `app.listen()`.
     // Do not print any message when the project is used as a component.
     app.once('started', function() {
       console.log(
-        'Run `npm install loopback-explorer` to enable the LoopBack explorer'
+        'Run `npm install loopback-component-explorer` to enable ' +
+        'the LoopBack explorer'
       );
     });
     return;
   }
 
   var restApiRoot = app.get('restApiRoot');
+  var mountPath = '/explorer';
 
-  var explorerApp = explorer(app, { basePath: restApiRoot });
-  app.use('/explorer', explorerApp);
+  explorer(app, { basePath: restApiRoot, mountPath });
   app.once('started', function() {
     var baseUrl = app.get('url').replace(/\/$/, '');
-    // express 4.x (loopback 2.x) uses `mountpath`
-    // express 3.x (loopback 1.x) uses `route`
-    var explorerPath = explorerApp.mountpath || explorerApp.route;
-    console.log('Browse your REST API at %s%s', baseUrl, explorerPath);
+
+    console.log('Browse your REST API at %s%s', baseUrl, mountPath);
   });
 };