ERROR in Could not resolve "./src/app/app.module" from "./src/app/app.module".

[sanex3339]

OS?

Xubuntu

Versions.

Node: 6.0.0
Angular: 4.0.0-beta.8
'@ngtools/webpack' plugin: 1.2.10

Repro steps.

new AotPlugin({
     tsConfigPath: './tsconfig.json',
     entryModule: './src/app/app.module#AppModule'
 })

main.ts

import './vendors.ts';

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

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

import { GeneratorAppModule } from './generator-app/generator-app.module'

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        CommonModule,
        GeneratorAppModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap:[
        AppComponent
    ]
})
export class AppModule { }

The log given by the failure.

ERROR in Could not resolve "./src/app/app.module" from "./src/app/app.module".

This error occurs only wiht AOT compilation.
I using Webpack @ngtools/webpack plugin. Code compiled fine, it runnable, but i got this error.

Full stack trace:

Hash: 50a4ef2cbf71037e65e7
Version: webpack 2.2.1
Time: 65029ms
        Asset       Size  Chunks                    Chunk Names
      main.js     740 kB       0  [emitted]  [big]  main
    vendor.js     112 kB       1  [emitted]         vendor
  main.js.map    2.37 MB       0  [emitted]         main
vendor.js.map     377 kB       1  [emitted]         vendor
   index.html  934 bytes          [emitted]         
   [0] ./~/@angular/core/index.js 2.61 kB {0} [built]
  [22] ./~/tslib/tslib.es6.js 5.03 kB {1} [built]
  [55] ./~/core-js/modules/_core.js 117 bytes {1} [built]
 [193] ./~/@angular/platform-browser/index.js 716 bytes {0} [built]
 [266] ./src/vendors.ts 153 bytes {1} [built]
 [302] ./~/@angular/forms/src/form_builder.js 4.82 kB {0} [built]
 [329] ./src/environments/environment.ts 102 bytes {0} [built]
 [382] ./src/main.ts 496 bytes {0} [built]
 [467] ./$$_gendir/src/app/app.module.ngfactory.ts 41.8 kB {0} [built]
 [483] ./~/core-js/es6/index.js 5.88 kB {1} [built]
 [484] ./~/core-js/es7/reflect.js 510 bytes {1} [built]
 [504] ./~/core-js/modules/es6.array.join.js 451 bytes {1} [built]
 [681] ./~/zone.js/dist/zone.js 85.1 kB {1} [built]
 [690] multi ./src/main.ts 28 bytes {0} [built]
 [691] multi ./src/vendors.ts 28 bytes {1} [built]
    + 677 hidden modules

ERROR in Could not resolve "./src/app/app.module" from "./src/app/app.module".

npm ERR! Linux 3.13.0-107-generic
npm ERR! argv "/home/xxx/.nvm/versions/node/v6.0.0/bin/node" "/home/xxx/.nvm/versions/node/v6.0.0/bin/npm" "run" "build"
npm ERR! node v6.0.0
npm ERR! npm  v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! generator@1.0.0 build: `NODE_ENV=production $(npm bin)/webpack && find ./dist -name \*.js -exec cp {} ./public \;`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the generator@1.0.0 build script 'NODE_ENV=production $(npm bin)/webpack && find ./dist -name \*.js -exec cp {} ./public \;'.
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 generator package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     NODE_ENV=production $(npm bin)/webpack && find ./dist -name \*.js -exec cp {} ./public \;
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs generator
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls generator
npm ERR! There is likely additional logging output above.

[aboodz]

I have literally suffered from this weird error yesterday. The error message is not clear at all, and doesn't show any error stack. The fix is very simple, just use the absolute path for your entryModule. You can use
the path helper to make your build more portable. See the code below:

    new AotPlugin({
        tsConfigPath: './tsconfig.json',
        entryModule: helpers.root('src/main/webapp/app/app.module.ts#AppModule')
    }),

