Failed to load ngtools / webpack
Trying to get AOT compilation in Angular 4 using ngtools / webpack but whatever I try it won't work. I have followed other tutorials but no effect.
I am getting this error:
rimraf dist && webpack --config config / webpack.aot.js --progress --profile --bail
10% of building modules 3/3 modules 0 activeModuleNotFoundError: Module not found: Error: Unable to resolve './../$$_gendir/src/ app / app.module.ngfactory' in 'D: \ Bit bucket \ egbolig \ Frontend \ Application \ CCI "to FactoryCallback (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ webpack \ lib \ Compilation.js: 260: 39) to factory (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ webpack \ lib \ NormalModuleFactory.js: 247: 20) in resolver (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ webpack \ lib \ NormalModuleFactory.js: 65: 21) in asyncLib.parallel.e (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ webpack \ lib \ NormalModuleFactory.js: 138: 21) in D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ async \ dist \ async.js: 3824: 9 in D:\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ async \ dist \ async.js: 460: 16 on iteratorCallback (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ async \ \ async.js: 1032: 13) to D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ async \ dist \ async.js: 944: 16 to D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ async \ dist \ async.js: 3821: 13 at apply (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ async \ dist \ async.js: 21: 25) in D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ async \ dist \ async.js: 56: 12 on resolvers.normal.resolve (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ webpack \ lib \ NormalModuleFactory.js: 130: 23) at onResolved (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ extended-resolve \ lib \ Resolver.js: 70: 11) when loggingCallbackWrapper (D:\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ extended-resolve \ lib \ createInnerCallback.js: 31:19) at afterInnerCallback (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ extended-resolve \ lib \ Resolver.js : 138: 10) at loggingCallbackWrapper (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ extended-resolve \ lib \ createInnerCallback.js: 31:19) in Resolver.applyPluginsAsyncSeriesBailResult1 (D: \ Bitbucket \ egbolig \ Frontend \ node_modules \ tapable \ lib \ Tapable.js: 181: 46) at innerCallback (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ extended-resolve \ lib \ Resolver.js: 125: 19) when loggingCallbackWrapper (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ extended-resolve \ lib \ createInnerCallback.js: 31:19) in D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ tapable \ lib \ Tapable.js: 283:15 in D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ extended-resolve \ lib \ UnsafeCachePlugin.js: 38: 4 when loggingCallbackWrapper (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ extended-resolve \ lib \ createInnerCallback.js: 31:19) at afterInnerCallback (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ extended-resolve \ lib \ Resolver.js: 138: 10) when loggingCallbackWrapper (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ extended-resolve \ lib \ createInnerCallback.js: 31:19) in Resolver.applyPluginsAsyncSeriesBailResult1 (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ tapable \ lib \ Tapable.js: 181: 46) at innerCallback (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ extended-resolve \ lib \ Resolver.js: 125: 19) when loggingCallbackWrapper (D:\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ extended-resolve \ lib \ createInnerCallback.js: 31:19) in D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ tapable \ lib \ Tapable.js: 283: 15 at innerCallback (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ extended-resolve \ lib \ Resolver.js: 123: 11) when loggingCallbackWrapper (D: \ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ extended-resolve \ lib \ createInnerCallback.js: 31:19) allow './../$$_gendir/src/app/app.module.ngfactory' in 'D: \ Bitbucket \ egbolig \ Frontend \ Application \ src' using file description : D: \ Bitbucket \ egbolig \ Frontend \ Application \ package.json (relative path: ./ src) The browser field does not contain the correct alias configuration after using the deployment descriptor: D: \ Bitbucket \ egbolig \ Frontend \ Application \ package.json (relative path :. / src) using the description file: D: \ Bitbucket \ egbolig \ Frontend \ Application \ package.json (relative path :. /$$_gendir/src/app/app.module.ngfactory) as directory D : \ Bitbucket \ egbolig \ Frontend \ Application \ $$ _ gendir \ src \ app \ app.module.ngfactory does not exist no extension Browser field does not contain correct alias configuration D: \ Bitbucket \ egbolig \ Frontend \ Application \ $$ _ gendir \ src \ app \ app.module.ngfactory does not exist, JS Browser field does not contain correct alias configuration D: \ Bitbucket \ egbolig \ Frontend \ Application \ $$ _ gendir \ src \ app \ app.module.ngfactory .js does not exist .ts The browser field does not contain the correct alias configuration D:\ Bitbucket \ egbolig \ Frontend \ Application \ $$ _ gendir \ src \ app \ app.module.ngfactory.ts does not exist .html Browser field does not contain correct alias configuration D: \ Bitbucket \ egbolig \ Frontend \ Application \ $ $ _ gendir \ src \ app \ app.module.ngfactory.html doesn't exist .css
package.json
{
"name": "eg-bolig",
"version": "1.0.0",
"scripts": {
"start": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server --inline --progress --port 8080",
"test": "karma start",
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
"build:aot": "rimraf dist && webpack --config config/webpack.aot.js --progress --profile --bail"
},
"dependencies": {
"@angular/common": "^4.1.0",
"@angular/compiler": "^4.1.0",
"@angular/core": "^4.1.0",
"@angular/forms": "^4.1.0",
"@angular/http": "^4.1.0",
"@angular/platform-browser": "^4.1.0",
"@angular/platform-browser-dynamic": "^4.1.0",
"@angular/router": "^4.1.0",
"@angular/animations": "^4.1.0",
"web-animations-js": "^2.2.4",
"core-js": "^2.4.1",
"rxjs": "^5.3.0",
"zone.js": "~0.8.5",
"font-awesome": "^4.7.0",
"primeng": "^4.0.0-rc.3",
"@progress/kendo-theme-default": "^2.28.1",
"@progress/kendo-angular-buttons": "^0.24.0",
"@progress/kendo-angular-grid": "^0.26.4",
"@progress/kendo-angular-dropdowns": "^0.39.0",
"@progress/kendo-angular-dateinputs": "^0.7.0",
"@progress/kendo-angular-inputs": "^0.23.2",
"@progress/kendo-angular-intl": "^0.12.0",
"@progress/kendo-angular-l10n": "^0.3.0",
"@progress/kendo-angular-dialog": "^0.20.0",
"@progress/kendo-drawing": "^0.15.5",
"@progress/kendo-data-query": "^0.5.1",
"@angular/flex-layout": "2.0.0-beta.8"
},
"devDependencies": {
"@types/node": "^7.0.13",
"@ngtools/webpack": "^1.3.1",
"@angular/compiler-cli": "4.1.0",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.1.2",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.2",
"null-loader": "^0.1.1",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.1",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"typescript": "^2.2.2",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2",
"webpack-merge": "^4.1.0",
"postcss-loader": "^1.3.3",
"autoprefixer": "^6.7.7",
"url-loader": "^0.5.8",
"resolve-url-loader": "^2.0.2",
"to-string-loader": "^1.1.5"
}
}
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';
if (process.env.ENV === 'production') {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"sourceMap": true
},
"compileOnSave": false,
"angularCompilerOptions": {
"skipMetadataEmit": true
}
}
webpack.common.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['.js', '.ts', '.html', '.css', '.scss']
},
module: {
rules: [
// {
// test: /\.ts$/,
// use: [
// {
// loader: 'awesome-typescript-loader'
// }, 'angular2-template-loader']
// },
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|ico)$/,
use: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=application/font-woff&name=assets/fonts/[name].[hash].[ext]'
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=application/font-woff&name=assets/fonts/[name].[hash].[ext]'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=application/octet-stream&name=assets/fonts/[name].[hash].[ext]'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: 'file-loader?name=assets/fonts/[name].[hash].[ext]'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=image/svg+xml&name=assets/fonts/[name].[hash].[ext]'
},
{
test: /\.(sass|scss)$/,
exclude: helpers.root('src', 'app'),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'postcss-loader' },
{ loader: 'resolve-url-loader' },
{ loader: 'sass-loader', options: { sourceMap: true } },
]
})
},
{
test: /\.(sass|scss)$/,
include: helpers.root('src', 'app'),
use: [
{ loader: "to-string-loader", options: { sourceMap: true } }, // todo: checkup, Doesnt support sourcemap yet (its in merge)
{ loader: "css-loader", options: { sourceMap: true }},
{ loader: 'postcss-loader' },
{ loader: 'resolve-url-loader' },
{ loader: 'sass-loader', options: { sourceMap: true, outputStyle: 'expanded' } },
]
},
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?sourceMap' })
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
use: 'raw-loader'
}
]
},
plugins: [
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)@angular/,
helpers.root('./src'), // location of your src
{} // a map of your routes
),
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/index.html',
favicon: "src/assets/img/favicon.ico"
})
]
};
webpack.prod.js
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
module.exports = webpackMerge(commonConfig, {
devtool: 'source-map',
output: {
path: helpers.root('dist'),
publicPath: '/angular/',
filename: '[name].[hash].js',
chunkFilename: '[id].[hash].chunk.js'
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
mangle: {
keep_fnames: true
}
}),
new ExtractTextPlugin('[name].[hash].css'),
new webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(ENV)
}
}),
new webpack.LoaderOptionsPlugin({
htmlLoader: {
minimize: false // workaround for ng2
}
})
]
});
webpack.aot.js
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var prodConfig = require('./webpack.prod.js');
var AotPlugin = require('@ngtools/webpack').AotPlugin;
var helpers = require('./helpers');
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
module.exports = webpackMerge(prodConfig, {
module: {
rules: [
{
test: /\.ts$/,
use: '@ngtools/webpack'
}
]
},
plugins: [
new AotPlugin({
tsConfigPath: helpers.root('tsconfig.json'),
entryModule: helpers.root('src',' app', 'app.module#AppModule')
})
]
});
source to share
No one has answered this question yet
Check out similar questions: