angular-cli: @ngtools/webpack failing to build, "Can't resolve './../../$$_gendir/..."

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

angular-cli: 1.0.0-beta.22-1
node: 6.9.1
os: win32 x64

from package.json

  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^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/router": "^4.0.0",
    "core-js": "^2.4.1",
    "electron": "^1.6.2",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.1.1",
    "moment": "^2.16.0",
    "moment-timezone": "^0.5.9",
    "rxjs": "5.2.0",
    "uikit": "3.0.0-beta.18",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^4.0.0",
    "@ngtools/webpack": "^1.3.0",
    "@types/core-js": "^0.9.39",
    "@types/jquery": "^2.0.41",
    "@types/node": "^7.0.8",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.1.2",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.27.3",
    "electron-packager": "^8.6.0",
    "file-loader": "^0.10.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "imports-loader": "^0.7.1",
    "jasmine-core": "^2.5.2",
    "json-loader": "^0.5.4",
    "karma": "^1.5.0",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.3",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.14",
    "raw-loader": "^0.5.1",
    "reflect-metadata": "^0.1.10",
    "rimraf": "^2.6.1",
    "style-loader": "^0.16.0",
    "to-string-loader": "^1.1.5",
    "typescript": "^2.2.1",
    "typescript-collections": "^1.2.3",
    "url-loader": "^0.5.8",
    "webpack": "^2.3.2",
    "webpack-merge": "^4.1.0"
  }

Repro steps.

Example Repo: https://github.com/MitchTalmadge/Angular-AoT-Error-Example

I am facing a problem trying to use @ngtools/webpack to enable AoT for Angular 4. When I run my webpack script, I receive an error telling me that the app.module.ngfactory cannot be resolved. No gendir is ever created, even when specifically declaring genDir in the tsconfig.json. However, if I use ngc . then the gendir is created, all files compile, and everything works great.

Here are my webpack configs in question:

webpack.common.config.js

var path = require('path');
var webpack = require('webpack');

var config = {
    cache: true,

    entry: {
        polyfills: path.join(__dirname, '../src/scripts/polyfills'),
        vendor: path.join(__dirname, '../src/scripts/vendors/vendors'),
        main: path.join(__dirname, '../src/scripts/main')
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: ['awesome-typescript-loader', 'angular2-template-loader'],
                exclude: [/\.(spec|e2e)\.ts$/]
            },
            {
                test: /\.(component|page)\.html$/,
                use: ["to-string-loader", "html-loader?-minimize"]
            },
            {
                test: /\.html$/,
                use: "html-loader?-minimize",
                exclude: [/\.(component|page)\.html$/]
            },
            {
                test: /\.(component|page)\.css$/,
                use: ["to-string-loader", "css-loader"]
            },
            {
                test: /\.css(\?v=[\d\.]+)?$/,
                use: ["style-loader", "css-loader"],
                exclude: [/\.(component|page)\.css$/]
            },
            {
                test: /\.(png|jpg|gif|svg)(\?v=[\d\.]+)?$/,
                use: "file-loader?name=./resources/images/[hash].[ext]"
            },
            {
                test: /\.(ttf|eot|woff|woff2)(\?v=[\d\.]+)?$/,
                use: 'file-loader?name=./resources/fonts/[hash].[ext]'
            }
        ]
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['polyfills', 'vendor', 'main'].reverse(),
            minChunks: Infinity
        }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ],

    resolve: {
        extensions: ['.ts', '.js', '.json', '.jsx'],
        modules: ['node_modules'],
        alias: {
            // Force all modules to use the same jquery version.
            'jquery': path.join(__dirname, '../node_modules/jquery/src/jquery')
        }
    },

    node: {
        global: true,
        process: true,
        Buffer: false,
        crypto: 'empty',
        module: false,
        clearImmediate: false,
        setImmediate: false,
        clearTimeout: true,
        setTimeout: true
    }
};

module.exports = config;

webpack.dev.config.js (the file passed in as the --config for webpack)

