BUG: ng test fails with third party library like ng2-material

[JDillon522]

1. OS: Mac OSX - El Capitan
2. Versions:

angular-cli: 0.0.27
node: 5.4.1
os: darwin x64

1. Repro steps:

I created a fresh repo with the cli to demonstrate the issue in isolation here.

My team wants to use ng2-material and our tests wont even run when we execute the ng test command. Here is the error I get:

Build successful - 2868ms.

Slowest Trees                                 | Total               
----------------------------------------------+---------------------
BroccoliTypeScriptCompiler                    | 2437ms              
DiffingSWManifest                             | 244ms               

Slowest Trees (cumulative)                    | Total (avg)         
----------------------------------------------+---------------------
BroccoliTypeScriptCompiler (1)                | 2437ms              
DiffingSWManifest (1)                         | 244ms               
Funnel (8)                                    | 145ms (18 ms)       

14 04 2016 16:03:56.796:INFO [watcher]: Changed file "/Users/jdillon/Documents/work/angCLItroubleshoot/shimTroubleshoot/dist/app/shim-troubleshoot.js".
14 04 2016 16:03:56.801:INFO [watcher]: Changed file "/Users/jdillon/Documents/work/angCLItroubleshoot/shimTroubleshoot/dist/index.html".

=====================================================================================================================================================================================

START:
14 04 2016 16:03:57.888:WARN [web-server]: 404: /ng2-material/all
Chrome 49.0.2623 (Mac OS X 10.11.3) ERROR
  Error: XHR error (404 Not Found) loading http://localhost:9876/ng2-material/all
      at error (/Users/jdillon/Documents/work/angCLItroubleshoot/shimTroubleshoot/node_modules/systemjs/dist/system.src.js:1026:16)
      at XMLHttpRequest.xhr.onreadystatechange (/Users/jdillon/Documents/work/angCLItroubleshoot/shimTroubleshoot/node_modules/systemjs/dist/system.src.js:1047:13)
      at XMLHttpRequest.wrapFn [as _onreadystatechange] (/Users/jdillon/Documents/work/angCLItroubleshoot/shimTroubleshoot/node_modules/angular2/bundles/angular2-polyfills.js:771:30)
      at ZoneDelegate.invokeTask (/Users/jdillon/Documents/work/angCLItroubleshoot/shimTroubleshoot/node_modules/angular2/bundles/angular2-polyfills.js:365:38)
      at Zone.runTask (/Users/jdillon/Documents/work/angCLItroubleshoot/shimTroubleshoot/node_modules/angular2/bundles/angular2-polyfills.js:263:48)
      at XMLHttpRequest.ZoneTask.invoke (/Users/jdillon/Documents/work/angCLItroubleshoot/shimTroubleshoot/node_modules/angular2/bundles/angular2-polyfills.js:431:34)

Finished in 0.907 secs / 0 secs

The pieces involved in this simple setup are:

• broccoli-merge-trees
• broccoli-funnel
• ng2-material
• karma-mocha-reporter (the error is the same regardless of this)

Some things required to set this up:

• Change src/client/app to src/app
• Setup the System.js in the index.html to be aware of the ng2-material package. Namely:

    System.config({
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        },
        'ng2-material': {
            format: 'cjs',
            defaultExtension: 'js',
            main: 'all.js'
        }
      }
    });

• Add "./app/**/*.spec.ts" to the tsconfig.json file
• Add the following in app.ts:

import {MATERIAL_PROVIDERS} from 'ng2-material/all';

bootstrap(ShimTroubleshootApp, [
  MATERIAL_PROVIDERS
]);

• In shim-troubleshoot.ts add MATERIAL_DIRECTIVES to the @Component({... directives: [MATERIAL_DIRECTIVES...]...}) (this is what will actually trigger the error. Before this I'm assuming its not trying to actually load the files.

I've tried tweaking the karma-test-shim.js in the following ways but this did not help:

System.config({
    packages: {
        'base/dist/app': {
            defaultExtension: false,
            format: 'register',
            map: Object.keys(window.__karma__.files)
                .filter(onlyAppFiles)
                .reduce(function(pathsMapping, appPath) {
                    var moduleName = appPath.replace(/^\/base\/dist\/app\//, './').replace(/\.js$/, '');
                    pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
                    return pathsMapping;
                }, {})
        },
        // NEW STUFF
        'base/dist/ng2-material': {
            format: 'cjs',
            defaultExtension: 'js',
            map: Object.keys(window.__karma__.files)
                .filter(onlyNg2Files)
                .reduce(function(pathsMapping, appPath) {
                    var moduleName = appPath.replace(/^\/base\/dist\/ng2-material\//, './').replace(/\.js$/, '');
                    pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
                    return pathsMapping;
                }, {})
        }
    }
});
...
...

function onlyNg2Files(filePath) {
    return /^\/base\/dist\/ng2-material\/(?!.*\.spec\.js$)([a-z0-9-_\.\/]+)\.js$/.test(filePath);
}

I've also tried to build the ng2-material directory in the src/app/ng2-material dir but I cant get the rest of the app to work like that so I cant really test it.

I've also tried to reconfigure things with System.config() in the following manner but this did not work:

System.config({
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js',
          meta: {
            './ng2-material': {
                format: 'cjs',
                defaultExtension: 'js',
                main: 'all.js'
            }
          }
        }
      }
    });

I've spent about 12+ hours on this and posted a few things in angular-cli gitter channel under "JDillon522"

[JDillon522]

So we ended up solving it by changing out karma-test-shim.js with the following:

System.config({ 
    packages: {
        'base/dist/app': {
            defaultExtension: false,
            format: 'register',
            map: Object.keys(window.__karma__.files)
                .filter(onlyAppFiles)
                .reduce(function(pathsMapping, appPath) {
                    var moduleName = appPath.replace(/^\/base\/dist\/app\//, './').replace(/\.js$/, '');
                    pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
                    return pathsMapping;
                }, {}),
        },
        'base/dist/ng2-material': {
            format: 'cjs',
            defaultExtension: 'js'
        },
    },
    map: {
      'ng2-material': 'base/dist/ng2-material'
    }
});

And then in the karma.conf.js we set basePath: './'. I sort of understand why this works.

I think a short blurb on the documentation stating things you need to consider changing for end user's tests would be nice.

[filipesilva]

We're working on getting separate files for SystemJS configuration, and also refining the 3rd party libs journey which should help with the issues that you describe.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}