{"action":"created","issue":{"url":"https://api.github.com/repos/webpack/webpack/issues/3334","repository_url":"https://api.github.com/repos/webpack/webpack","labels_url":"https://api.github.com/repos/webpack/webpack/issues/3334/labels{/name}","comments_url":"https://api.github.com/repos/webpack/webpack/issues/3334/comments","events_url":"https://api.github.com/repos/webpack/webpack/issues/3334/events","html_url":"https://github.com/webpack/webpack/issues/3334","id":190487370,"number":3334,"title":"Webpack output generates call stack error when templateUrl used in Angular 2 component.","user":{"login":"sqlsolver","id":4545063,"avatar_url":"https://avatars.githubusercontent.com/u/4545063?v=3","gravatar_id":"","url":"https://api.github.com/users/sqlsolver","html_url":"https://github.com/sqlsolver","followers_url":"https://api.github.com/users/sqlsolver/followers","following_url":"https://api.github.com/users/sqlsolver/following{/other_user}","gists_url":"https://api.github.com/users/sqlsolver/gists{/gist_id}","starred_url":"https://api.github.com/users/sqlsolver/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sqlsolver/subscriptions","organizations_url":"https://api.github.com/users/sqlsolver/orgs","repos_url":"https://api.github.com/users/sqlsolver/repos","events_url":"https://api.github.com/users/sqlsolver/events{/privacy}","received_events_url":"https://api.github.com/users/sqlsolver/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2016-11-19T09:45:06Z","updated_at":"2016-11-24T00:17:07Z","closed_at":"2016-11-23T14:32:10Z","body":"<!-- Before creating an issue please make sure you are using the latest version of webpack. -->\r\nWebpack 2.1.0-beta.27\r\n**Do you want to request a *feature* or report a *bug*?**\r\nReport a bug.\r\n<!-- Please ask questions on StackOverflow or the webpack Gitter (https://gitter.im/webpack/webpack). Questions will be closed. -->\r\nAsked both places while trying to resolve - no suggestions.\r\n**What is the current behavior?**\r\n\r\n**If the current behavior is a bug, please provide the steps to reproduce.**\r\n<!-- A great way to do this is to provide your configuration via a GitHub gist. -->\r\nUse Angular's templateUrl syntax inside a component definition like:\r\n````\r\n@Component ({\r\n    selector: 'my-component',\r\n    templateUrl: './view/myview.html'\r\n})\r\n````\r\n Problem is resolved by loading HTML inline using just 'template' like:\r\n````\r\n@Component ({\r\n    selector: 'my-component',\r\n    template: `\r\n<p>content</>\r\n`\r\n})\r\n````\r\nTypical error in Chrome console:\r\n````\r\nNavigated to http://www.angularsolver.com/\r\nLoading AppModuleRoot\r\nXHR finished loading: GET \"http://www.angularsolver.com/view/appTemplate.html\".\r\nXHR finished loading: GET \"http://www.angularsolver.com/view/appEntry.a871525a7d84b5bc0430.css\".\r\nEXCEPTION: Error in view/appTemplate.html:12:8 caused by: Maximum call stack size exceeded\r\nORIGINAL EXCEPTION: Maximum call stack size exceeded\r\nORIGINAL STACKTRACE:\r\nRangeError: Maximum call stack size exceeded\r\n    at new ViewWrappedError (http://www.angularsolver.com/appEntry.js:45117:16)\r\n    at _View_AppComponent0.DebugAppView._rethrowWithContext (http://www.angularsolver.com/appEntry.js:61176:23)\r\n    at _View_AppComponent0.DebugAppView.create (http://www.angularsolver.com/appEntry.js:61122:18)\r\n    at _View_AppComponent0.createInternal (/AppModuleRoot/AppComponent/component.ngfactory.js:70:15)\r\n    at _View_AppComponent0.AppView.create (http://www.angularsolver.com/appEntry.js:60919:21)\r\n    at _View_AppComponent0.DebugAppView.create (http://www.angularsolver.com/appEntry.js:61119:44)\r\n    at _View_AppComponent0.createInternal (/AppModuleRoot/AppComponent/component.ngfactory.js:70:15)\r\n\r\n24k lines so truncated!!!\r\n\r\n    at ComponentFactory.create (http://www.angularsolver.com/appEntry.js:44866:36)\r\n    at ApplicationRef_.bootstrap (http://www.angularsolver.com/appEntry.js:28595:40)\r\n    at http://www.angularsolver.com/appEntry.js:28504:89\r\n    at Array.forEach (native)\r\n    at PlatformRef_._moduleDoBootstrap (http://www.angularsolver.com/appEntry.js:28504:42)\r\n    at http://www.angularsolver.com/appEntry.js:28472:27\r\n    at ZoneDelegate.invoke (http://www.angularsolver.com/appEntry.js:91969:26)\r\n    at Object.onInvoke (http://www.angularsolver.com/appEntry.js:30745:37)\r\n    at ZoneDelegate.invoke (http://www.angularsolver.com/appEntry.js:91968:32)\r\n    at Zone.run (http://www.angularsolver.com/appEntry.js:91851:43)\r\n    at http://www.angularsolver.com/appEntry.js:92239:57\r\n    at ZoneDelegate.invokeTask (http://www.angularsolver.com/appEntry.js:92002:35)\r\n    at Object.onInvokeTask (http://www.angularsolver.com/appEntry.js:30736:37)\r\n    at ZoneDelegate.invokeTask (http://www.angularsolver.com/appEntry.js:92001:40)\r\n    at Zone.runTask (http://www.angularsolver.com/appEntry.js:91891:47)\r\n    at drainMicroTaskQueue (http://www.angularsolver.com/appEntry.js:92138:35)\r\n    at XMLHttpRequest.ZoneTask.invoke (http://www.angularsolver.com/appEntry.js:92076:25)\r\nERROR CONTEXT:\r\nDebugContext {_view: _View_AppComponent0, _nodeIndex: 22, _tplRow: 12, _tplCol: 8}\r\nViewWrappedError {_nativeError: Error: Error in view/appTemplate.html:12:8 caused by: Maximum call stack size exceeded\r\n    at ViewWr…, originalError: RangeError: Maximum call stack size exceeded\r\n    at new ViewWrappedError (http://www.angularsolver.c…, context: DebugContext}\r\n````\r\nTypical error in Firefox console:\r\n````\r\nEXCEPTION: too much recursionappEntry.js:44828:9\r\nErrorHandler.prototype.handleError()appEntry.js:44828\r\n_callAndReportToErrorHandler/<()appEntry.js:29030\r\nZoneDelegate.prototype.invoke()appEntry.js:92119\r\nNgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvoke()appEntry.js:31402\r\nZoneDelegate.prototype.invoke()appEntry.js:92118\r\nZone.prototype.run()appEntry.js:92001\r\nscheduleResolveOrReject/<()appEntry.js:92389\r\nZoneDelegate.prototype.invokeTask()appEntry.js:92152\r\nNgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask()appEntry.js:31393\r\nZoneDelegate.prototype.invokeTask()appEntry.js:92151\r\nZone.prototype.runTask()appEntry.js:92041\r\ndrainMicroTaskQueue()appEntry.js:92288\r\nZoneTask/this.invoke()appEntry.js:92226\r\n\r\n21:10:07.397 ORIGINAL STACKTRACE:appEntry.js:44833:13\r\nErrorHandler.prototype.handleError()appEntry.js:44833\r\n_callAndReportToErrorHandler/<()appEntry.js:29030\r\nZoneDelegate.prototype.invoke()appEntry.js:92119\r\nNgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvoke()appEntry.js:31402\r\nZoneDelegate.prototype.invoke()appEntry.js:92118\r\nZone.prototype.run()appEntry.js:92001\r\nscheduleResolveOrReject/<()appEntry.js:92389\r\nZoneDelegate.prototype.invokeTask()appEntry.js:92152\r\nNgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask()appEntry.js:31393\r\nZoneDelegate.prototype.invokeTask()appEntry.js:92151\r\nZone.prototype.runTask()appEntry.js:92041\r\ndrainMicroTaskQueue()appEntry.js:92288\r\nZoneTask/this.invoke()appEntry.js:92226\r\n````\r\nWebpack builds completed without error, but browser console errors were thrown by the output file - which for this app is appEntry.js.\r\n\r\n**What is the expected behavior?**\r\nExpect to write HTML in partials and load them using Angular's templateUrl syntax inside a component definition.\r\n\r\nSee full discussion at https://github.com/angular/angular/issues/7930. This thread attributes the problem solely to Angular, however the same configuration doesn't fail with SystemJS build therefore I'm opening the issue here.\r\n\r\n**If this is a feature request, what is motivation or use case for changing the behavior?**\r\nBug - but motivation would be to assure that webpack successfully builds an Angular 2 project.\r\n\r\n**Please mention other relevant information such as the browser version, Node.js version, Operating System and programming language.**\r\nTypescript@2.0.3 and Node@7.0.0\r\n\r\nBuild in Windows/Visual Studio 2015 and push to GitHub from within IDE. Pull from GitHub to shared hosting directory on Apache host. All builds done on host with command:\r\n./node_modules/webpack/bin/webpack.js --config ./config/webpack.common.js --progress --profile --colors --cache false --devtool source-map\r\n\r\nNote: Cannot use rimraf on shared hosting (no root).\r\n"},"comment":{"url":"https://api.github.com/repos/webpack/webpack/issues/comments/262661063","html_url":"https://github.com/webpack/webpack/issues/3334#issuecomment-262661063","issue_url":"https://api.github.com/repos/webpack/webpack/issues/3334","id":262661063,"user":{"login":"Kovensky","id":73085,"avatar_url":"https://avatars.githubusercontent.com/u/73085?v=3","gravatar_id":"","url":"https://api.github.com/users/Kovensky","html_url":"https://github.com/Kovensky","followers_url":"https://api.github.com/users/Kovensky/followers","following_url":"https://api.github.com/users/Kovensky/following{/other_user}","gists_url":"https://api.github.com/users/Kovensky/gists{/gist_id}","starred_url":"https://api.github.com/users/Kovensky/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Kovensky/subscriptions","organizations_url":"https://api.github.com/users/Kovensky/orgs","repos_url":"https://api.github.com/users/Kovensky/repos","events_url":"https://api.github.com/users/Kovensky/events{/privacy}","received_events_url":"https://api.github.com/users/Kovensky/received_events","type":"User","site_admin":false},"created_at":"2016-11-24T00:17:07Z","updated_at":"2016-11-24T00:17:07Z","body":"It seems that System.js is willing to load files from \"outside\", but webpack can only load files it knows about beforehand. The solution at https://github.com/angular/angular/issues/7930#issuecomment-252481653 would make both System and webpack happy, as the explicit import tells webpack about the resource."}}
{"actor":{"display_login":"Kovensky"}}