Angular程序菜单组件模板不起作用

Question

我正在尝试在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中，我在组件装饰器中有templateUrl地址。

@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：这是我的项目结构：

---

编辑： 固定模板地址后，页面变白， 这是我的控制台：

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

Answer 1

该组件应如下所示：（无箭头）

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

Answer 2

实际上我是自己解决问题的。问题出在menu.component.html下， 在该行中：

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

没有src的文件将无法识别""的位置。

固定于：

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