title: Error: Module parse failed: Unexpected character '@' Angular
body: <p>I am learning about webpack and trying to implement it. However, I receive the following error, I have tried to search but I cannot seem to find a loader specific to this case? What am I doing wrong?</p>
  
  <p><strong>Error:</strong>  </p>
  
  <pre><code>  ERROR in ./src/app/app.module.ts
      Module parse failed: Unexpected character '@' (40:0)
      You may need an appropriate loader to handle this file type.
      |
      |
      | @NgModule({
      |   imports: [
      |     BrowserModule
       @ ./src/main.ts 3:0-45 5:41-50
       @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "angular-quickstart",
    "version": "1.0.0",
    "description": "QuickStart package.json from the documentation, supplemented with testing support",
    "scripts": {
      "start": "webpack-dev-server --inline --progress --port 8080",
      "build": "rimraf dist &amp;&amp; webpack --config webpack.config.js --progress --profile --bail",
      "pree2e": "npm run build:e2e",
      "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
      "preprotractor": "webdriver-manager update",
      "protractor": "protractor protractor.config.js",
      "pretest": "npm run build",
      "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
      "pretest:once": "npm run build",
      "test:once": "karma start karma.conf.js --single-run",
      "lint": "tslint ./src/**/*.ts -t verbose",
      "dev": "lite-server"
    },
    "keywords": [],
    "author": "",
    "license": "MIT",
    "dependencies": {
      "@angular/animations": "^5.2.8",
      "@angular/common": "^5.2.8",
      "@angular/compiler": "^5.2.8",
      "@angular/compiler-cli": "^5.2.8",
      "@angular/core": "^5.2.8",
      "@angular/forms": "^5.2.8",
      "@angular/http": "^5.2.8",
      "@angular/platform-browser": "^5.2.8",
      "@angular/platform-browser-dynamic": "^5.2.8",
      "@angular/platform-server": "^5.2.8",
      "@angular/router": "^5.2.8",
      "@types/chart.js": "^2.7.14",
      "@types/underscore": "^1.8.8",
      "angular-in-memory-web-api": "^0.5.3",
      "chart.js": "^2.7.2",
      "core-js": "^2.5.3",
      "jquery": "^3.3.1",
      "jsgrid": "^1.5.3",
      "octicons": "^7.1.0",
      "popper.js": "^1.14.1",
      "rxjs": "^5.5.7",
      "systemjs": "^0.20.19",
      "zone.js": "^0.8.20"
    },
    "devDependencies": {
      "@types/jasmine": "2.8.5",
      "@types/jquery": "^3.3.1",
      "@types/node": "^9.3.0",
      "awesome-typescript-loader": "^5.0.0",
      "canonical-path": "0.0.2",
      "concurrently": "^3.5.1",
      "jasmine-core": "~2.9.1",
      "karma": "^2.0.0",
      "karma-chrome-launcher": "^2.2.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.1.1",
      "karma-jasmine-html-reporter": "^0.2.2",
      "lite-server": "^2.2.2",
      "lodash": "^4.17.5",
      "protractor": "~5.2.2",
      "rimraf": "^2.6.2",
      "ts-loader": "^4.2.0",
      "tslint": "^5.6.0",
      "typescript": "^2.7.2",
      "underscore": "^1.8.3",
      "webpack": "^4.6.0",
      "webpack-cli": "^2.1.3",
      "webpack-dev-server": "^3.1.4"
    },
    "repository": {}
  }
  </code></pre>
  
  <p><strong>Webpack.config</strong></p>
  
  <pre><code>var path = require('path');
  
      module.exports = {
          entry: './src/main.ts',
          output: {
              path: path.resolve(__dirname, 'dist'),
              filename: 'app.js'
          },
          mode: 'development',
          devtool: 'source-map',
          resolve: {
              extensions: [".ts", ".tsx", ".js"]
          },
          module: {
              rules: [
                  { test: /\.tsx$/, use: 'awesome-typescript-loader' }
              ]
          }
      }
  </code></pre>
  
  <p><strong>app structure:</strong></p>
  
  <pre><code>uiangular
   quickstart
     src
       app
     main.ts
  </code></pre>