WebPack'd bundle.js file can't seem to figure out how to load the main /app.component.html

[NathanaelA]

This seems to be an issue between Angular2, webpack and the project -- part of the issue is WebPack/ng2 ---

EXCEPTION: Error: File /app.component.html does not exist. Resolved from: /app.component.html.
STACKTRACE:
ShoutOutPlay[17634]: CONSOLE LOG file:///app/bundle.js:35006:17: get@file:///app/bundle.js:99261:29
_fetch@file:///app/bundle.js:73195:36
normalizeTemplateAsync@file:///app/bundle.js:73238:28
normalizeDirective@file:///app/bundle.js:73213:67
_getCompiledTemplate@file:///app/bundle.js:72131:207
_getTransitiveCompiledTemplates@file:///app/bundle.js:72139:101
file:///app/bundle.js:72142:109
forEach@[native code]
_getTransitiveCompiledTemplates@file:///app/bundle.js:72142:49
compileComponentAsync@file:///app/bundle.js:72065:62
file:///app/bundle.js:42373:54
file:///app/bundle.js:42572:35
invoke@file:///app/bundle.js:24906:35
onInvoke@file:///app/bundle.js:47411:48
invoke@file:///app/bundle.js:24905:44
run@file:///app/bundle.js:24799:51
run@file:///app/bundle.js:42570:18
onLoadedHandler@file:///app/bundle.js:223:27
notify@file:///app/bundle.js:5605:32
_emit@file:///app/bundle.js:5624:25
onLoaded@file:///app/bundle.js:3329:20
onLoaded@file:///app/bundle.js:11028:40
onLoaded@file:///app/bundle.js:10845:44
viewWillAppear@file:///app/bundle.js:10741:27
UIApplicationMain@[native code]
start@file:///app/bundle.js:5335:27
nativeScriptBootstrap@file:///app/bundle.js:258:23
file:///app/bundle.js:82:37
webpack_require@file:///app/bundle.js:21:34
file:///app/bundle.js:41:37

Side note: I love how /app.component.html is trying to load /app.component.html

The issue is that webpack does some url rewriting; the original app.component.js file has:

AppComponent = __decorate([
        index_1.BaseComponent({
            moduleId: module.id,
            selector: 'my-app',
            templateUrl: 'app.component.html',
            directives: [player_controls_component_1.PlayerControlsComponent],
            changeDetection: core_1.ChangeDetectionStrategy.Default
        }),

The bundle.js has:
templateURL: '/app.component.html'

This obviously messes things up; as when this gets to the http/xhr function the "/" causes it to try and load the file from the main root folder of the device.

---

Now related to this issue is that webpack doesn't rewrite the urls properly for the other sub-components either.
This project has a "components/name/name.js" folder. In this folder it has the same declaration as the app.component: templateUrl: 'name.component.html'

However, in this case the bundle.js has:
templateUrl: 'name.component.html'

Notice it didn't add the "/" which is good on one hand, but notice what it didn't add? It didn't bother to add that this file is actually located in the "components/name" folder. So when xhr tried to read it -- it fails since it things it is in the root of the app folder.

So basically all components fail to load, making the bundled app worthless..

---

One side note: even thought the app bundled up all the JS in the "app" folder (and subfolders) and is using them from the bundle.js; the actual deployed app on the emulator appears to have all the .js from the app and the app sub folders also deployed. Shouldn't these also be excluded since they are in the bundle.js

[ntrp]

I think you can solve your problems by following what I have done here #11. It's not the definitive solution but it is the best available right now..

[NathanaelA]

@ntrp actually thanks for the input -- I have two other ways (just haven't had time to try either) I believe would fix this, but I posted the bug because this is a serious issue for anyone doing any ng code and using webpack.

[ntrp]

The major problem is that you can't have the same codebase for standard build and webpack unless you use only inline templates..

[NathanaelA]

@ntrp -- Actually I believe either of the two fixes that I have come up with (still haven't needed to try either) would easily allow everything to work with both inline and external templates all automatically for all types of projects. So I don't honestly believe this issue will actually block @NathanWalker 's project. Nathan was going to try something else first -- he is the guru at ng2, me I just pretend to know what I'm doing. :-D I'd rather let him try and fix his issue if he can, because then he can probably incorporate it into his cool ns-ng2 seed, so that others can benefit.

[hdeshev]

The latest release of nativescript-dev-webpack (0.2.x) takes care of the templateUrl/template (or bundled vs. non-bundled) problem by using the ng-tools AoT loader. With that you can have a templateUrl setting that gets replaced by the loader with the correct ngfactory.