Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webpack build breaks ability to use npm installed custom components

See original GitHub issue

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.

Issue Analytics

State:
Created 7 years ago
Comments:14 (9 by maintainers)

Top GitHub Comments

2reactions

filipesilvacommented, Feb 13, 2017

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: https://github.com/angular/angular.io/pull/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 https://github.com/angular/angular-cli/issues/1692) it should do all of this for you. Until then third party libraries have to do it themselves without the CLI.

0reactions

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

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

Top Results From Across the Web

How to Prevent Webpack Error after npm Install?

For loader options: webpack 2 no longer allows custom properties in configuration. Loaders should be updated to allow passing options via loader options...

Tree Shaking

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module...

v5 used to include polyfills for node.js core modules by ...

node_modules/dotenv/lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case.

The best webpack configurations for React applications

If you've struggled to configure webpack for your React app, look no further. We cover both generic and specific config needs.

How to Create and Publish a React Component Library

This tutorial will take you through the process of creating and publishing your own custom React component library and hosting it on Github....