0

i was updating out project to the latest Angular 5 version and after some version adaptations it still failed. So i created a fresh new angular-project based on the current version (@angular/cli 1.5.0, @angular/* 5.0.0) and started to hunt down the problems.

It turned out, that e.g. using string interpolation in an Decorator does not get recognized anymore. Outside, e.g. in an console.log-output, it worked fine.

I tried it out on default generated AppComponent:

import { Component } from '@angular/core';

const name = 'app';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [`./${name}.component.css`]
})
export class AppComponent {
  title = 'app';

}

The result is a large exception where you can see that angular tries to locate the resources like:

src/./${name}.component.css.ts doesn't exist

Does anyone has a hint what went wrong here and/or can me point in the right direction?

Update: After a response from the angular-community, it seems more like an issue for @angular/cli / webpack.

Aravind
  • 40,391
  • 16
  • 91
  • 110
Thomas Sittig
  • 121
  • 3

1 Answers1

0

This is because the Typescript compiler is only building the TS into JS. And not executing the TS. At the time of compiling the code, the compiler is not aware of any runtime variables.

You can only use the string interpolation in the parts of the code that will be executed at runtime.

Amr M. AbdulRahman
  • 1,820
  • 3
  • 14
  • 22
  • Based on your answer, it shouldn't work in the previous version 4 of angular. But it does. – Thomas Sittig Nov 09 '17 at 11:25
  • I see, as per the breaking changes in the release notes of ng5. you should maybe add @angular/platform-browser-dynamic See here: https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes – Amr M. AbdulRahman Nov 09 '17 at 11:35
  • @angular/platform-browser-dynamic is already defined as a dependency, when creating a fresh new angular application. As seen in this basic simple out of the box example repro for this issue: https://github.com/thomassittig/angular5-string-interpolation-error – Thomas Sittig Nov 09 '17 at 11:40