idk, what happened, but something is funky now. Nested dependencies are a huge inconvience like this, and should be resolved automatically

Author: NullVoxPopuli

angular-cli-build.js

@@ -15,7 +15,13 @@ module.exports = function(defaults) {
       'es6-shim/es6-shim.js',
       'reflect-metadata/**/*.+(ts|js|js.map)',
       'rxjs/**/*.+(js|js.map)',
-      '@angular/**/*.+(js|js.map)'
-    ]
+      '@angular/**/*.+(js|js.map)',
+
+      // for testing...
+      'xhr-interceptor/**/*.js',
+      'methods/**/*.js',
+      'http-browserify/**/*.js',
+      'path-to-regexp/**/*.js',
+    ],
   });
 };

config/karma.conf.js

@@ -4,10 +4,11 @@
 module.exports = function (config) {
   config.set({
     basePath: '..',
-    frameworks: ['jasmine'],
+    frameworks: ['jasmine', 'commonjs'],
     plugins: [
       require('karma-jasmine'),
-      require('karma-chrome-launcher')
+      require('karma-chrome-launcher'),
+      require('karma-commonjs'),
     ],
     customLaunchers: {
       // chrome setup for travis CI using chromium
@@ -24,7 +25,11 @@ module.exports = function (config) {
       { pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: false },
       { pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false },
       { pattern: 'dist/vendor/zone.js/dist/fake-async-test.js', included: true, watched: false },
-
+      { pattern: 'dist/vendor/xhr-interceptor/**/*', served: true, watched: false },
+      { pattern: 'dist/vendor/methods/**/*', served: true, watched: false },
+      'dist/vendor/methods/index.js',
+      'dist/vendor/http-browserify/index.js',
+      'dist/vendor/path-to-regexp/index.js',
       { pattern: 'config/karma-test-shim.js', included: true, watched: true },
 
       // Distribution folder.
@@ -34,7 +39,11 @@ module.exports = function (config) {
       // Vendor packages might include spec files. We don't want to use those.
       'dist/vendor/**/*.spec.js'
     ],
-    preprocessors: {},
+    preprocessors: {
+      'dist/vendor/http-browserify/**/*.js': ['commonjs'],
+      'dist/vendor/methods/**/*.js': ['commonjs'],
+      'dist/vendor/xhr-interceptor/**/*.js': ['commonjs'],
+    },
     reporters: ['progress'],
     port: 9876,
     colors: true,

package.json

@@ -34,11 +34,15 @@
     "jasmine-spec-reporter": "2.5.0",
     "karma": "0.13.22",
     "karma-chrome-launcher": "0.2.3",
+    "karma-commonjs": "^1.0.0",
     "karma-jasmine": "0.3.8",
+    "object-assign": "^4.1.0",
+    "path-to-regexp": "^1.5.3",
     "protractor": "3.3.0",
     "ts-node": "0.5.5",
     "tslint": "3.11.0",
     "typescript": "1.8.10",
-    "typings": "0.8.1"
+    "typings": "0.8.1",
+    "xhr-interceptor": "^1.3.0"
   }
 }

src/app/app.component.spec.ts

@@ -8,9 +8,17 @@ import {
 } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
+import { Interceptor } from 'xhrinterceptor';
+
 beforeEachProviders(() => [AppComponent]);
 
 describe('App: AngularCli3rdpartyNestedDependencyIssue', () => {
+  let interceptor;
+
+  beforeEach(() => {
+    interceptor = new Interceptor;
+  });
+
   it('should create the app',
       inject([AppComponent], (app: AppComponent) => {
     expect(app).toBeTruthy();

src/system-config.ts

@@ -7,10 +7,36 @@
  **********************************************************************************************/
 /** Map relative paths to URLs. */
 const map: any = {
+  // for testing
+  'xhrinterceptor': 'vendor/xhr-interceptor',
+  'methods': 'vendor/methods',
+  'http': 'vendor/http-browserify',
+  'path-to-regexp': 'vendor/path-to-regexp',
 };
 
 /** User packages configuration. */
 const packages: any = {
+  'xhrinterceptor': {
+    format: 'cjs',
+    defaultExtension: 'js',
+    main: 'index.js'
+  },
+  'methods': {
+    format: 'cjs',
+    defaultExtension: 'js',
+    main: 'index.js'
+  },
+  'http': {
+    format: 'cjs',
+    defaultExtension: 'js',
+    main: 'index.js'
+  },
+  'path-to-regexp': {
+    format: 'cjs',
+    defaultExtension: 'js',
+    main: 'index.js'
+  },
+
 };
 
 ////////////////////////////////////////////////////////////////////////////////////////////////
@@ -49,7 +75,8 @@ System.config({
   map: {
     '@angular': 'vendor/@angular',
     'rxjs': 'vendor/rxjs',
-    'main': 'main.js'
+    'main': 'main.js',
+    'xhrinterceptor': 'vendor/xhr-interceptor'
   },
   packages: cliSystemConfigPackages
 });

src/typings.d.ts

@@ -4,3 +4,7 @@
 
 /// <reference path="../typings/browser.d.ts" />
 declare var module: { id: string };
+declare module 'xhrinterceptor' {
+  export class Interceptor{
+  }
+}