无法在angular6中使用键值为'templateUrl'的对象

Question

I have the below object in component.ts and I am going to iterate this array in the HTML template inside ui-comp-menu.

menuObject = [{
        'labels': 'Content1',
        'templateUrl': 'assets/partials/sample.html',
        'childrens': [],
    },
    {
        'labels': 'Content2',
        'templateUrl': 'assets/partials/sample1.html',
    }];

and in the html

<ui-comp-menu [data]="menuObject" [label]="'labels'" [url]="'routeUrl'" ></ui-comp-menu>

But while compiling I got the below error

ERROR in ./src/app/app.component.ts

Module not found: Error: Can't resolve './assets/partials/UserAdministration.html' in 'D:\\POC_Angular_6\\lib-demo\\src\\appI

If i change the object key 'templateUrl' to some other name like 'templatePath' issue won't come and compiled successfully. But i am not sure about previous angular versions.

Answer 1

This is a bug from the angular-cli package. When you check the source code you can see that they are parsing the entire .ts file and subtracting any object in there. Then they are checking if there is an object with a templateUrl or styleUrls key in there.

This seems a bit erratic, and could be done more properly. For instance to check if the subtracted object is inside an annotation ( @Component ).

Couple things you can do here:

• Submit a bug report, wait for them to fix it, and in the meantime replace the key with something else
• Make your own pull request, wait for them to accept it, and etc...
• You say that the data comes from an API, if that's the case, you don't really need to have those hard coded templateUrl definitions inside your typescript file. Connecting to the API and removing those from your code should be enough.
• Change the key from the API and just keep it at that