CODEWITHSUNDEEP
angulartypescriptdomexception
Abrar Hossain
Abrar Hossain

Reputation: 2702

Invalid Character Error Angular

I am getting ERROR DOMException [InvalidCharacterError: "String contains an invalid character" code: 5 nsresult: 0x80530005 location: http://localhost:4200/vendor.bundle.js:67608] when trying to compile an Angular component with a custom attribute directive. My code for the AppComponent, Directive and base template is given below:

leftAlign.directive.ts

import {
  Directive,
  HostListener,
  HostBinding,
  Input,
  Output,
  ElementRef,
  Renderer2 // for host class binding
 } from '@angular/core';

@Directive({
  selector: '[leftAlign]'
})
export class LeftAlignDirective {

  public constructor(
    private el: ElementRef,
    private renderer: Renderer2
  ) {
    this.renderer.addClass(this.el.nativeElement, 'ui leftAlign');
  }
}

app.component.ts

import { Component } from '@angular/core';
import { LeftAlignDirective } from './Directives/left-align.directive';


@Component({
  selector: `app-root`,
  templateUrl: './app.component.html'
})
export class AppComponent {
  public static SemanticUiBaseDir = '../../semantic/dist/';
  public getSemanticeUiBaseDir() : string{
    return AppComponent.SemanticUiBaseDir;
  }
  public constructor() {}
}

app.component.html

!--
  @ semantic-ui.min.css
-->
<link rel="stylesheet" type="text/css" href="/home/zerocool/km-live/FrontEndComponent/semantic/dist/semantic.css">

<!--
  @ @semantic.min.js
-->
<script src="./home/zerocool/km-live/FrontEndComponent/semantic/semantic.js"></script>

<p leftAlign>This should be aligned left!</p>

I am interested in understanding the following: 1. What causes such errors? 2. What caused the error in this case?

Thanks

Upvotes: 4

Views: 11601

Answers (2)

LeftOnTheMoon
LeftOnTheMoon

Reputation: 973

For me, what caused this error was having an invalid character in my HTML. This was caused due to a code-completion mistake where I wanted the non-bound HTML attribute but my code completion chose the bound one with square brackets. I thought I removed the square brackets but I missed the trailing one.

Because Angular compiles HTML, your template is read in as a string, and thus the "string contains an invalid character". And the stack trace was worthless because it was caught deep in the HTML compilation code so there were no references to my files.

So if you get this error and the stack trace includes none of your files but makes reference to classes with "HTML" in the name, you need to go searching through your HTML. Hopefully your editor has some error highlighting for HTML but if it doesn't, just start commenting out big chunks of your HTML until you figure out which block it is in and then center-in from there. It took my eyes a little while to find that narrow, little square bracket where it shouldn't be.

Upvotes: 2

efarley
efarley

Reputation: 8681

The problem is the space in addClass, it's not allowed.

I get a much more descriptive error when I try to do this

ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('ui leftAlign') contains HTML space characters, which are not valid in tokens.

You'll need to add the two classes individually.

this.renderer.addClass(this.el.nativeElement, 'ui');
this.renderer.addClass(this.el.nativeElement, 'leftAlign');

On a side note you should refer to AppComponent as this from inside itself.

export class AppComponent {
  public static SemanticUiBaseDir = '../../semantic/dist/';
  public getSemanticeUiBaseDir() : string{
    return this.SemanticUiBaseDir; // I changed AppComponent to this here
  }
  public constructor() {}
}

Upvotes: 4

Related Questions