var config = require('./webpack.common.config.js');
var AotPlugin = require('@ngtools/webpack').AotPlugin;
var CleanWebpackPlugin = require('clean-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var path = require('path');

config.module.rules.unshift(
    {
        test: /\.ts$/,
        use: '@ngtools/webpack',
        //use: ['awesome-typescript-loader', 'angular2-template-loader'],
        exclude: [/\.(spec|e2e)\.ts$/]
    }
);

config.plugins.push(
    new HtmlWebpackPlugin({
        template: path.join(__dirname, '../src/index.html.ejs'),
        favicon: path.join(__dirname, '../src/resources/favicons/favicon.ico'),
        filename: path.join(__dirname, '../tmp/index.html'),
        inject: 'body',
        minify: {
            minifyCSS: true,
            minifyJS: true,
            removeComments: true,
            collapseWhitespace: true,
            collapseInlineTagWhitespace: true
        },
        chunksSortMode: 'dependency'
    })
);

config.plugins.push(
    new AotPlugin({
        tsConfigPath: path.join(__dirname, '../tsconfig.json')
    })
);

config.devtool = 'source-map';
config.output = {
    path: path.join(__dirname, '../tmp/'),
    filename: './resources/scripts/[name].js',
    sourceMapFilename: './resources/scripts/[name].map',
    chunkFilename: './resources/scripts/[id].chunk.js'
};

module.exports = config;

And here is my tsconfig.json

{
  "compilerOptions": {
    "rootDir": "src/scripts",
    "outDir": "lib",
    "skipLibCheck": true,
    "target": "es5",
    "lib": [
      "dom",
      "es7"
    ],
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "suppressImplicitAnyIndexErrors": true
  },
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true,
    "useCache": true
  },
  "exclude": [
    "node_modules",
    "dist",
    "tmp",
    "**/*.ngfactory.ts",
    "**/*.shim.ts"
  ],
  "angularCompilerOptions": {
    "skipMetadataEmit": true,
    "entryModule": "src/scripts/app.module#AppModule"
  }
}

… and my main.ts

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

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

The log given by the failure.

Stack Trace:

ERROR in ./src/scripts/main.ts
Module not found: Error: Can't resolve './../../$$_gendir/src/scripts/app.module.ngfactory' in 'D:\Media\Programming\WebStorm Projects\Emoji Tools\src\scripts'
 @ ./src/scripts/main.ts 5:29-90

Full Log:

> webpack --config webpack/webpack.dev.config.js && electron .


[at-loader] Using typescript@2.2.1 from typescript and "tsconfig.json" from D:\Media\Programming\WebStorm Projects\Emoji Tools/tsconfig.json.


