Strange error with prod build: angularCompilerOptions.enableResourceInlining

[Christophe HOARAU]

Hello,

I have recently upgraded my project to angular 7.x and after updating all my code everything works fine with dev build but I have a very strange error with prod build:

ERROR in : Error: Cannot handle async resource. angularCompilerOptions.enableResourceInlining requires all resources to be statically resolvable.
    at Object.get (S:\syscea\node_modules\@angular\compiler-cli\src\transformers\inline_resources.js:33:31)
    at S:\syscea\node_modules\@angular\compiler-cli\src\transformers\inline_resources.js:261:43
    at Array.forEach (<anonymous>)
    at updateComponentProperties (S:\syscea\node_modules\@angular\compiler-cli\src\transformers\inline_resources.js:232:33)
    at updateDecorator (S:\syscea\node_modules\@angular\compiler-cli\src\transformers\inline_resources.js:120:28)
    at S:\syscea\node_modules\@angular\compiler-cli\src\transformers\inline_resources.js:95:32
    at Object.visitNodes (S:\syscea\node_modules\typescript\lib\typescript.js:62256:48)
    at visitor (S:\syscea\node_modules\@angular\compiler-cli\src\transformers\inline_resources.js:93:40)
    at visitNodes (S:\syscea\node_modules\typescript\lib\typescript.js:62256:48)
    at visitLexicalEnvironment (S:\syscea\node_modules\typescript\lib\typescript.js:62289:22)
    at Object.visitEachChild (S:\syscea\node_modules\typescript\lib\typescript.js:62593:54)
    at S:\syscea\node_modules\@angular\compiler-cli\src\transformers\inline_resources.js:105:23
    at S:\syscea\node_modules\typescript\lib\typescript.js:1354:86
    at reduceLeft (S:\syscea\node_modules\typescript\lib\typescript.js:1066:30)
    at S:\syscea\node_modules\typescript\lib\typescript.js:1354:42
    at transformRoot (S:\syscea\node_modules\typescript\lib\typescript.js:79271:82)

After hours to try to find out where I could have make a mistake the error seems to occurs whenever I use templateUrl or styleUrl to resolve to local file (as I used to do till now).

So in ANY of my components if I use template: "my html code" to works fine, but as soon as I use this syntax templateUrl: "./test.html" the compilation does not work anymore.

This is driving me crazy. If this was that simple I would have found hundreds of report about this issue but this is not the case so I suspect the issue is more complex.

In the end I don't know if this is a bug with angular or angular-cli, or if it's an issue somewhere in my workspace.

Any help would be very appreciated.

Thanks.

[Sander Elias]

Hi Christophe,

Can you try updating to CLI 7.1.0? and give it another spin? Sounds like a bug in the CLI, but as you said, that would be strange.

Regards

Sander

[Christophe HOARAU]

Hi Sander,

Thanks I have just tried with latest version of angular and cli and I still have the same issue.

Switching back to 6.x everything works again.

I have opened a cli issue but I'm quite surprise to be the first one to report this case. I know lots of people are using the inline syntax but I can't be the only one to have encountered this case. Maybe there's something special in my workspace but I couldn't find out what it is.

Best regards.

[Sander Elias]

Hi Christophe,

I'm on 7, and have no issues with separate template files. So, it's not a common problem. (I have a couple of different project on 7, and they all use external templates.

Regards

Sander

[Christophe HOARAU]

Thanks that's what I was afraid of. If my case is not reproducible it won't get any fix.

I really don't know where it could comes from. My project is quite complex and not public so I might never be able to isolate the issue.

But it's working fine in v6.x so there must be a breaking change somewhere and I might be on the edge case.

Is there anyway to dig into the issue to find out what's wrong ?

By the way, I don't know if it's important or not, I'm using angular workspace with libraries and applications. Only applications build (with AOT) create this issue. If I'm right libraries are compiled with AOT, and does not generate the error.

And if I'm not wrong, with or without AOT inlining process should be the same, AOT only add additional precompilation of the html code so this error is a non sense to me.

[Sander Elias]

I'm building complex apps too, with libs and multiple apps in there. and AOT.

It would help if you could build a small reproduction of your issue. It's hard to diagnose without a reproduction.

Regards

Sander

[Christophe HOARAU]

Angular cli team found a solution to my issue (https://github.com/angular/angular-cli/issues/13070#issuecomment-442570051), it was a misconfiguration in my tsconfig file.

An option that should not have been used here but wasn't creating an error prior v7.x

Thanks for your help

[Gian Uberto Lauri]

On Thursday, November 29, 2018 at 8:48:25 AM UTC+1, Christophe HOARAU wrote:

Angular cli team found a solution to my issue (https://github.com/angular/angular-cli/issues/13070#issuecomment-442570051), it was a misconfiguration in my tsconfig file.

An option that should not have been used here but wasn't creating an error prior v7.x

Sorry to bother you Crhistophe, but invoking the npm build with the --aot switch enables aot and things are inlined whenever possible even with the flag set to false?