Also as a side note (unrelated to this error), I think have to use for AoT build

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).catch(err => console.error(err));

instead of

platformBrowserDynamic().bootstrapModule(AppModule);

[sanex3339]

Thank you, it works!

[JuanLucha]

@sanex3339 Did you had to use platformBrowser instead of platformBrowserDynamic?

[sanex3339]

No, i'm still using platformBrowserDynamic

[JuanLucha]

Cool, Thanks!

[ChristianBorresen]

@aboodz what module did you get the "helpers.root" from? I can't seem to find it anywhere...

[aboodz]

@leBoer nice catch... I have just noticed that now. I started my project from this seed. I thought it is part of node (I'm new to node). It looks like a custom made util that uses path node module. This is how implemented

$project_root/config/helpers.js

var path = require('path');

var _root = path.resolve(__dirname, '..');

function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [_root].concat(args));
}

exports.root = root;

then in webpack.config I use require to import it helpers = require('./helpers');

[AbinayaSubbiah]

Hiwhen i am using

helpers = require('./helpers');

Cannot find module './helpers'

How to resolve this?

[inthegarage]

@AbinayaSubbiah You need to construct a helpers.js as the post above yours says.

[rycharlind]

I've tried all the above but I'm still getting an error when I build with AoT. Below is my error along with the relevant code. Can someone please help me figure out what I'm missing? It works when I build for development. It only errors out when I build with AoT. I'm using @ngtools/webpack.

Error

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './ngfactory/src/app/app.module.ts.ngfactory' in '/Users/rlind/Development/myapp/web/src'
resolve './ngfactory/src/app/app.module.ts.ngfactory' in '/Users/rlind/Development/myapp/web/src'
  using description file: /Users/rlind/Development/myapp/web/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/rlind/Development/myapp/web/package.json (relative path: ./src)
    using description file: /Users/rlind/Development/myapp/web/package.json (relative path: ./src/ngfactory/src/app/app.module.ts.ng
factory)
      as directory
        /Users/rlind/Development/myapp/web/src/ngfactory/src/app/app.module.ts.ngfactory doesn't exist
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rlind/Development/myapp/web/src/ngfactory/src/app/app.module.ts.ngfactory doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rlind/Development/myapp/web/src/ngfactory/src/app/app.module.ts.ngfactory.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rlind/Development/myapp/web/src/ngfactory/src/app/app.module.ts.ngfactory.js doesn't exist
[/Users/rlind/Development/myapp/web/src/ngfactory/src/app/app.module.ts.ngfactory]
[/Users/rlind/Development/myapp/web/src/ngfactory/src/app/app.module.ts.ngfactory]
[/Users/rlind/Development/myapp/web/src/ngfactory/src/app/app.module.ts.ngfactory.ts]
[/Users/rlind/Development/myapp/web/src/ngfactory/src/app/app.module.ts.ngfactory.js]

Webpack Prod Config

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 AotPlugin = require('@ngtools/webpack').AotPlugin;

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
const PROXY_URL = process.env.PROXY_URL = '';
const WEBSOCKET_URL = process.env.WEBSOCKET_URL = '';

module.exports = webpackMerge(commonConfig, {
  devtool: 'cheap-module-eval-source-map',
 
  module: {
    loaders: [
      {
        test: /\.ts$/, loaders: ['@ngtools/webpack']
      }
    ]
  },

  output: {
    path: helpers.root('dist'),
    publicPath: '/',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js'
  },
  plugins: [
     new AotPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: helpers.root('src/app/app.module.ts#AppModule')
            }),
    new ExtractTextPlugin('[name].css'),
    new webpack.DefinePlugin({
      'process.env': {
        'PROXY_URL': JSON.stringify(PROXY_URL),
        'WEBSOCKET_URL': JSON.stringify(WEBSOCKET_URL),
        'ENV': JSON.stringify(ENV)
      }
    })
  ]
});

