Шаблон компонента углового меню программы не работает - PullRequest
Новая
       8

Шаблон компонента углового меню программы не работает

0 голосов
/ 16 октября 2018

Я пытаюсь добавить компонент меню в Angular 6. Все работало нормально, но шаблон компонента меню.
Проблема в том, что браузер выдает ошибку: 

Failed to compile.

./src/app/menu/menu.component.ts
Module not found: Error: Can't resolve './menu/menu.component.html' in '/home/fly/myangular/conFusion/src/app/menu'

В menu.component.ts IУ меня есть адрес templateUrl в Component decorator. 

@Component({
  selector: 'app-menu',
  template: `
    <p>
      menu worksx!
    </p>
  `,
  styles: [],
  templateUrl: './menu/menu.component.html',
  styleUrls: ['./menu/menu.component.scss']
})

И это мое menu.component.html представление: 

<div class="container"
     fxLayout="column"
     fxLayoutGap="10px">

  <mat-list fxFlex>
    <mat-list-item *ngFor="let dish of dishes">
      <img matListAvatar src={{ dish.image }} alt={{ dish.name }}>
      <h1 matLine> {{ dish.name }} </h1>
      <p matLine>
        <span> {{ dish.description }} </span>
      </p>
    </mat-list-item>
  </mat-list>

</div>

PS: Это структура моего проекта:
enter image description here

Редактировать: После исправления адреса шаблона страница стала белой, Это моя консоль: 

MenuComponent.html:7 ERROR DOMException: Failed to execute 'setAttribute' on 'Element': '}}' is not a valid attribute name.
    at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setAttribute (http://localhost:4200/vendor.js:83639:16)
    at BaseAnimationRenderer.push../node_modules/@angular/platform-browser/fesm5/animations.js.BaseAnimationRenderer.setAttribute (http://localhost:4200/vendor.js:82265:23)
    at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.setAttribute (http://localhost:4200/vendor.js:52472:23)
    at createElement (http://localhost:4200/vendor.js:49144:22)
    at createViewNodes (http://localhost:4200/vendor.js:51370:26)
    at createEmbeddedView (http://localhost:4200/vendor.js:51317:5)
    at callWithDebugContext (http://localhost:4200/vendor.js:52354:25)
    at Object.debugCreateEmbeddedView [as createEmbeddedView] (http://localhost:4200/vendor.js:51855:12)
    at TemplateRef_.push../node_modules/@angular/core/fesm5/core.js.TemplateRef_.createEmbeddedView (http://localhost:4200/vendor.js:49904:38)
    at ViewContainerRef_.push../node_modules/@angular/core/fesm5/core.js.ViewContainerRef_.createEmbeddedView (http://localhost:4200/vendor.js:49770:35)
View_MenuComponent_1 @ MenuComponent.html:7
MenuComponent.html:7 ERROR CONTEXT DebugContext_
View_MenuComponent_1 @ MenuComponent.html:7
core.js:3121 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
%7B%7B:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Это моя app.module.ts: 

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';


import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar'; 
import { FlexLayoutModule } from '@angular/flex-layout';

import 'hammerjs';
import { MenuComponent } from './menu/menu.component';

import { MatListModule } from '@angular/material/list';
@NgModule({
  declarations: [
    AppComponent,
    MenuComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    FlexLayoutModule,
    MatListModule
  ],
  providers: [],
  bootstrap: [AppComponent ]
})
export class AppModule { }

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

На самом деле я решаю проблему сам.Проблема была в menu.component.html, в строке: 

   <img matListAvatar src={{ dish.image }} alt={{ dish.name }}>

файл не может определить местоположение src без "".

, исправленной с помощью:

   <img matListAvatar src="{{ dish.image }}" alt="{{ dish.name }}">
0 голосов
/ 16 октября 2018

Компонент должен быть таким: (без стрелок) 

@Component({
  selector: 'app-menu',
  templateUrl: 'menu.component.html',
  styleUrls: ['menu.component.scss']
})
...