v7 Regression: Component cannot define both template and templateUrl

[ahnpnl]

I tried to do some regression tests on our alpha version. It turned out the fix for templateUrl doesn't work for all cases. I attach here an example when it fails with 7.0.0-alpha.1 but works with 6.0.2.

Step to reproduce

• Clone the example from https://github.com/ahnpnl/preset-angular-bug
• Install dependencies with yarn
• Run test on alert-follow.component.spec.ts

Error log

Error: 'AlertFollowComponent' component cannot define both template and templateUrl

      at syntaxError (../packages/compiler/src/util.ts:100:17)
      at DirectiveNormalizer.Object.<anonymous>.DirectiveNormalizer.normalizeTemplate (../packages/compiler/src/directive_normalizer.ts:68:15)
      at CompileMetadataResolver.Object.<anonymous>.CompileMetadataResolver.loadDirectiveMetadata (../packages/compiler/src/metadata_resolver.ts:260:54)
      at ../packages/compiler/src/jit/compiler.ts:135:36
          at Array.forEach (<anonymous>)
      at ../packages/compiler/src/jit/compiler.ts:133:65
          at Array.forEach (<anonymous>)
      at JitCompiler.Object.<anonymous>.JitCompiler._loadModules (../packages/compiler/src/jit/compiler.ts:130:71)
      at JitCompiler.Object.<anonymous>.JitCompiler._compileModuleAndAllComponents (../packages/compiler/src/jit/compiler.ts:115:32)
      at JitCompiler.Object.<anonymous>.JitCompiler.compileModuleAndAllComponentsSync (../packages/compiler/src/jit/compiler.ts:65:38)
      at CompilerImpl.Object.<anonymous>.CompilerImpl.compileModuleAndAllComponentsSync (../packages/platform-browser-dynamic/src/compiler_factory.ts:60:35)
      at TestingCompilerImpl.Object.<anonymous>.TestingCompilerImpl.compileModuleAndAllComponentsSync (../../packages/platform-browser-dynamic/testing/src/compiler_factory.ts:52:27)
      at TestBedViewEngine.Object.<anonymous>.TestBedViewEngine._initIfNeeded (../../packages/core/testing/src/test_bed.ts:399:28)
      at TestBedViewEngine.Object.<anonymous>.TestBedViewEngine.createComponent (../../packages/core/testing/src/test_bed.ts:602:10)
      at Function.Object.<anonymous>.TestBedViewEngine.createComponent (../../packages/core/testing/src/test_bed.ts:251:36)
      at src/__tests__/components/alert-follow.component.spec.ts:20:23

I think ast transformer doesn't understand overrideComponent of TestBed or something happens there.

cc @wtho @thymikee

[wtho]

Yeah, good catch!

The astTransformer modifies the component when it is loaded by jest through ts-jest. When the metadata is overridden in alert-follow.component.spec, it already is the transformed and transpiled version with template. If you then set templateUrl: '<path-to-mock>', it will be added next to template in the metadata, instead of overriding it. That leads to the compiler complaints about both assignments being defined.

Possible solutions

• Ask the users of this preset to only set template: require(<path-to-mock>]) in tests
• let the transformer also process .spec files that set templateUrl (I guess the regex used before also transformed tests)

Basically we could not only look inside decorators, but transform any assignment named templateUrl to template + require. I am not sure if there might be other assignments in Angular projects that would use templateUrl in a different context.

[ahnpnl]

I think the 1st solution is not a good way to go because overrideComponent to set a different templateUrl with path as a string is a usual pattern the Angular devs would want to have. I think we should go for the 2nd one. So far I've seen templateUrl is available only to @Component. I guess we can go with your suggestion

but transform any assignment named templateUrl to template + require