[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.046 sec.
Hash: 02e1f79124edf4903e81
Version: webpack 2.3.2
Time: 31540ms
                                                   Asset       Size  Chunks                    Chunk Names
./resources/fonts/af7ae505a9eed503f8b8e6982036873e.woff2    77.2 kB          [emitted]         
 ./resources/images/fc83aa0487721906071662aaa6516e97.png    4.12 kB          [emitted]         
 ./resources/images/26dafc7188fd372dd713d5e24d5eefb9.png  745 bytes          [emitted]         
 ./resources/images/72a34bc8d12bfb760e9b25076b8668d6.png    9.17 kB          [emitted]         
 ./resources/images/bf03ee5091a4e42860c4d7df9c32e8d4.png    1.26 kB          [emitted]         
 ./resources/images/19022f0778177ae206b5586c4b48c900.svg    4.56 kB          [emitted]         
  ./resources/json/cc0951b2326bd2870b310a2b872e257e.json  334 bytes          [emitted]         
                               ./resources/scripts/0.map    6.62 kB          [emitted]         
  ./resources/fonts/674f50d287a8c48dc19ba404d20fe713.eot     166 kB          [emitted]         
  ./resources/fonts/b06871f281fee6b241d60582ae9369b9.ttf     166 kB          [emitted]         
 ./resources/images/cd5608e5af461b5ff1068f88360b6524.png    3.09 kB          [emitted]         
 ./resources/fonts/fee66e712a8a08eef5805a46892932ad.woff      98 kB          [emitted]         
 ./resources/images/912ec66d7572ff821749319396470bde.svg     444 kB          [emitted]  [big]  
                           ./resources/scripts/vendor.js    4.34 MB       0  [emitted]  [big]  vendor
                             ./resources/scripts/main.js  699 bytes       1  [emitted]         main
                        ./resources/scripts/polyfills.js     309 kB       2  [emitted]  [big]  polyfills
                          ./resources/scripts/vendor.map    5.26 MB       0  [emitted]         vendor
                            ./resources/scripts/main.map  623 bytes       1  [emitted]         main
                       ./resources/scripts/polyfills.map     389 kB       2  [emitted]         polyfills
                                             favicon.ico    15.1 kB          [emitted]         
                                              index.html    1.35 kB          [emitted]         
  [45] ./~/@angular/core/@angular/core.es5.js 460 kB {0} [built]
  [71] ./~/@angular/platform-browser/@angular/platform-browser.es5.js 141 kB {0} [built]
 [153] ./~/process/browser.js 5.3 kB {2} [built]
 [370] ./src/scripts/vendors/angular.ts 330 bytes {0} [built]
 [371] ./src/scripts/vendors/moment.ts 162 bytes {0} [built]
 [372] ./src/scripts/vendors/uikit.ts 300 bytes {0} [built]
 [373] ./src/scripts/vendors/uuid.ts 129 bytes {0} [built]
 [374] ./~/core-js/es6/index.js 5.88 kB {2} [built]
 [375] ./~/core-js/es7/reflect.js 510 bytes {2} [built]
 [376] ./~/zone.js/dist/long-stack-trace-zone.js 5.38 kB {2} [built]
 [377] ./~/zone.js/dist/zone.js 88.1 kB {2} [built]
 [382] ./src/scripts/main.ts 439 bytes {1} [built]
 [383] ./src/scripts/polyfills.ts 386 bytes {2} [built]
 [384] ./src/scripts/vendors/vendors.ts 304 bytes {0} [built]
 [429] ./~/core-js/modules/es6.math.fround.js 743 bytes {2} [built]
    + 843 hidden modules

ERROR in ./src/scripts/main.ts
Module not found: Error: Can't resolve './../../$$_gendir/src/scripts/app.module.ngfactory' in 'D:\Media\Programming\WebStorm Projects\Emoji Tools\src\scripts'
 @ ./src/scripts/main.ts 5:29-90
Child src\scripts\core\app\app.component.html:
       [0] ./~/html-loader?-minimize!./src/scripts/core/app/app.component.html 26 bytes {0} [built]
       [1] ./src/scripts/core/app/app.component.html 272 bytes {0} [built]
Child html-webpack-plugin for "index.html":
                                                      Asset       Size  Chunks             Chunk Names
    ./resources/images/fc83aa0487721906071662aaa6516e97.png    4.12 kB          [emitted]  
    ./resources/images/cd5608e5af461b5ff1068f88360b6524.png    3.09 kB          [emitted]  
    ./resources/images/26dafc7188fd372dd713d5e24d5eefb9.png  745 bytes          [emitted]  
    ./resources/images/72a34bc8d12bfb760e9b25076b8668d6.png    9.17 kB          [emitted]  
    ./resources/images/bf03ee5091a4e42860c4d7df9c32e8d4.png    1.26 kB          [emitted]  
    ./resources/images/19022f0778177ae206b5586c4b48c900.svg    4.56 kB          [emitted]  
     ./resources/json/cc0951b2326bd2870b310a2b872e257e.json  334 bytes          [emitted]  
       [0] ./src/resources/favicons/android-chrome-192x192.png 101 bytes {0} [built]
       [1] ./src/resources/favicons/apple-touch-icon.png 101 bytes {0} [built]
       [2] ./src/resources/favicons/favicon-16x16.png 101 bytes {0} [built]
       [3] ./src/resources/favicons/favicon-194x194.png 101 bytes {0} [built]
       [4] ./src/resources/favicons/favicon-32x32.png 101 bytes {0} [built]
       [5] ./src/resources/favicons/safari-pinned-tab.svg 101 bytes {0} [built]
       [6] ./~/file-loader?name=./resources/json/[hash].[ext]!./src/resources/favicons/manifest.json 100 bytes {0} [built]
       [7] ./~/lodash/lodash.js 540 kB {0} [built]
       [8] ./~/html-webpack-plugin/lib/loader.js!./src/index.html.ejs 2.22 kB {0} [built]
       [9] (webpack)/buildin/global.js 509 bytes {0} [built]
      [10] (webpack)/buildin/module.js 517 bytes {0} [built]
Child src\scripts\core\app\app.component.css:
                        Asset     Size  Chunks             Chunk Names
    ./resources/scripts/0.map  6.62 kB       0  [emitted]  
       [0] ./~/css-loader!./src/scripts/core/app/app.component.css 172 bytes {0} [built]
       [1] ./~/css-loader/lib/css-base.js 2.19 kB {0} [built]
       [2] ./src/scripts/core/app/app.component.css 260 bytes {0} [built]

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "D:\\Program Files\\nodejs\\node.exe" "D:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! emoji-tools@1.0.0 dev: `webpack --config webpack/webpack.dev.config.js && electron .`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the emoji-tools@1.0.0 dev script 'webpack --config webpack/webpack.dev.config.js && electron .'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the emoji-tools package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --config webpack/webpack.dev.config.js && electron .
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs emoji-tools
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls emoji-tools
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\Media\Programming\WebStorm Projects\Emoji Tools\npm-debug.log

Process finished with exit code 1

Desired functionality.

I expect the main.ts to be converted by the plugin into an AoT compatible file, using generated ngfactory files, then bundled into js files.

Mention any other details that might be useful.

My webpack scripts are in /webpack, my tsconfig.json is in /, my main.ts and app.module.ts are in /src/scripts.

Thanks for any help. I’m really stuck on this one.