Ошибка неверного символа

Question

Я получаю ERROR DOMException [InvalidCharacterError: "String contains an invalid character" code: 5 nsresult: 0x80530005 location: http://localhost:4200/vendor.bundle.js:67608] при попытке скомпилировать компонент Angular с директивой настраиваемого атрибута. Мой код для AppComponent, Директивы и базового шаблона приведен ниже:

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>

Мне интересно понять следующее: 1. Что вызывает такие ошибки? 2. Что вызвало ошибку в этом случае?

Спасибо

Answer 1

Проблема в том, что пространство в addClass не разрешено.

Я получаю гораздо более описательную ошибку при попытке сделать это

ОШИБКА DOMException: Не удалось выполнить "add" для "DOMTokenList": предоставленный токен ("ui leftAlign") содержит символы пробела HTML, которые недопустимы в токенах.

Вам нужно будет добавить два класса по отдельности.

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

На заметку вы должны ссылаться на AppComponent как this изнутри себя.

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

Answer 2

Для меня причиной этой ошибки был недопустимый символ в моем HTML. Это было вызвано ошибкой завершения кода, когда я хотел использовать не связанный атрибут HTML, но мое завершение кода выбрало связанный атрибут с квадратными скобками. Я думал, что убрал квадратные скобки, но упустил последнюю.

Поскольку Angular компилирует HTML, ваш шаблон читается как строка, и поэтому "строка содержит недопустимый символ". И трассировка стека была бесполезной, потому что она была поймана глубоко в коде компиляции HTML, поэтому не было никаких ссылок на мои файлы.

Поэтому, если вы получаете эту ошибку и трассировка стека не включает ни один из ваших файлов, но ссылается на классы с "HTML" в имени, вам необходимо выполнить поиск по вашему HTML. Надеюсь, в вашем редакторе есть подсветка ошибок для HTML, но если это не так, просто начните комментировать большие фрагменты вашего HTML, пока не выясните, в каком блоке он находится, а затем переместите его в центр. Мне потребовалось немного времени, чтобы найти эту узкую квадратную скобку там, где ее быть не должно.