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

[MitchTalmadge]

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.

[nellyigiebor]

I am having the same issue.

can any body pls help?

[jimbarrett33]

Try the fix/workaround by @tinchou in #5329. It worked for me and appears to be a window-specific problem.

[MitchTalmadge]

@jbarr33 Unfortunately this still gives the same error:

// workaround https://github.com/angular/angular-cli/issues/5329
var aotPlugin = new AotPlugin({
    tsConfigPath: path.join(__dirname, '../tsconfig.json')
});
aotPlugin._compilerHost._resolve = function(path_to_resolve) {
    path_1 = require("path");
    path_to_resolve = aotPlugin._compilerHost._normalizePath(path_to_resolve);
    if (path_to_resolve[0] == '.') {
        return aotPlugin._compilerHost._normalizePath(path_1.join(aotPlugin._compilerHost.getCurrentDirectory(), path_to_resolve));
    }
    else if (path_to_resolve[0] == '/' || path_to_resolve.match(/^\w:\//)) {
        return path_to_resolve;
    }
    else {
        return aotPlugin._compilerHost._normalizePath(path_1.join(aotPlugin._compilerHost._basePath, path_to_resolve));
    }
};

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

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

Thanks for the help

[colltoaction]

Try changing "module": "commonjs", to "module": "es2015" (or es7, I'm not sure given your current settings)

If that doesn't work, maybe try moving the entryPath out of the tsconfig and in to the webpack config like this:

var aotPlugin = new AotPlugin({
    // ...
    entryModule: path.join(__dirname, '../src/scripts/app.module#AppModule')
});

It's hard to get this configuration right, it took me a while for my project and then it breaks again with every other update.

[MitchTalmadge]

@tinchou Changing the module gave the same error, and so did moving entryPath. To help with debugging I will try to create a small example repository that demonstrates the issue when I get a chance.

[MitchTalmadge]

https://github.com/MitchTalmadge/Angular-AoT-Error-Example Here is a pretty minimal example of the error. Hope it helps

[nellyigiebor]

I was able to build for production without aot thou.
like so : ng build --prod --aot false; very good that we can now build with parameters... hope to see more coming..

Note : if anyone is using angular2-datatable component please ve advice to update to current version.

[MitchTalmadge]

Yeah, JIT building works fine. AoT is my goal though. Also, as I mentioned in my original post, running ngc . seems to work great for generating the ngfactory files. @ngtools/webpack just doesn't seem to do it.

[jimbarrett33]

@MitchTalmadge I was able to get your example working by adding ".ts" extension to the entry's

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

I think because these are physical paths, without the extension it is a problem.

If using relative path syntax such as below, this is when @tinchou fix from #5329 is needed:

`entry: {
    polyfills: './src/scripts/polyfills.ts',
    vendor: './src/scripts/vendors/vendors.ts',
    main: './src/scripts/main.ts'
},`

It's hard for me to tell when it's OK to give Webpack relative path syntax and when it expects the physical path to be resolved. Some guidance would be great on this.

I was also actually a little confused by the results and whether AoT code was actually getting generated but it seems like it is. Angular 4 changed the way AoT code is generated and I had been using Angular 2.x.

Almost forgot, to get your example to actually run you need to change the tag in index.html.ejs to <et-app></et-app> to match the app component selector.

Hope this helps.

[MitchTalmadge]

Oops I forgot to change that tag haha. Thanks for the help! I'll try that out today and see if it works for me too.

[MitchTalmadge]

@jbarr33 Thank you so much, that fixed it for me! 🎉 😄 Adding .ts to the end of those files worked great. Can't believe it was that simple.

[spock123]

I still have this errror ngtools/webpack 1.5.2 , and tried all of the above..

Really frustrating

[JoshDSommer]

@spock123 we just started getting these isseus as well. however the fix of setting the enhance-resolve outlined here seems to have solved it for us. #7113

[colltoaction]

At some point my deployment broke because of the issue @TheOriginalJosh mentions, even though I had file names with extensions. As of today, updating to the latest @ngtools/webpack (1.7.1) fixes the issue without pinning enhance-resolve.