I am building a custom seed project in the MEAN stack using webpack. I am receiving an error I haven't seen before when I run 'npm run build' to bundle the application.

I have seen that a few others here have received such an error, but either their error appropriately pointed to a file that contained a mistake in their code, or no solution could be offered. This has been tough to figure out, as I am correctly importing NgModule (the '6:0' is referencing the '@' in front of my NgModule in the App Module).

I am wondering if it is possible if the use of Angular 2 vs. Angular 4 dependencies is causing this issue? I tried removing Angular 2 dependencies and building again, but again received the same error.

Here is my error:

ERROR in ./assets/app/app.module.ts
Module parse failed: /Desktop/new-app/assets/app/app.module.ts Unexpected character '@' (6:0)
You may need an appropriate loader to handle this file type.
| import { AppComponent } from "./app.component";
|
| @NgModule({
|     declarations: [AppComponent],
|     imports: [BrowserModule],
 @ ./assets/app/main.ts 5:0-41

App Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from "./app.component";
@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    bootstrap: [AppComponent]
})
export class AppModule {
}

App Component

import { Component } from '@angular/core';
@Component ({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
}

Dependencies

{
  "name": "new-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "build": "del public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch"
  },
  "dependencies": {
    "angular2-universal": "^2.1.0-rc.1",
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/platform-server": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@angular/upgrade": "^4.0.0",
    "body-parser": "^1.17.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.3",
    "core-js": "^2.4.1",
    "rxjs": "^5.2.0",
    "zone.js": "^0.8.5",
    "express": "^4.15.3",
    "hbs": "~4.0.1",
    "morgan": "~1.8.1",
    "preboot": "^5.0.0-rc.11",
    "serve-favicon": "~2.4.2"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.42",
    "@types/node": "^8.0.6",
    "angular2-router-loader": "^0.3.5",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.2.1",
    "del-cli": "^1.1.0",
    "html-loader": "^0.4.5",
    "typescript": "^2.4.1",
    "webpack": "^3.0.0",
    "webpack-merge": "^4.1.0"
  }
}

webpack.config.common.js

var webpack = require('webpack');

module.exports = {
    entry: {
        'app': './assets/app/main.ts'
    },

    resolve: {
        extensions: ['.js', '.ts']
    },

    module: {
        rules: [
            {
                test: /\.html$/,
                use: [{ loader: 'html-loader' }]
            },
            {
                test: /\.css$/,
                use: [{ loader: 'raw-loader' }]
            }
        ],
        exprContextCritical: false

    }
};

webpack.config.dev.js

var webpack = require('webpack');
var commonConfig = require('./webpack.config.common.js');
var webpackMerge = require('webpack-merge');
var path = require('path');

module.exports = webpackMerge(commonConfig, {
  devtool: 'cheap-module-eval-source-map',

  output: {
    path: path.resolve(__dirname + '/public/js/app'),
    filename: 'bundle.js',
    publicPath: '/js/app/',
    chunkFilename: '[id].chunk.js'
  }
});

Thanks for your help.