CODEWITHSUNDEEP
angulartypescriptasp.net-core-2.0
Tom S
Tom S

Reputation: 227

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.

Upvotes: 0

Views: 2423

Answers (2)

Chris McCabe
Chris McCabe

Reputation: 60

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}.

Upvotes: 1

Tamas Hegedus
Tamas Hegedus

Reputation: 29906

This is a simple syntax error. The template should he a multiline string literal, which is enclosed by backticks (`) instead of single quotes.

Upvotes: 0

Related Questions