Failed to load template.html

[abalad]

I was testing my package on a new installation of Angular CLI downloading my package from NPM and when using some modules of my application I got the following error returned:

GET http://localhost:4200/button.html 404 (Not Found) 
Failed to load button.html

[abalad]

I found a solution for my case:

Within my .ts components, I was forgetting to remove the space between the ":" of templateUrl

templateUrl : './button.html',

rather than

templateUrl: './button.html',

[jvandemo]

@abalad — Thank you for posting your solution. Much appreciated! 👍

[tonysamperi]

I'd like to point out that if you have template url in a sibling folder, it doesn't work...
I had
templateUrl: "../tpl/myTemplate.html"

And I solved by using inline templates...

[karlnoelle]

I'm running into this same issue right now, and have tried both of your suggestions (space or no space between colons, and removing sibling folders in /lib) but am still running into "Failed to load button.component.html". Any other suggestions or ideas I could try?

Here's what happens when i package my library:

npm notice
npm notice 📦  pattern-library-lib@0.0.2
npm notice === Tarball Contents ===
npm notice 783B  package.json
npm notice 78B   pattern-library-lib.d.ts
npm notice 294B  public_api.d.ts
npm notice 8.2kB bundles/pattern-library-lib.umd.js
npm notice 2.7kB bundles/pattern-library-lib.umd.js.map
npm notice 1.4kB bundles/pattern-library-lib.umd.min.js
npm notice 2.7kB bundles/pattern-library-lib.umd.min.js.map
npm notice 2.0kB esm2015/lib/button.component.js
npm notice 1.6kB esm2015/lib/pattern-library-lib.component.js
npm notice 3.1kB esm2015/lib/pattern-library-lib.module.js
npm notice 839B  esm2015/lib/pattern-library-lib.service.js
npm notice 710B  esm2015/pattern-library-lib.js
npm notice 1.7kB esm2015/public_api.js
npm notice 2.2kB esm5/lib/button.component.js
npm notice 1.9kB esm5/lib/pattern-library-lib.component.js
npm notice 3.4kB esm5/lib/pattern-library-lib.module.js
npm notice 1.1kB esm5/lib/pattern-library-lib.service.js
npm notice 710B  esm5/pattern-library-lib.js
npm notice 1.7kB esm5/public_api.js
npm notice 6.2kB fesm2015/pattern-library-lib.js
npm notice 2.5kB fesm2015/pattern-library-lib.js.map
npm notice 7.0kB fesm5/pattern-library-lib.js
npm notice 2.6kB fesm5/pattern-library-lib.js.map
npm notice 148B  lib/button.component.d.ts
npm notice 151B  lib/pattern-library-lib.component.d.ts
npm notice 49B   lib/pattern-library-lib.module.d.ts
npm notice 69B   lib/pattern-library-lib.service.d.ts
npm notice === Tarball Details ===
npm notice name:          pattern-library-lib
npm notice version:       0.0.2
npm notice filename:      pattern-library-lib-0.0.2.tgz
npm notice package size:  10.2 kB
npm notice unpacked size: 55.7 kB
npm notice shasum:        381db8114fbc6c1fa31f6de1b2f327c81a465a3b
npm notice integrity:     sha512-0oVp2TOX2g2KD[...]Mx9iJk0vDtKTg==
npm notice total files:   27
npm notice
pattern-library-lib-0.0.2.tgz

I just bumped the version # to see if that was the issue, but no luck. I'd imagine there would be button.component.html button.component.scss, etc would be included in this generated list.

The error references main.ts specifically:
webpack-internal:///./src/main.ts:11

[tonysamperi]

@karlnoelle are you unsing double quotes? If yes, try single quotes.

templateUrl: 'something.html`,
styleUrls: ['something.scss']