{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular-cli/issues/438","repository_url":"https://api.github.com/repos/angular/angular-cli","labels_url":"https://api.github.com/repos/angular/angular-cli/issues/438/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular-cli/issues/438/comments","events_url":"https://api.github.com/repos/angular/angular-cli/issues/438/events","html_url":"https://github.com/angular/angular-cli/issues/438","id":148471770,"number":438,"title":"BUG: ng test fails with third party library like ng2-material","user":{"login":"JDillon522","id":4861202,"avatar_url":"https://avatars.githubusercontent.com/u/4861202?v=3","gravatar_id":"","url":"https://api.github.com/users/JDillon522","html_url":"https://github.com/JDillon522","followers_url":"https://api.github.com/users/JDillon522/followers","following_url":"https://api.github.com/users/JDillon522/following{/other_user}","gists_url":"https://api.github.com/users/JDillon522/gists{/gist_id}","starred_url":"https://api.github.com/users/JDillon522/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/JDillon522/subscriptions","organizations_url":"https://api.github.com/users/JDillon522/orgs","repos_url":"https://api.github.com/users/JDillon522/repos","events_url":"https://api.github.com/users/JDillon522/events{/privacy}","received_events_url":"https://api.github.com/users/JDillon522/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-04-14T20:20:40Z","updated_at":"2016-04-15T20:39:10Z","closed_at":"2016-04-15T20:39:10Z","body":"1. OS:  Mac OSX - El Capitan\r\n\r\n2. Versions:\r\n\r\n> angular-cli: 0.0.27\r\n> node: 5.4.1\r\n> os: darwin x64\r\n\r\n3. Repro steps:\r\n\r\nI created a fresh repo with the cli to demonstrate the issue in isolation [here](https://github.com/JDillon522/ng-cli-karma-shim-troubleshoot).\r\n\r\nMy team wants to use [ng2-material](https://justindujardin.github.io/ng2-material/) and our tests wont even run when we execute the `ng test` command. Here is the error I get:\r\n\r\n```\r\nBuild successful - 2868ms.\r\n\r\nSlowest Trees                                 | Total               \r\n----------------------------------------------+---------------------\r\nBroccoliTypeScriptCompiler                    | 2437ms              \r\nDiffingSWManifest                             | 244ms               \r\n\r\nSlowest Trees (cumulative)                    | Total (avg)         \r\n----------------------------------------------+---------------------\r\nBroccoliTypeScriptCompiler (1)                | 2437ms              \r\nDiffingSWManifest (1)                         | 244ms               \r\nFunnel (8)                                    | 145ms (18 ms)       \r\n\r\n14 04 2016 16:03:56.796:INFO [watcher]: Changed file \"/Users/jdillon/Documents/work/angCLItroubleshoot/shimTroubleshoot/dist/app/shim-troubleshoot.js\".\r\n14 04 2016 16:03:56.801:INFO [watcher]: Changed file \"/Users/jdillon/Documents/work/angCLItroubleshoot/shimTroubleshoot/dist/index.html\".\r\n\r\n=====================================================================================================================================================================================\r\n\r\nSTART:\r\n14 04 2016 16:03:57.888:WARN [web-server]: 404: /ng2-material/all\r\nChrome 49.0.2623 (Mac OS X 10.11.3) ERROR\r\n  Error: XHR error (404 Not Found) loading http://localhost:9876/ng2-material/all\r\n      at error (/Users/jdillon/Documents/work/angCLItroubleshoot/shimTroubleshoot/node_modules/systemjs/dist/system.src.js:1026:16)\r\n      at XMLHttpRequest.xhr.onreadystatechange (/Users/jdillon/Documents/work/angCLItroubleshoot/shimTroubleshoot/node_modules/systemjs/dist/system.src.js:1047:13)\r\n      at XMLHttpRequest.wrapFn [as _onreadystatechange] (/Users/jdillon/Documents/work/angCLItroubleshoot/shimTroubleshoot/node_modules/angular2/bundles/angular2-polyfills.js:771:30)\r\n      at ZoneDelegate.invokeTask (/Users/jdillon/Documents/work/angCLItroubleshoot/shimTroubleshoot/node_modules/angular2/bundles/angular2-polyfills.js:365:38)\r\n      at Zone.runTask (/Users/jdillon/Documents/work/angCLItroubleshoot/shimTroubleshoot/node_modules/angular2/bundles/angular2-polyfills.js:263:48)\r\n      at XMLHttpRequest.ZoneTask.invoke (/Users/jdillon/Documents/work/angCLItroubleshoot/shimTroubleshoot/node_modules/angular2/bundles/angular2-polyfills.js:431:34)\r\n\r\nFinished in 0.907 secs / 0 secs\r\n```\r\n\r\nThe pieces involved in this simple setup are:\r\n- broccoli-merge-trees\r\n- broccoli-funnel\r\n- ng2-material\r\n- karma-mocha-reporter (the error is the same regardless of this)\r\n\r\nSome things required to set this up:\r\n- Change `src/client/app` to `src/app`\r\n- Setup the System.js in the `index.html` to be aware of the ng2-material package. Namely:\r\n```javascript\r\n    System.config({\r\n      packages: {\r\n        app: {\r\n          format: 'register',\r\n          defaultExtension: 'js'\r\n        },\r\n        'ng2-material': {\r\n            format: 'cjs',\r\n            defaultExtension: 'js',\r\n            main: 'all.js'\r\n        }\r\n      }\r\n    });\r\n```\r\n- Add `\"./app/**/*.spec.ts\"` to the `tsconfig.json` file\r\n- Add the following in `app.ts`:\r\n```javascript\r\nimport {MATERIAL_PROVIDERS} from 'ng2-material/all';\r\n\r\nbootstrap(ShimTroubleshootApp, [\r\n  MATERIAL_PROVIDERS\r\n]);\r\n```\r\n- 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.\r\n\r\n\r\nI've tried tweaking the `karma-test-shim.js` in the following ways but this did not help:\r\n\r\n```javascript\r\nSystem.config({\r\n    packages: {\r\n        'base/dist/app': {\r\n            defaultExtension: false,\r\n            format: 'register',\r\n            map: Object.keys(window.__karma__.files)\r\n                .filter(onlyAppFiles)\r\n                .reduce(function(pathsMapping, appPath) {\r\n                    var moduleName = appPath.replace(/^\\/base\\/dist\\/app\\//, './').replace(/\\.js$/, '');\r\n                    pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]\r\n                    return pathsMapping;\r\n                }, {})\r\n        },\r\n        // NEW STUFF\r\n        'base/dist/ng2-material': {\r\n            format: 'cjs',\r\n            defaultExtension: 'js',\r\n            map: Object.keys(window.__karma__.files)\r\n                .filter(onlyNg2Files)\r\n                .reduce(function(pathsMapping, appPath) {\r\n                    var moduleName = appPath.replace(/^\\/base\\/dist\\/ng2-material\\//, './').replace(/\\.js$/, '');\r\n                    pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]\r\n                    return pathsMapping;\r\n                }, {})\r\n        }\r\n    }\r\n});\r\n...\r\n...\r\n\r\nfunction onlyNg2Files(filePath) {\r\n    return /^\\/base\\/dist\\/ng2-material\\/(?!.*\\.spec\\.js$)([a-z0-9-_\\.\\/]+)\\.js$/.test(filePath);\r\n}\r\n```\r\n\r\nI'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. \r\n\r\nI've also tried to reconfigure things with `System.config()` in the following manner but this did not work:\r\n```javascript\r\nSystem.config({\r\n      packages: {\r\n        app: {\r\n          format: 'register',\r\n          defaultExtension: 'js',\r\n          meta: {\r\n            './ng2-material': {\r\n                format: 'cjs',\r\n                defaultExtension: 'js',\r\n                main: 'all.js'\r\n            }\r\n          }\r\n        }\r\n      }\r\n    });\r\n```\r\n\r\nI've spent about 12+ hours on this and posted a few things in [angular-cli gitter channel](https://gitter.im/angular/angular-cli) under \"JDillon522\""},"comment":{"url":"https://api.github.com/repos/angular/angular-cli/issues/comments/210636829","html_url":"https://github.com/angular/angular-cli/issues/438#issuecomment-210636829","issue_url":"https://api.github.com/repos/angular/angular-cli/issues/438","id":210636829,"user":{"login":"JDillon522","id":4861202,"avatar_url":"https://avatars.githubusercontent.com/u/4861202?v=3","gravatar_id":"","url":"https://api.github.com/users/JDillon522","html_url":"https://github.com/JDillon522","followers_url":"https://api.github.com/users/JDillon522/followers","following_url":"https://api.github.com/users/JDillon522/following{/other_user}","gists_url":"https://api.github.com/users/JDillon522/gists{/gist_id}","starred_url":"https://api.github.com/users/JDillon522/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/JDillon522/subscriptions","organizations_url":"https://api.github.com/users/JDillon522/orgs","repos_url":"https://api.github.com/users/JDillon522/repos","events_url":"https://api.github.com/users/JDillon522/events{/privacy}","received_events_url":"https://api.github.com/users/JDillon522/received_events","type":"User","site_admin":false},"created_at":"2016-04-15T20:39:10Z","updated_at":"2016-04-15T20:39:10Z","body":"So we ended up solving it by changing out `karma-test-shim.js` with the following: \r\n\r\n```\r\nSystem.config({ \r\n    packages: {\r\n        'base/dist/app': {\r\n            defaultExtension: false,\r\n            format: 'register',\r\n            map: Object.keys(window.__karma__.files)\r\n                .filter(onlyAppFiles)\r\n                .reduce(function(pathsMapping, appPath) {\r\n                    var moduleName = appPath.replace(/^\\/base\\/dist\\/app\\//, './').replace(/\\.js$/, '');\r\n                    pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]\r\n                    return pathsMapping;\r\n                }, {}),\r\n        },\r\n        'base/dist/ng2-material': {\r\n            format: 'cjs',\r\n            defaultExtension: 'js'\r\n        },\r\n    },\r\n    map: {\r\n      'ng2-material': 'base/dist/ng2-material'\r\n    }\r\n});\r\n```\r\n\r\nAnd then in the `karma.conf.js` we set `basePath: './'`. I sort of understand why this works. \r\n\r\nI think a short blurb on the documentation stating things you need to consider changing for end user's tests would be nice. \r\n\r\n"}}