Templat komponen menu program sudut tidak berfungsi

Saya mencoba menambahkan komponen menu di Angular 6. Semua berfungsi dengan baik tetapi templat komponen menu.
Masalahnya adalah browser memberikan kesalahan:

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'

Di menu.component.ts saya memiliki alamat templateUrl di dekorator Komponen.

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

Dan ini adalah pandangan menu.component.html saya:

<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: Ini adalah struktur proyek saya:

Edit: Setelah memperbaiki alamat template, halaman menjadi putih, Ini konsol saya:

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)

Ini app.module.ts saya:

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