title: Uncaught Error: Unexpected directive 'ProductsComponent' imported by the module 'AppModule'. Please add a @NgModule annotation
body: <p>Im trying to access the main route on my server at </p>
  
  <blockquote>
    <p><a href="http://localhost:4200" rel="nofollow noreferrer">http://localhost:4200</a></p>
  </blockquote>
  
  <p>The full error message is:</p>
  
  <blockquote>
    <p>Uncaught Error: Unexpected directive 'ProductsComponent' imported by
    the module 'AppModule'. Please add a @NgModule annotation.
        at syntaxError (compiler.es5.js:1690)
        at compiler.es5.js:15382
        at Array.forEach ()
        at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata
    (compiler.es5.js:15365)
        at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules
    (compiler.es5.js:26795)
        at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.<em>compileModuleAndComponents
    (compiler.es5.js:26768)
        at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync
    (compiler.es5.js:26697)
        at PlatformRef</em>.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.<em>bootstrapModuleWithZone
    (core.es5.js:4536)
        at PlatformRef</em>.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule
    (core.es5.js:4522)
        at Object.../../../../../src/main.ts (main.ts:11)</p>
  </blockquote>
  
  <p>Other router endpoints such as </p>
  
  <blockquote>
    <p><a href="http://localhost:4200/cart" rel="nofollow noreferrer">http://localhost:4200/cart</a></p>
  </blockquote>
  
  <p>also give the same error</p>
  
  <p>Here is my main file</p>
  
  <blockquote>
    <p>app.module.ts</p>
  </blockquote>
  
  <pre><code>    import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { Routes, RouterModule } from '@angular/router';
  
      import { AppComponent } from './app.component';
      import { ProductsComponent } from './products/products.component';
      import { CartComponent } from './cart/cart.component';
      import { MenuComponent } from './menu/menu.component';
      import { AppRoutingModule, routingComponents } from './app.routes';
  
      @NgModule({
        declarations: [
          AppComponent,
          ProductsComponent,
          CartComponent,
          MenuComponent
        ],
        imports: [
          BrowserModule,
          RouterModule,
          AppRoutingModule,
          routingComponents
        ],
        providers: [],
        bootstrap: [AppComponent,routingComponents]
      })
      export class AppModule { }
  </code></pre>
  
  <p>Here is my rooting file</p>
  
  <blockquote>
    <p>app.routes.ts</p>
  </blockquote>
  
  <pre><code>import { NgModule } from '@angular/core'; 
  import { Routes, RouterModule } from '@angular/router';
  import { ProductsComponent } from './products/products.component';
  import { MenuComponent } from './menu/menu.component';
  import { CartComponent } from './cart/cart.component';
  
  const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: 'Products' },
     { path: 'Products', component: ProductsComponent },
     { path: 'Menu', component: MenuComponent },
     { path: 'Cart', component: CartComponent },
   ];
  
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule],
   })
   export class AppRoutingModule { }
  
   export const routingComponents = [ProductsComponent, MenuComponent, CartComponent];
  </code></pre>
  
  <p>The app seems to be starting fine on my local development. </p>