angular: ERROR in templateUrl must be a string in Angular 9.0.0-rc.3

🐞 bug report

Is this a regression?

Yes, the previous version in which this bug was not present was: 8.2.14

Description

This error appears at templateUrl. Although I fixed it with template: require(template + '') but the error still exists.

export class DynamicListService {
  addComponent(name, template: string) {
    @Component({
      selector: "app-tmp-" + name,
      templateUrl: (template + '')
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    })

🔥 Exception or Error

ERROR in templateUrl must be a string

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.0-rc.3
Node: 13.0.1
OS: win32 x64
Angular: 9.0.0-rc.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.900.0-rc.3
@angular-devkit/build-angular      0.900.0-rc.3
@angular-devkit/build-optimizer    0.900.0-rc.3
@angular-devkit/build-webpack      0.900.0-rc.3
@angular-devkit/core               9.0.0-rc.3
@angular-devkit/schematics         9.0.0-rc.3
@angular/cdk                       8.2.3
@angular/material                  8.2.3
@angular/material-moment-adapter   8.2.3
@ngtools/webpack                   9.0.0-rc.3
@schematics/angular                9.0.0-rc.3
@schematics/update                 0.900.0-rc.3
rxjs                               6.5.3
typescript                         3.6.4
webpack                            4.41.2

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 23 (13 by maintainers)

Most upvoted comments

@cocolink021195 What I can see and understand till the moment doesn’t block you to create some general component (+ some type dynamic styling, probably using CSS custom properties), which allows you to satisfy your customer’s needs. All without the necessity of processing dynamic HTML code.

You need to re-think the whole thing in a more abstract way and create a general interface that allows you to cover the combination on the customers’ side and keep the necessary level of integration on your backend. Such an interface offers your customers UI tools/widgets for creating a full spectrum of different list layouts but still covered by a small number of Angular key components (+ internal directives, pipes, …). It’ll be with some limits, of course, but still very broad for any of your customers.

Again, you are still talking a lot about ListComponent but I don’t think that’s your key problem. The problem is, that you are mentally fixed to the idea of hundreds of standalone templates (probably on the base of your previous background).

Customers’ requests are one thing but on the other side, you have to be able to abstract those requests to the usable and functional solution. I am not sure what you want to reach. Without Angular compiler in run-time, you can’t compile HTML code together with components, directives and so. And if you inject it, you have a problem with performance, security, testing, and so on.

mlc-mlapis on Nov 25, 2019

@DenysVuika @mlc-mlapis Haiz. I understand your comment. But that only applies to regular projects. Again, my project has hundreds of ListTemplate and customers can edit the template of List to their liking. Ex: Image 1 Image 2 You can’t create hundreds of ListComponent and then modify it according to customer needs. Because many customers use the software, you cannot fix it for each customer and if you do, each software upgrade is a nightmare. You also can’t use innerHTML because ListComponents needs to use Components, Directives, Pipes. I thought you would think of using javascript but that was terrible. Currently, my project compiles with production AOT. And file.html of templateUrl: (template + '') I have my own security measures. I think that if you tell your boss that you can’t do it according to the customer’s request because as your comment above, I think you’re a bad developer.

cocolink021195 on Nov 25, 2019

@mlc-mlapis yes, I fully agree. I am personally against the whole idea of having 1000 list components compiled at runtime. I would go either introducing some notation/configuration to build the list dynamically based on column schema (pretty easy) or in the worst case, having a tool to generate components at a build stage.

DenysVuika on Nov 25, 2019

@cocolink021195 As in here #15275, if you need dynamically load a template, then you have a mistake in your architecture, rethink what/how you need to do your task without this stupid idea that called dynamic template loading

Thank you very much, your support is greatly appreciated. Now I know that Angular will not support this feature. I should find another framework.

cocolink021195 on Nov 26, 2019

@cocolink021195 In my opinion, you should have 1 component that dynamically changes its content (an so has single template/templateUrl), rather than hundreds of dynamically generated components. But it’s your call anyway.

DenysVuika on Nov 25, 2019

@cocolink021195 Where did you see, that syntax like templateUrl: (template + '') is available to use?

mlc-mlapis on Nov 25, 2019