tsconfig.json

{
    "compilerOptions": {
        "typeRoots": [
            "./node_modules/@types"
        ],
        "types": [
            "hammerjs",
            "node"
        ],
        "target": "es6",
        "module": "commonjs",
        "moduleResolution": "node",
        "noImplicitAny": false,
        "removeComments": true,
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "outDir": "out",
        "suppressImplicitAnyIndexErrors": true,
        "allowJs": true
    },
    "files": [
        "src/app/app.module.ts", // This will ensure the ngFactory is created
        "src/main.ts"
    ],
    "exclude": [
        "out",
        "node_modules",
        "dist",
        "dev",
        "reports"
    ],
    "angularCompilerOptions": {
        "genDir": "./src/ngfactory",
        "entryModule": "src/app/app.module#AppModule"
    },
    "version": "1.8.10"
}

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).catch(err => console.error(err));

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "My Web App",
  "license": "none",
  "scripts": {
    "build": "rimraf dist && webpack -p --progress --profile --verbose",
    "server": "webpack-dev-server --history-api-fallback --inline --progress",
    "test": "karma start",
    "app": "npm run server",
    "heroku": "node server.js"
  },
  "repository": {
    "type": "git"
  },
  "dependencies": {
    "@angular/animations": "^4.1.3",
    "@angular/common": "^4.1.3",
    "@angular/compiler": "^4.1.3",
    "@angular/compiler-cli": "^4.1.3",
    "@angular/core": "^4.1.3",
    "@angular/forms": "^4.1.3",
    "@angular/http": "^4.1.3",
    "@angular/material": "^2.0.0-beta.6",
    "@angular/platform-browser": "^4.1.3",
    "@angular/platform-browser-dynamic": "^4.1.3",
    "@angular/platform-server": "^4.1.3",
    "@angular/router": "^4.1.3",
    "@ngtools/webpack": "^1.4.1",
    "@types/core-js": "^0.9.41",
    "@types/gapi": "0.0.33",
    "@types/gapi.auth2": "0.0.39",
    "@types/hammerjs": "^2.0.34",
    "@types/jasmine": "^2.5.51",
    "@types/jquery": "^2.0.46",
    "@types/lodash": "^4.14.65",
    "@types/node": "^7.0.29",
    "@types/systemjs": "^0.20.2",
    "amcharts3-angular2": "^1.2.1",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.1.3",
    "bufferutil": "^3.0.1",
    "compression": "^1.6.2",
    "compression-webpack-plugin": "^0.4.0",
    "core-js": "^2.4.1",
    "css-loader": "^0.28.4",
    "express": "^4.15.3",
    "extract-text-webpack-plugin": "^2.1.2",
    "favicons-webpack-plugin": "0.0.7",
    "file-loader": "^0.11.2",
    "firebase": "^4.1.2",
    "fs": "0.0.1-security",
    "hammerjs": "^2.0.8",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "intrinio-realtime": "^1.0.1",
    "jasmine-core": "^2.6.3",
    "jquery": "^3.2.1",
    "json-loader": "^0.5.4",
    "jspdf": "^1.3.3",
    "karma": "^1.7.0",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.3",
    "node-sass": "^4.5.3",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.14",
    "postcss-loader": "^2.0.5",
    "raw-loader": "^0.5.1",
    "resolve-url-loader": "^2.0.2",
    "rimraf": "^2.6.1",
    "rxjs": "^5.4.0",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.18.2",
    "systemjs": "^0.20.13",
    "to-string-loader": "^1.1.5",
    "typescript": "^2.3.4",
    "url-loader": "^0.5.8",
    "utf-8-validate": "^3.0.2",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5",
    "webpack-merge": "^4.1.0",
    "zone.js": "^0.8.12"
  }
}

[midhunadarvin]

@rycharlind I am also getting that error. It has to do something with AOT compilation as mention here . It says to build without AOT for production.