title: Webpack Module not found: Error: Can't resolve
body: <p>I am trying to migrate my project to webpack, but I've been struggling a lot with this issue:</p>
  
  <pre><code>ERROR in ./app/app.component.ts
  Module not found: Error: Can't resolve '@common' in 
   @ ./app/app.component.ts 16:16-34
   @ ./app/app.module.ts
   @ ./app/main.ts
  </code></pre>
  
  <p>I have a custom library that I want to include in my build, this library was created with typescript and AMD modules. I'm also using an index file to re-export stuff and the import everything with something like:</p>
  
  <pre><code>import { a,b,c,d,e,f,g } from '@common'
  </code></pre>
  
  <p>I have the following project structure:</p>
  
  <pre><code>--app/ 
  ---dir1/
  ---app.module.ts
  ---app.component.ts
  ---main.ts 
  --scripts/
  ---_app/ 
  ----common.d.ts
  ----common.js
  --webpack.config.js
  --tsconfig.js
  </code></pre>
  
  <p>My webpack.config:</p>
  
  <pre><code>entry: {
          vendor: './src/vendor',
          //util: './scripts/_app/util.js',
          //common: './scripts/_app/common.js',
          app: './app/main'
      },
  output: {
          filename: "[name].js",
          path: __dirname + "/dist",
          // Making sure the CSS and JS files that are split out do not break the template cshtml.
          publicPath: "/dist/",
          // Defining a global var that can used to call functions from within ASP.NET Razor pages.
          library: "app",
          libraryTarget: "var"
      },
   resolve: {
          // Add ".ts" and ".tsx" as resolvable extensions.
          extensions: [".js", ".tsx", ".ts", ".json", ".html"],
          modules: [
              path.resolve('.'),
              path.join(__dirname, "./scripts/_app"),
              path.resolve('./node_modules')
          ]
      },
      module: {
          loaders: [
              // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
              {
                  test: /\.tsx?$/,
                  loader: 'ts-loader'
      },
  </code></pre>
  
  <p>main.ts</p>
  
  <pre><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>
  
  <p>app.component.ts                                       </p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Router } from '@angular/router';
  import { HttpClient } from '@angular/common/http';
  import 'rxjs/add/operator/map';
  
  import { LayoutComponent } from 'app/_layout/LayoutComponent';
  import { ClientContext } from "@common";
  
  @Component({
      selector: 'app',
      template: `
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "version": "1.0.0",
    "name": "sds",
    "private": true,
    "description": "",
    "keywords": [],
    "author": "",
    "license": "MIT",
    "dependencies": {
      "@angular/common": "4.4.6",
      "@angular/compiler": "4.4.6",
      "@angular/core": "4.4.6",
      "@angular/forms": "4.4.6",
      "@angular/http": "4.4.6",
      "@angular/platform-browser": "4.4.6",
      "@angular/platform-browser-dynamic": "4.4.6",
      "@angular/router": "4.4.6",
      "@angular/animations": "4.4.6",
      "systemjs": "0.19.31",
      "core-js": "2.4.1",
      "rxjs": "5.4.3",
      "zone.js": "0.8.12",
      "font-awesome": "~4.7.0",
      "popper.js": "1.12.5",
      "bootstrap": "4.0.0-beta",
      "@swimlane/ngx-datatable": "9.3.0",
      "@angular/material": "2.0.0-beta.12",
      "@angular/cdk": "2.0.0-beta.12",
      "jquery": "3.2.1",
      "toastr": "2.1.2",
      "typescript": "2.4.1",
      "@types/linq": "latest"
    },
    "devDependencies": {
      "awesome-typescript-loader": "3.2.1",
      "ts-loader": "3.2.0",
      "clean-webpack-plugin": "0.1.17",
      "file-loader": "^0.11.2",
      "html-loader": "^0.5.1",
      "html-webpack-plugin": "2.30.1",
      "webpack": "3.8.1",
      "webpack-dev-server": "2.9.3",
      "webpack-merge": "4.1.1",
      "source-map-loader": "^0.2.1",
      "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.4"
    },
    "main": "main.js",
    "scripts": {
      "test": "echo \"Error: no test specified\"  ",
      "build:dev": "webpack --config webpack.dev.js",
      "build:prod": "webpack --config webpack.prod.js"
    },
    "-vs-binding": {
      "BeforeBuild": [
        "build:dev"
      ]
    }
  }
  </code></pre>
  
  <p>I tried with ts-loader and awesome-typescript-loader with no luck.</p>