Webpack build breaks ability to use npm installed custom components

[adamduren]

1. OS?
   Mac OSX El Capitan
2. Versions.

angular-cli: local (v1.0.0-beta.11-webpack, branch: ??)
node: 6.3.1
os: darwin x64

1. Repro steps.

$ ng  bug-demo
$ cd bug-demo
$ npm install NorthernLogic/angular-cli-imported-component-bug#typescript

# In app.component.ts

# Add this
import { CustomComponent } from 'ng2-custom-component';

# Add the `CustomComponent` directive to the directives list
@Component({
  #...
  selector: 'app-root',
  directives: [CustomComponent]
...

$ ng serve

# Observe errors in 

1. The log given by the failure. Normally this include a stack trace and some
   more information.

zone.js:101GET http://127.0.0.1:4200/component.html 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM43932:3XHRImpl.get @ xhr_impl.js:47DirectiveNormalizer._fetch @ directive_normalizer.js:49DirectiveNormalizer.normalizeTemplateAsync @ directive_normalizer.js:92DirectiveNormalizer.normalizeDirective @ directive_normalizer.js:67RuntimeCompiler._getCompiledTemplate @ runtime_compiler.js:109RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:117(anonymous function) @ runtime_compiler.js:120RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:120(anonymous function) @ runtime_compiler.js:120RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:120RuntimeCompiler.compileComponentAsync @ runtime_compiler.js:43RuntimeCompiler.resolveComponent @ runtime_compiler.js:39(anonymous function) @ application_ref.js:165(anonymous function) @ application_ref.js:364ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.js:53ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ ng_zone_impl.js:84NgZone.run @ ng_zone.js:235ApplicationRef_.run @ application_ref.js:362coreLoadAndBootstrap @ application_ref.js:162bootstrap @ index.js:115(anonymous function) @ main.ts:9__webpack_require__ @ bootstrap f5caf8d…:52(anonymous function) @ environment.dev.ts:4__webpack_require__ @ bootstrap f5caf8d…:52webpackJsonpCallback @ bootstrap f5caf8d…:23(anonymous function) @ main.bundle.js:1
browser_adapter.js:93EXCEPTION: Failed to load /component.html
browser_adapter.js:84EXCEPTION: Failed to load /component.htmlBrowserDomAdapter.logError @ browser_adapter.js:84BrowserDomAdapter.logGroup @ browser_adapter.js:94ExceptionHandler.call @ exception_handler.js:65(anonymous function) @ application_ref.js:368ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.js:53ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.js:44ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM43932:3XHRImpl.get @ xhr_impl.js:47DirectiveNormalizer._fetch @ directive_normalizer.js:49DirectiveNormalizer.normalizeTemplateAsync @ directive_normalizer.js:92DirectiveNormalizer.normalizeDirective @ directive_normalizer.js:67RuntimeCompiler._getCompiledTemplate @ runtime_compiler.js:109RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:117(anonymous function) @ runtime_compiler.js:120RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:120(anonymous function) @ runtime_compiler.js:120RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:120RuntimeCompiler.compileComponentAsync @ runtime_compiler.js:43RuntimeCompiler.resolveComponent @ runtime_compiler.js:39(anonymous function) @ application_ref.js:165(anonymous function) @ application_ref.js:364ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.js:53ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ ng_zone_impl.js:84NgZone.run @ ng_zone.js:235ApplicationRef_.run @ application_ref.js:362coreLoadAndBootstrap @ application_ref.js:162bootstrap @ index.js:115(anonymous function) @ main.ts:9__webpack_require__ @ bootstrap f5caf8d…:52(anonymous function) @ environment.dev.ts:4__webpack_require__ @ bootstrap f5caf8d…:52webpackJsonpCallback @ bootstrap f5caf8d…:23(anonymous function) @ main.bundle.js:1
browser_adapter.js:93EXCEPTION: Error: Uncaught (in promise): Failed to load /component.html
browser_adapter.js:84EXCEPTION: Error: Uncaught (in promise): Failed to load /component.htmlBrowserDomAdapter.logError @ browser_adapter.js:84BrowserDomAdapter.logGroup @ browser_adapter.js:94ExceptionHandler.call @ exception_handler.js:65(anonymous function) @ application_ref.js:337schedulerFn @ async.js:139SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:127onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM43932:3XHRImpl.get @ xhr_impl.js:47DirectiveNormalizer._fetch @ directive_normalizer.js:49DirectiveNormalizer.normalizeTemplateAsync @ directive_normalizer.js:92DirectiveNormalizer.normalizeDirective @ directive_normalizer.js:67RuntimeCompiler._getCompiledTemplate @ runtime_compiler.js:109RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:117(anonymous function) @ runtime_compiler.js:120RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:120(anonymous function) @ runtime_compiler.js:120RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:120RuntimeCompiler.compileComponentAsync @ runtime_compiler.js:43RuntimeCompiler.resolveComponent @ runtime_compiler.js:39(anonymous function) @ application_ref.js:165(anonymous function) @ application_ref.js:364ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.js:53ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ ng_zone_impl.js:84NgZone.run @ ng_zone.js:235ApplicationRef_.run @ application_ref.js:362coreLoadAndBootstrap @ application_ref.js:162bootstrap @ index.js:115(anonymous function) @ main.ts:9__webpack_require__ @ bootstrap f5caf8d…:52(anonymous function) @ environment.dev.ts:4__webpack_require__ @ bootstrap f5caf8d…:52webpackJsonpCallback @ bootstrap f5caf8d…:23(anonymous function) @ main.bundle.js:1
browser_adapter.js:84STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:67(anonymous function) @ application_ref.js:337schedulerFn @ async.js:139SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:127onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM43932:3XHRImpl.get @ xhr_impl.js:47DirectiveNormalizer._fetch @ directive_normalizer.js:49DirectiveNormalizer.normalizeTemplateAsync @ directive_normalizer.js:92DirectiveNormalizer.normalizeDirective @ directive_normalizer.js:67RuntimeCompiler._getCompiledTemplate @ runtime_compiler.js:109RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:117(anonymous function) @ runtime_compiler.js:120RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:120(anonymous function) @ runtime_compiler.js:120RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:120RuntimeCompiler.compileComponentAsync @ runtime_compiler.js:43RuntimeCompiler.resolveComponent @ runtime_compiler.js:39(anonymous function) @ application_ref.js:165(anonymous function) @ application_ref.js:364ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.js:53ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ ng_zone_impl.js:84NgZone.run @ ng_zone.js:235ApplicationRef_.run @ application_ref.js:362coreLoadAndBootstrap @ application_ref.js:162bootstrap @ index.js:115(anonymous function) @ main.ts:9__webpack_require__ @ bootstrap f5caf8d…:52(anonymous function) @ environment.dev.ts:4__webpack_require__ @ bootstrap f5caf8d…:52webpackJsonpCallback @ bootstrap f5caf8d…:23(anonymous function) @ main.bundle.js:1
browser_adapter.js:84Error: Uncaught (in promise): Failed to load /component.html
    at resolvePromise (zone.js:538)
    at PromiseCompleter.reject (zone.js:515)
    at application_ref.js:367
    at ZoneDelegate.invoke (zone.js:323)
    at Object.onInvoke (ng_zone_impl.js:53)
    at ZoneDelegate.invoke (zone.js:322)
    at Zone.run (zone.js:216)
    at zone.js:571
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.onInvokeTask (ng_zone_impl.js:44)BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:68(anonymous function) @ application_ref.js:337schedulerFn @ async.js:139SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:127onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM43932:3XHRImpl.get @ xhr_impl.js:47DirectiveNormalizer._fetch @ directive_normalizer.js:49DirectiveNormalizer.normalizeTemplateAsync @ directive_normalizer.js:92DirectiveNormalizer.normalizeDirective @ directive_normalizer.js:67RuntimeCompiler._getCompiledTemplate @ runtime_compiler.js:109RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:117(anonymous function) @ runtime_compiler.js:120RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:120(anonymous function) @ runtime_compiler.js:120RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:120RuntimeCompiler.compileComponentAsync @ runtime_compiler.js:43RuntimeCompiler.resolveComponent @ runtime_compiler.js:39(anonymous function) @ application_ref.js:165(anonymous function) @ application_ref.js:364ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.js:53ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ ng_zone_impl.js:84NgZone.run @ ng_zone.js:235ApplicationRef_.run @ application_ref.js:362coreLoadAndBootstrap @ application_ref.js:162bootstrap @ index.js:115(anonymous function) @ main.ts:9__webpack_require__ @ bootstrap f5caf8d…:52(anonymous function) @ environment.dev.ts:4__webpack_require__ @ bootstrap f5caf8d…:52webpackJsonpCallback @ bootstrap f5caf8d…:23(anonymous function) @ main.bundle.js:1
zone.js:461Unhandled Promise rejection: Failed to load /component.html ; Zone: angular ; Task: Promise.then ; Value: Failed to load /component.htmlconsoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM43932:3XHRImpl.get @ xhr_impl.js:47DirectiveNormalizer._fetch @ directive_normalizer.js:49DirectiveNormalizer.normalizeTemplateAsync @ directive_normalizer.js:92DirectiveNormalizer.normalizeDirective @ directive_normalizer.js:67RuntimeCompiler._getCompiledTemplate @ runtime_compiler.js:109RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:117(anonymous function) @ runtime_compiler.js:120RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:120(anonymous function) @ runtime_compiler.js:120RuntimeCompiler._getTransitiveCompiledTemplates @ runtime_compiler.js:120RuntimeCompiler.compileComponentAsync @ runtime_compiler.js:43RuntimeCompiler.resolveComponent @ runtime_compiler.js:39(anonymous function) @ application_ref.js:165(anonymous function) @ application_ref.js:364ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.js:53ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ ng_zone_impl.js:84NgZone.run @ ng_zone.js:235ApplicationRef_.run @ application_ref.js:362coreLoadAndBootstrap @ application_ref.js:162bootstrap @ index.js:115(anonymous function) @ main.ts:9__webpack_require__ @ bootstrap f5caf8d…:52(anonymous function) @ environment.dev.ts:4__webpack_require__ @ bootstrap f5caf8d…:52webpackJsonpCallback @ bootstrap f5caf8d…:23(anonymous function) @ main.bundle.js:1
zone.js:463Error: Uncaught (in promise): Failed to load /component.html(…)

1. Anything else that might be helpful

This worked pre the switch to using webpack instead of broccoli.

[filipesilva]

@TheLarkInn this seems bad, probably related to the template loader. Can you add some insight?

[TheLarkInn]

Is there a link or repo to this component we can test?

[TheLarkInn]

I believe I know what's going on here but it will help to have this component as an example.

[adamduren]

@TheLarkInn @filipesilva The npm install command in the original message references this repo. https://github.com/NorthernLogic/angular-cli-imported-component-bug

[TheLarkInn]

May need to apply the angular2-template-loader to both ts and js.

[filipesilva]

I've been looking into this, and there isn't a easy solution to it right now.

Basically, there's no decent way to bundle 3rd party libs that do not inline their html/css. At the moment we use some regex to figure it out for ts files, but it's somewhat risky... it might replace stuff it shouldn't.

However risky it is for TS, it's much more so to apply it to all JS files. I tried and it immediately broke some other unrelated files. There isn't any foolproof way to regex both TS and JS files and only find templateUrl/styleUrls that are Angular 2 components, because that can't be determined just via regex. Using TS AST tools also doesn't help on the JS front, since JS isn't TS.

I talked with the team and the immediate solution is that libs should be distributed with inlined html/css. The solution in the near future is is for libs to be build with ngc which include metadata that Angular 2 needs to know this sort of stuff. We'll be making this information available as soon as possible.

I'm closing the issue then since this isn't a CLI bug per se, but rather a bigger topic that needs to be discussed in the docs or angular/angular issues.

/cc @hansl @TheLarkInn @robwormald

[adamduren]

How about things such as images that I library may include? Will it be covered by ngc as well? Also do you have any links to the discussions you mentioned? Thank you.

[filipesilva]

Actually, this is as good as any a place to discuss all this, reopening. I don't have any links to the discussions, it's ongoing.