Webpack Module not found: Error: Can't resolve

Question

I am trying to migrate my project to webpack, but I've been struggling a lot with this issue:

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

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:

import { a,b,c,d,e,f,g } from '@common'

I have the following project structure:

--app/ 
---dir1/
---app.module.ts
---app.component.ts
---main.ts 
--scripts/
---_app/ 
----common.d.ts
----common.js
--webpack.config.js
--tsconfig.js

My webpack.config:

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'
    },

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

app.component.ts

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: `

package.json

{
  "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"
    ]
  }
}

I tried with ts-loader and awesome-typescript-loader with no luck.

Answer 1

Apparently, web pack doesn't support AMD named modules.

https://github.com/webpack/webpack/issues/6058

There must be a way to let webpack know how to resolve these custom scripts, I just don't know how.