Webpack build breaks ability to use npm installed custom components #1624

adamduren · 2016-08-10T13:22:14Z

OS?
Mac OSX El Capitan
Versions.

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

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

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(…)

Anything else that might be helpful

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

The text was updated successfully, but these errors were encountered:

filipesilva · 2016-08-16T16:28:36Z

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

TheLarkInn · 2016-08-16T16:33:36Z

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

TheLarkInn · 2016-08-16T16:40:09Z

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

adamduren · 2016-08-16T16:59:08Z

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

TheLarkInn · 2016-09-10T01:18:26Z

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

filipesilva · 2016-09-12T02:56:48Z

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 · 2016-09-13T03:18:59Z

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 · 2016-09-15T17:23:34Z

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.

serhiisol · 2017-01-12T15:05:54Z

@filipesilva I have similar problem I've described in #3274 (comment)

filipesilva · 2017-02-13T16:28:58Z

A couple of months have passed since this issue was opened and even though there isn't much more to say, I want to give an update before closing it.

As far as libraries go, they should always inline html and css and be AoT ready. There isn't yet a published chapter about this on angular.io, but there's one in the works that needs a bit more work: angular/angular.io#2758

Images and other resources have to either be inlined, or somehow provided for the application to use. TSC doesn't do anything with these, as far as I know.

When the CLI has a library move (tracked in #1692) it should do all of this for you. Until then third party libraries have to do it themselves without the CLI.

magemello · 2017-02-14T00:17:15Z

Why don't you add a custom loader in webpack that does the replace example:
templateUrl: './test.component.html' -> template: require('./test.component.html')

or you allow adding custom loaders to the webpack in the cli?

filipesilva · 2017-02-14T00:26:31Z

Because that regex replacement might look fine for Angular components, but will also break any other third party library that happens to use those strings. We tried regex replacements for a while, and it's really not worth it. There's also no decent way to figure out which JS or TS files are Angular components.

magemello · 2017-02-14T09:58:31Z

The modules that would require something like that could be explicitly configured somewhere in the package.json with the others angular-cli options, also I suppose are not a lot the modules that would require something like that.

example package.json :

{
fiximport: [
../node_modules/my_external_component
]
}

angular-automatic-lock-bot · 2019-09-06T18:40:54Z

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

This was referenced Aug 10, 2016

Component relative paths are not being respected angular/angular#10614

Closed

How to add external libs to webpack.2 , angular-cli 1.0.0-beta11 #1668

Closed

filipesilva added type: bug/fix P1 Impacts a large percentage of users; if a workaround exists it is partial or overly painful feature: webpack labels Aug 16, 2016

filipesilva assigned TheLarkInn Sep 12, 2016

filipesilva closed this as completed Sep 12, 2016

filipesilva reopened this Sep 15, 2016

hansl assigned filipesilva Feb 3, 2017

filipesilva mentioned this issue Feb 13, 2017

Missing template .html file for node_modules dependency #3274

Closed

filipesilva closed this as completed Feb 13, 2017

11joselu mentioned this issue Feb 18, 2017

Improve/Create build process for lib dalestone/angular2-gantt#26

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webpack build breaks ability to use npm installed custom components #1624

Webpack build breaks ability to use npm installed custom components #1624

adamduren commented Aug 10, 2016

filipesilva commented Aug 16, 2016

TheLarkInn commented Aug 16, 2016

TheLarkInn commented Aug 16, 2016

adamduren commented Aug 16, 2016

TheLarkInn commented Sep 10, 2016

filipesilva commented Sep 12, 2016

adamduren commented Sep 13, 2016

filipesilva commented Sep 15, 2016

serhiisol commented Jan 12, 2017 •

edited

Loading

filipesilva commented Feb 13, 2017

magemello commented Feb 14, 2017 •

edited

Loading

filipesilva commented Feb 14, 2017

magemello commented Feb 14, 2017 •

edited

Loading

angular-automatic-lock-bot bot commented Sep 6, 2019

Webpack build breaks ability to use npm installed custom components #1624

Webpack build breaks ability to use npm installed custom components #1624

Comments

adamduren commented Aug 10, 2016

filipesilva commented Aug 16, 2016

TheLarkInn commented Aug 16, 2016

TheLarkInn commented Aug 16, 2016

adamduren commented Aug 16, 2016

TheLarkInn commented Sep 10, 2016

filipesilva commented Sep 12, 2016

adamduren commented Sep 13, 2016

filipesilva commented Sep 15, 2016

serhiisol commented Jan 12, 2017 • edited Loading

filipesilva commented Feb 13, 2017

magemello commented Feb 14, 2017 • edited Loading

filipesilva commented Feb 14, 2017

magemello commented Feb 14, 2017 • edited Loading

angular-automatic-lock-bot bot commented Sep 6, 2019

serhiisol commented Jan 12, 2017 •

edited

Loading

magemello commented Feb 14, 2017 •

edited

Loading

magemello commented Feb 14, 2017 •

edited

Loading