title: Module parse failed: ... Unexpected token. You may need an appropriate loader to handle this file type
body: <p>I am learning how to create .NET Core with Angular 4 applications.</p>
  
  <p>Now I am migrating my app from Core 1.1 - Angular 4.1.2 to Core 2.0 - Angular 4.3.6.</p>
  
  <p>In the old version I didn't use webpack. Now I am using it for angular/cli, ngx-translate and others.</p>
  
  <p>I was able to publish the old version to Azure or locally, but not this one because I get these errors:</p>
  
  <pre><code>    ERROR in ./$$_gendir/node_modules/angular2-flash-messages/module/flash-messages.component.ngfactory.ts
      Module parse failed: C:\Users\Andrei\ECV\ECV\$$_gendir\node_modules\angular2-flash-messages\module\flash-messages.component.ngfactory.ts Unexpected token (13:35)
      You may need an appropriate loader to handle this file type.
      | import * as i2 from 'angular2-flash-messages/module/flash-messages.component';
      | import * as i3 from 'angular2-flash-messages/module/flash-messages.service';
      | const styles_FlashMessagesComponent:any[] = ([] as any[]);
      | export const RenderType_FlashMessagesComponent:i0.RendererType2 = i0.╔╡crt({encapsulation:2,
      |     styles:styles_FlashMessagesComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/components/app/app.component.ngfactory.ts 13:0-126
       @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts
       @ ./ClientApp/boot.server.ts
  
      ERROR in ./$$_gendir/node_modules/ng2-auto-complete/dist/ng2-auto-complete.component.ngfactory.ts
      Module parse failed: C:\Users\Andrei\ECV\ECV\$$_gendir\node_modules\ng2-auto-complete\dist\ng2-auto-complete.component.ngfactory.ts Unexpected token (15:37)
      You may need an appropriate loader to handle this file type.
      | import * as i4 from 'ng2-auto-complete/dist/ng2-auto-complete';
      | import * as i5 from '@angular/http';
      | const styles_Ng2AutoCompleteComponent:any[] = ['\n  @keyframes slideDown {\n    0% {\n      transform:  translateY(-10px);\n    }\n    100% {\n      transform: translateY(0px);\n    }\n  }\n  .ng2-auto-complete {\n    background-color: transparent;\n  }\n  .ng2-auto-complete &gt; input {\n    outline: none;\n    border: 0;\n    padding: 2px; \n    box-sizing: border-box;\n    background-clip: content-box;\n  }\n\n  .ng2-auto-complete &gt; ul {\n    background-color: #fff;\n    margin: 0;\n    width : 100%;\n    overflow-y: auto;\n    list-style-type: none;\n    padding: 0;\n    border: 1px solid #ccc;\n    box-sizing: border-box;\n    animation: slideDown 0.1s;\n  }\n  .ng2-auto-complete &gt; ul.empty {\n    display: none;\n  }\n\n  .ng2-auto-complete &gt; ul li {\n    padding: 2px 5px;\n    border-bottom: 1px solid #eee;\n  }\n\n  .ng2-auto-complete &gt; ul li.selected {\n    background-color: #ccc;\n  }\n\n  .ng2-auto-complete &gt; ul li:last-child {\n    border-bottom: none;\n  }\n\n  .ng2-auto-complete &gt; ul li:hover {\n    background-color: #ccc;\n  }'];
      | export const RenderType_Ng2AutoCompleteComponent:i0.RendererType2 = i0.╔╡crt({encapsulation:2,
      |     styles:styles_Ng2AutoCompleteComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 12:0-115
       @ ./ClientApp/boot.server.ts
  
      ERROR in ./$$_gendir/node_modules/ng2-toasty/src/toasty.component.ngfactory.ts
      Module parse failed: C:\Users\Andrei\ECV\ECV\$$_gendir\node_modules\ng2-toasty\src\toasty.component.ngfactory.ts Unexpected token (15:28)
      You may need an appropriate loader to handle this file type.
      | import * as i4 from 'ng2-toasty/src/toasty.component';
      | import * as i5 from 'ng2-toasty/src/toasty.service';
      | const styles_ToastyComponent:any[] = ([] as any[]);
      | export const RenderType_ToastyComponent:i0.RendererType2 = i0.╔╡crt({encapsulation:2,
      |     styles:styles_ToastyComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/components/to-do/to-do-list.component.ngfactory.ts 11:0-102
       @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts
       @ ./ClientApp/boot.server.ts
  
      ERROR in ./$$_gendir/node_modules/ngx-modialog/plugins/bootstrap/src/ngx-modialog-bootstrap.ng-flat.ngfactory.ts
      Module parse failed: C:\Users\Andrei\ECV\ECV\$$_gendir\node_modules\ngx-modialog\plugins\bootstrap\src\ngx-modialog-bootstrap.ng-flat.ngfactory.ts Unexpected token (14:42)
      You may need an appropriate loader to handle this file type.
      | import * as i3 from '@angular/common';
      | import * as i4 from 'ngx-modialog';
      | export const BootstrapModalModuleNgFactory:i0.NgModuleFactory&lt;i1.BootstrapModalModule&gt; = i0.╔╡cmf(i1.BootstrapModalModule,
      |     ([] as any[]),(_l:any) =&gt; {
      |       return i0.╔╡mod([i0.╔╡mpd(512,i0.ComponentFactoryResolver,i0.╔╡CodegenComponentFactoryResolver,
       @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 11:0-130
       @ ./ClientApp/boot.server.ts
  
      ERROR in ./$$_gendir/node_modules/ngx-modialog/src/ngx-modialog.ng-flat.ngfactory.ts
      Module parse failed: C:\Users\Andrei\ECV\ECV\$$_gendir\node_modules\ngx-modialog\src\ngx-modialog.ng-flat.ngfactory.ts Unexpected token (12:33)
      You may need an appropriate loader to handle this file type.
      | import * as i1 from 'ngx-modialog';
      | import * as i2 from '@angular/common';
      | export const ModalModuleNgFactory:i0.NgModuleFactory&lt;i1.ModalModule&gt; = i0.╔╡cmf(i1.ModalModule,
      |     ([] as any[]),(_l:any) =&gt; {
      |       return i0.╔╡mod([i0.╔╡mpd(512,i0.ComponentFactoryResolver,i0.╔╡CodegenComponentFactoryResolver,
       @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 10:0-102
       @ ./ClientApp/boot.server.ts
  </code></pre>
  
  <p>These are all additional libraries installed. </p>
  
  <p>I am able to run the project locally though.</p>
  
  <p>I did run the commad:</p>
  
  <pre><code>webpack --config webpack.config.vendor.js
  </code></pre>
  
  <p>in the root of my project.</p>
  
  <p>I do not know what I should write and where in order for webpack to be able to load correctly these libraries.</p>
  
  <p>I presume it must be in webpack.config.js (from what I have read on the internet), but what I found were solutions for React or I didn't knew where to add the changes.</p>
  
  <p>My webpack.config.js is:</p>
  
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const merge = require('webpack-merge');
  const AotPlugin = require('@ngtools/webpack').AotPlugin;
  const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
  
  module.exports = (env) =&gt; {
      // Configuration in common to both client-side and server-side bundles
      const isDevBuild = !(env &amp;&amp; env.prod);
      const sharedConfig = {
          stats: { modules: false },
          context: __dirname,
          resolve: { extensions: [ '.js', '.ts' ] },
          output: {
              filename: '[name].js',
              publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
          },
          module: {
              rules: [
                  { test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },
                  { test: /\.html$/, use: 'html-loader?minimize=false' },
                  { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
                  { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
              ]
          },
          plugins: [new CheckerPlugin()]
      };
  
      // Configuration for client-side bundle suitable for running in browsers
      const clientBundleOutputDir = './wwwroot/dist';
      const clientBundleConfig = merge(sharedConfig, {
          entry: { 'main-client': './ClientApp/boot.browser.ts' },
          output: { path: path.join(__dirname, clientBundleOutputDir) },
          plugins: [
              new webpack.DllReferencePlugin({
                  context: __dirname,
                  manifest: require('./wwwroot/dist/vendor-manifest.json')
              })
          ].concat(isDevBuild ? [
              // Plugins that apply in development builds only
              new webpack.SourceMapDevToolPlugin({
                  filename: '[file].map', // Remove this line if you prefer inline source maps
                  moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
              })
          ] : [
              // Plugins that apply in production builds only
              new webpack.optimize.UglifyJsPlugin(),
              new AotPlugin({
                  tsConfigPath: './tsconfig.json',
                  entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
                  exclude: ['./**/*.server.ts']
              })
          ])
      });
  
      // Configuration for server-side (prerendering) bundle suitable for running in Node
      const serverBundleConfig = merge(sharedConfig, {
          resolve: { mainFields: ['main'] },
          entry: { 'main-server': './ClientApp/boot.server.ts' },
          plugins: [
              new webpack.DllReferencePlugin({
                  context: __dirname,
                  manifest: require('./ClientApp/dist/vendor-manifest.json'),
                  sourceType: 'commonjs2',
                  name: './vendor'
              })
          ].concat(isDevBuild ? [] : [
              // Plugins that apply in production builds only
              new AotPlugin({
                  tsConfigPath: './tsconfig.json',
                  entryModule: path.join(__dirname, 'ClientApp/app/app.module.server#AppModule'),
                  exclude: ['./**/*.browser.ts']
              })
          ]),
          output: {
              libraryTarget: 'commonjs',
              path: path.join(__dirname, './ClientApp/dist')
          },
          target: 'node',
          devtool: 'inline-source-map'
      });
  
      return [clientBundleConfig, serverBundleConfig];
  };
  </code></pre>
  
  <p>Thank you!</p>