devyumao / angular2-busy

Show busy/loading indicators on any promise, or on any Observable's subscription.
http://devyumao.github.io/angular2-busy/demo/asset/
MIT License
314 stars 102 forks source link

Cannot find module with Lazy load on prod build #76

Open FernandoManoelAlmeida opened 7 years ago

FernandoManoelAlmeida commented 7 years ago

For some reason this happens when I use Prod Mode (ng build --prod):

vendor.55c6bfa….bundle.js:1 ERROR Error: Uncaught (in promise): Error: Cannot find module 'app/modules/content/content.module'.
Error: Cannot find module 'app/modules/content/content.module'.

My configs. Package:

"dependencies": {
    "@angular/animations": "^4.3.1",
    "@angular/common": "^4.3.1",
    "@angular/compiler": "^4.3.1",
    "@angular/core": "^4.3.1",
    "@angular/forms": "^4.3.1",
    "@angular/http": "^4.3.1",
    "@angular/platform-browser": "^4.3.1",
    "@angular/platform-browser-dynamic": "^4.3.1",
    "@angular/router": "^4.3.1",
    "angular2-busy": "^2.0.4",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "ng2-device-detector": "^1.0.0",
    "ng2-pagination": "^2.0.2",
    "ng2-toastr": "^4.1.2",
    "ngx-bootstrap": "^1.8.0",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.2.2",
    "@angular/compiler-cli": "^4.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.84",
    "codelyzer": "~2.0.0",
    "concurrently": "^3.5.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }

app.module:

import { DEFAULT_CONFIG } from '../../config/busy.config';

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...
        BusyModule.forRoot(DEFAULT_CONFIG),
        ...
    ],

app.routes:

const ROUTES: Routes = [
    { path: '',              redirectTo: 'dashboard', pathMatch: 'full' },
    ...
    { path: 'dashboard',     loadChildren: 'app/modules/dashboard/dashboard.module#DashboardModule' },
    ...
    { path: '**',            component: NotFoundComponent, pathMatch: 'full' }
];

dashboard.module:

import { DEFAULT_CONFIG } from '../../config/busy.config';

@NgModule({
  declarations: [ HomeComponent ],
  imports: [
      ...
      BusyModule.forRoot(DEFAULT_CONFIG),
      ...
  ],

DEFAULT_CONFIG:

import { BusyConfig } from 'angular2-busy';

const spinnerTemplate =  `
      (some generic spinner)
    `;

export const DEFAULT_CONFIG: BusyConfig = {
    template: spinnerTemplate,
    delay: 200,
    minDuration: 600,
    backdrop: true,
    message: '',
    wrapperClass: ''
};

Some help?

FernandoManoelAlmeida commented 7 years ago

I found this fork working well.

https://www.npmjs.com/package/tixif-ngx-busy

mohsenvafa commented 7 years ago

@FernandoManoelAlmeida thanks for sharing, tixif-ngx-busy is working

not-for-me commented 7 years ago

@FernandoManoelAlmeida Thanks for sharing * 2. You saved my time. tixif-ngx-busy is working.

kondi0 commented 7 years ago

Yep,

tixif-ngx-busy is working well!!

Thanks!

Sathishchary commented 7 years ago

@FernandoManoelAlmeida thanks , its working.

osixia commented 7 years ago

tixif-ngx-busy seems not working anymore :(

diandsonc commented 7 years ago

@FernandoManoelAlmeida thanks.

tixif-ngx-busy its working

@osixia its working

osixia commented 7 years ago

@diandsonc oh yes indeed it works, i was using --build-optimizer.

But with --build-optimizer i have this error:

Cannot resolve all parameters for 'Parser'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'Parser' is decorated with Injectable.

busy.component.ngfactory.ts:56 
diandsonc commented 7 years ago

@osixia send your code

on Module.ts import { BusyModule } from 'tixif-ngx-busy' imports: [BusyModule.forRoot(busyConfig)

on Component.ts public loading: Subscription; this.loading = this._authService.login(data).subscribe

on Component.html <div [ngBusy]="{busy: [loading]}"></div>