Tom S Tom S - 26 days ago 9
TypeScript Question

TypeScript can't find div

Trying an Angular demo and have this error about [ts] cannot find div.

import { Component } from "@angular/core";
import { FormControl } from "@angular/forms";

@Component({
selector: "main",
template: '
<div>
<label for="first-name-input">First Name:</label>
<input type="text" [formControl]="firstNameInput"
</div>',
})
export class AppComponent {

public firstNameInput: FormControl = new FormControl("");
public lastNameInput: FormControl = new FormControl("");

public message: string = "Hello World!";


}

Using Core2.0 and new Angular download. What does the above mean?

This is the tslint.json

{
"extends": "tslint:latest",
"rules": {
"arrow-parens": true,
"interface-name": [ true, "never-prefix" ],
"curly": true,
"no-var-requires": false,
"no-string-literal": false,
"no-console": [ false ],
"object-literal-sort-keys": false,
"ordered-imports": [ false ]
},
"jsRules": {
"curly": true
},
"rulesDirectory": []


}

First experience with typescript and angular.

Answer Source

It's because you are using single quotes around your multi-lined template string. With single quotes, it can't span multiple lines. It sees the line and thinks you are referencing a variable named div.

You can use ` characters (grave or back tick) instead of the single quotes, which defines a template string that can span multiple lines. Just keep in mind that it also evaluates expressions enclosed like ${...}, so you could having something like ${text} if text is a variable in scope, or even something more complicated like ${text.toUpperCase() + othertext}.