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.}