[$compile:tpload] Failed to load template

[ptomaszi]

The component I am testing is using the "templateUrl" to provide a template:

import { Component, Inject, Input, Output, EventEmitter, OnChanges } from 'ng-metadata/core';

@Component({
    selector: 'diContactList',
    templateUrl: 'src/app/portal/parties/contacts/list/contact-list.component.html'
})
export class ContactListComponent implements OnChanges {

Then I have a corresponding unit test:

import { bundle, getInjectableName, NgModule, Component } from 'ng-metadata/core';

describe('ContactListComponent', () => {
    @Component({
        selector: 'test-component',
        template: `
            <di-contact-list>
            </di-contact-list>`
    })
    class TestComponent {
        constructor() {}
    }
    @NgModule({
        declarations: [TestComponent, ContactListComponent]     
    })
    class TestNgModule { } 
    
    let $compile: ng.ICompileService;
    let $rootScope: ng.IRootScopeService;
    let $scope: ng.IScope;
    let render: IRender<TestComponent>;
    let sut: ContactListComponent;
    
    beforeEach(() => {
        const TestModule: string = bundle(TestNgModule).name;
        ng.mock.module(TestModule);
    });

    beforeEach(ng.mock.inject(function($injector: ng.auto.IInjectorService) {
        $compile = $injector.get<ng.ICompileService>('$compile');
        $rootScope = $injector.get<ng.IRootScopeService>('$rootScope');
        $scope = $rootScope.$new();
        
        render = renderFactory($compile, $scope);
        sut = render(ContactListComponent).ctrl;
    }));

When run I am getting the following error:

Error: [$compile:tpload] Failed to load template: src/app/portal/parties/contacts/list/contact-list.component.html (HTTP status: undefined undefined)
http://errors.angularjs.org/1.6.5/$compile/tpload?p0=src%2Fapp%2Fportal%2Fparties%2Fcontacts%2Flist%2Fcontact-list.component.html&p1=undefined&p2=undefined

When I remove templateUrl or replace with template in the component, unit tests run correctly.

[ArtemGovorov]

I don't have much experience with AngularJs 1.x, and no experience at all with ng-metadata, so not even sure how is it supposed to work (outside of wallaby.js context).

I know that wallaby/karma users for Angular 2/4 projects are using the angular2-template-loader webpack loader to process templateUrls, you may see the example here: https://github.com/wallabyjs/ngCliWebpackSample/blob/master/wallaby.js#L21 (plus html loader https://github.com/wallabyjs/ngCliWebpackSample/blob/master/wallaby.js#L19). Try this approach and if it doesn't work, please share a sample Github project with a working karma config and the error from wallaby - I'll just take the way you have it working in karma and will help creating a similar wallaby config.

[ptomaszi]

Hi,

I have created a sample project which has "my.component.ts" and "my.component.spec.ts" files. The "ng-metadata" allows you to write Angular 1 components using the Angular 2 syntax. When you run tests you will get results 1 pass and 1 fail. But if you change the templateUrl to be just template then all tests will run.

https://github.com/ptomaszi/wallaby_webpack

[ArtemGovorov]

Thanks for setting up the repo.

I have created this pull request to make wallaby config work. Here are some notes about the changes:

• Commented out this rule of yours because it is not a valid rule for the current version of webpack you are using in the sample repo.
• added .html files to the files list, because wallaby needs all used files to be listed.
• Set the instrument: false flag for libraries. The instrument boolean property (true by default) determines whether the file is instrumented. Setting the property to false disables the file code coverage reporting and may prevents the file changes from triggering automatic test execution. The setting should normally be set to false for libraries, utils and other rarely changing files. Using the setting makes wallaby.js run your code faster, as it doesn’t have to perform unnecessary work.
• Added angular2-template-loader and html-loader as I was suggesting above (also to the package.json, should be in devDependencies though).
• Changed the templateUrl to a relative path. According ng-metadata docs, it is the way to do it:
  https://github.com/ngParty/ng-metadata/blob/master/README.md#the-gist
  https://github.com/ngParty/ng-metadata/blob/master/docs/recipes/component.md
• Added missing rxjs dependency required by ng-metadata.

If you have a different setup, and some of my changes can not be applied to it, then please update the sample repo with something close to your setup (including working versions of all dependencies) and add your working karma config, so I could just take the way you load/process things there to apply the same in your wallaby config.

[ptomaszi]

Hi @ArtemGovorov ,

I tried the solution on my project, but it did not work. I created another repository which mimics my DEV project and could you please have a look that why wallaby fails to load a template?

https://github.com/ptomaszi/portal

[ArtemGovorov]

I have sent you the pull request https://github.com/ptomaszi/portal/pull/1.

Wallaby renames .ts files to .js when it compiles them (before webpack compilation), so as specified in the docs, when specifying your file paths in context of webpack entryPatterns and module.rules, you need to use the .js extension, just like I did in the previous sample.

I have also commented out a couple of templateUrl to some .html files that are missing in the project.

Using angular2-template-loader is just one way to make it work, and I was asking for your working karma config in order to see if wallaby config can be closer to your karma config in this regard, but unfortunately your karma config in the provided project doesn't work.

[ptomaszi]

By changing the templateUrl to be a relative path to HTML file, makes wallaby happy, but when compiled to bundle by webpack and try to run the site, it cannot find the HTML by relative path. Maybe there is an option on the webpack to specify how to resolve templateUrls?

[ArtemGovorov]

angular2-template-loader transforms templateUrl paths to relative paths, so webpack options (like additional module paths) will not help here (because the path is relative).

As specified in the ng-metadata docs:
https://github.com/ngParty/ng-metadata/blob/master/README.md#the-gist
https://github.com/ngParty/ng-metadata/blob/master/docs/recipes/component.md
the paths have to be specified as relative paths (try following the links and searching for templateUrls - they're all relative).

I'm not sure how your bundle works with absolute paths. I can't test it, because your sample project build doesn't work (and can't test how it works in karma because it also doesn't work). Your webpack config doesn't have anything to bundle templates and the committed bundle file in your project has absolute paths with templateUrl pointing to your src folder.

• How is your bundle supposed to work in production if it is referencing HTML templates like this templateUrl: 'src/app/portal/parties/contacts/list/contact-list.component.html'?
• Do you have a working karma config? If it's working in karma, I can just configure wallaby to do the same.

[ArtemGovorov]

Just a thought - perhaps you need to add angular2-template-loader or similar to your production bundle build so that HTML templates are resolved and inlined (which is exactly what wallaby is using angular2-template-loader for)?

[ptomaszi]

Yep that works now! Thanks for your support. @ArtemGovorov is there any support for debugging using the wallabyjs?

[ArtemGovorov]

@ptomaszi Awesome, thanks for the update!

is there any support for debugging using the wallabyjs?

Wallaby supports very powerful realtime logging that can be used for debugging. I'd specifically recommend checking out the special live comments feature. With the feature you may see any values of any expressions anywhere in your code, even without setting any breakpoints and also in places where you simply can't set a classical breakpoint.

There's also this feature request for the classic debugger that you're already subscribed too.

[bcaleroCS]

disclaimer: im not fluent in English
After many posts of this issue and searching on many pages, i found that the problem on my case was caused by $httpProvider.interceptors.push .... because i had a mistake setting a header on request, i deleted it and , done ... my problem was solved ... i hope that maybe this would help you