Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

Question

just yesterday my code was working fine, made no changes to the app module and today when using "ng build --prod" I get this error. I know that it's not related to changes, when I pull older branches I get the same error. I don't know what to do, a recommendation was to update each package, but even after I still get the same error. Not even sure if you guys can help, but here's my app.module:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';

import {AppComponent} from './app.component';
import {LoginComponent} from './login/login.component';
import {CompareComponent} from './compare/compare.component';
import {RouterModule} from "@angular/router";
import {CompareCardComponent} from './compare/compare-card/compare-card.component';
import {LayoutComponent} from './layout/layout.component';
import {CompareValuePipe} from "./compare/compare-card/compare-card.pipe";
import {HomeComponent} from './home/home.component';
import {NewLocationComponent} from './new-location/new-location.component';
import {SignupComponent} from './signup/signup.component';
import {ValidateMe} from "./shared/me.suite/validate.me/validate.me";
import {TagsComponent} from './tags/tags.component';
import {GoogleplaceDirective} from './third-party/angular2-google-map-auto-complete/directives/googleplace.directive';
import { LoaderComponent } from './shared/loader/loader.component';
import { AlertComponent } from './shared/alert/alert.component';
import {Angulartics2GoogleAnalytics, Angulartics2Module} from "angulartics2";
import { OverallPipe } from './compare/overall.pipe';
import {InteractiveComponent} from "./question/interactive/interactive.component";
import { FormComponent } from './question/form/form.component';
import { KpiDescComponent } from './compare/kpi-desc/kpi-desc.component';
import {HashLocationStrategy, Location, LocationStrategy} from "@angular/common";
import {AccountApi} from "./services/account-api.service";
import {SettingsApi} from "./services/settings-api.service";
import {DataApi} from "./services/data-api.service";
import { ZeezorInfoComponent } from './zeezor-info/zeezor-info.component';

const ROUTES = [
    {path: '', redirectTo: '/home', pathMatch: 'full'},
    {path: 'compare', component: CompareComponent},
    {path: 'new', component: NewLocationComponent},
    {path: 'tags', component: TagsComponent},
    {path: 'interactive', component: InteractiveComponent},
    {path: 'form', component: FormComponent},
    {path: 'login', component: LoginComponent},
    {path: 'signup', component: SignupComponent},
    {path: 'home', component: HomeComponent},
    {path: '**', component: HomeComponent}
];

@NgModule({
    declarations: [
        LayoutComponent,
        AppComponent,
        LoginComponent,
        CompareComponent,
        CompareCardComponent,
        CompareValuePipe,
        InteractiveComponent,
        HomeComponent,
        NewLocationComponent,
        SignupComponent,
        ValidateMe,
        TagsComponent,
        GoogleplaceDirective,
        LoaderComponent,
        AlertComponent,
        OverallPipe,
        FormComponent,
        KpiDescComponent,
        ZeezorInfoComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot(ROUTES),
        Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ])
    ],
    providers: [AccountApi, DataApi, SettingsApi, Location, {provide: LocationStrategy, useClass: HashLocationStrategy}],
    bootstrap: [AppComponent]
})
export class AppModule {
    constructor(){
        let style = document.createElement('link');
        style.rel = "stylesheet";
        style.href = SettingsApi.styleEndpoint;
        window.document.head.appendChild(style);
        console.log(navigator.userAgent);
    }
}

Package.json

{
  "name": "stack-up",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "compile": "ng build --environment=mobile --output-path ../mobile/www/",
    "compile:prod": "ng build --environment=mobile --target=production --output-path ../mobile/www/",
    "docker": "ng build --environment=docker",
    "local": "ng serve --environment=local",
    "dev": "ng build --environment=dev",
    "prod": "ng build --environment=prod --target=production --output-path /var/www/html/"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "angular2-jwt": "^0.2.2",
    "angular2-social-login": "^2.1.0",
    "angulartics2": "^2.2.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "tslint": "^3.15.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-beta.31",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.0"
  }
}

score 4 · Accepted Answer · edited Jul 26 '17 at 23:19

4

I had a similar problem yesterday (same error message) and I fixed it based on this angular-cli issue:

https://github.com/angular/angular-cli/issues/7125

The fix was to pin enhanced-resolve to version 3.3.0 in my package.json, delete node_modules, run npm install, then build again. This seems to have fixed the problem for some of the people in the issue thread.

The newer version of enhanced-resolve seems to be causing some problem.

If it still breaks make sure you have the correct enhanced-resolve version by running npm ls enhanced-resolve.

edited Jul 26 '17 at 23:19

Zze

18,229
13
85
118

answered Jul 25 '17 at 20:02

Brian Walker

8,658
2
33
35

Cha-Ching! Thanks man, I saw that thread, tried it, but didn't get the specific version or uninstall the node_modules. Cheers! – Brayan Byrdsong Jul 25 '17 at 20:08
Is 'pin' the term used instead of 'add' in a package? – Zze Jul 26 '17 at 23:20
'pin' means to set a specific version. For package.json that means removing any tilde (~) or caret (^) characters from the version string. In this case "enhanced-resolve": "3.3.0" is added to the package.json so that specific version is used. – Brian Walker Jul 27 '17 at 14:26

score 4 · Answer 2 · answered Jul 26 '17 at 23:23

For anyone else coming accross this, there was a descrepency with older versions of angular-cli and angular. Source.

To resolve this, upgrade angular-cli to @latest.

npm uninstall -g angular-cli
npm cache clean
npm install -g @angular/cli@latest
Depending on your system, you may need to prefix the above commands with sudo.

Also, most likely you want to also update your local project version, because inside your project directory it will be selected with higher priority than the global one:
rm -rf node_modules
npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install
How to upgrade Angular CLI to the latest version

score 1 · Answer 3 · answered Feb 01 '19 at 04:12

1

I just ran into this issue today. I tried running the command:

ng build --env=prod instead of ng build --prod and it seems to have solved it without adding enhanced-resolve in the package.json.

answered Feb 01 '19 at 04:12

Noel R.

133
2
6

this was the ticket for me -- having to use node v6 and an old set of deps to try and rebuild the current release of something mean I had to: 1. clear node_modules and let it re-download everything 2. use the `--env=prod` argument to ng build – Joel Kleier Jul 19 '22 at 11:29

score 0 · Answer 4 · answered Jul 30 '17 at 17:22

0

If you don't want to use @latest angular-cli, update @angular-cli at least to v1.2.6. It's solved issue for now and you don't need to install enhanced-resolve and so on. https://github.com/angular/angular-cli/issues/7113

answered Jul 30 '17 at 17:22

atereshkov

4,311
1
38
49

score 0 · Answer 5 · answered Aug 09 '17 at 16:11

0

As mentioned in the previous answer, the enahnced-resolve version 3.4.1 was causing the issue. Using version 3.3.0 fixes the issue. We can pin the dpendencies versions using nopm-srinkwrap.json

answered Aug 09 '17 at 16:11

Suresh

505
1
4
14

Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

5 Answers5

Linked