2016-11-29 3 views
1

У меня есть этот Угловой 2 шаблона, который закладки моего веба-сайт:Угловой 2 и WebPack: неожиданный закрывающий тег «а»

<div id="menu"> 
    <ul id="tabs"> 
     <li *ngFor="let tab of tabs; let i = index" [class.active]="selectedTab===i"> 
      <a routerLink="/private/home/{{i}}">{{tab}}</a> 
     </li> 
    </ul> 
</div> 

<div class="tabContent"> 
    <span *ngIf="selectedTab==0"><welcome></welcome></span> 
    <span *ngIf="selectedTab==1"><boiler></boiler></span> 
</div> 

Он работает отлично. Затем я пытаюсь использовать Webpack с параметром по умолчанию для создания уникального файла * .js: он по-прежнему работает. Наконец, в Webpack, я активный вариант, чтобы минимизировать файл .js, и я получаю эту ошибку:

Unexpected closing tag "a" (" of tabs; let i = index" [class.active]="selectedTab===i"> 
<a routerlink=/private/home/{{i}}>{{tab}}[ERROR ->]</a> </li> </ul> </div>     
<div class=tabContent> <span *ngif="selectedTab==0"><welcome></welcome></span") 

Любую идею об этой ошибке?

Вот соответствующий код, сгенерированный Webpack:

function(t,e){t.exports='<div id=menu> <ul id=tabs> <li *ngfor="let tab of tabs; 
let i = index" [class.active]="selectedTab===i"> 
<a routerlink=/private/home/{{i}}>{{tab}}</a> </li> </ul> </div> <div class=tabContent> 
<span *ngif="selectedTab==0"><welcome></welcome></span> <span *ngif="selectedTab==1"> 
<boiler></boiler></span> </div>'} 
+0

Несколько вещей: вы с помощью 'углового-cli'? Кроме того, я удивлен, что это работает. 'routerLink' должен быть связанным свойством и принимает [массив значений] (https://angular.io/docs/ts/latest/guide/router.html#!#link-parameters-array), представляющий путь, поэтому он должен выглядеть как ''. И, наконец, есть ли причина, по которой вы используете '* ngIf' для рендеринга компонента вместо' '? Выход маршрутизатора - это более правильный способ сделать это, но мне интересно узнать, есть ли конкретный случай, требующий, чтобы это было так. – filoxo

ответ

4

Я предполагаю, что проблема с htmlLoader. В зависимости от версии вашего веб-пакета вы должны установить для параметра minimize значение false в настройке вашего веб-пакета.

WebPack 1 (в корень вашей конфигурации)

htmlLoader: { 
    minimize: false 
}, 

WebPack 2

plugins: [ 
    new webpack.LoaderOptionsPlugin({ 
     options : { 
      htmlLoader : { 
       minimize : false 
      } 
     } 
    }) 

] 
0

/частный/дом/{{я}} -> это не в "".

попробовать это для routerLink

<a [routerLink]="['/private/home/',i]">{{tab}}</a> 
+0

Спасибо. Он работает, но теперь у меня много ошибок в других файлах. Кажется, что webpack неправильно обрабатывает синтаксис Angular 2, когда файл шаблона не встроен в .ts-файлы. –

+0

Я работаю с угловой версией 2.2.x и angular-cli, и у меня есть файлы шаблонов в другом месте и выглядит нормально. Если у вас есть какие-то проблемы, давайте поможем вам. –

Смежные вопросы