找不到模块：错误：无法解析'./$$_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"
  }
}

Answer 1

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 .

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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.