Angular-cli: ng build -prod app stuck on loading screen

[CristyTarantino]

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Mac El Capitan
2. Versions.

angular-cli: 1.0.0-beta.5
node: 5.11.1
os: darwin x64

1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

I have a component and in the file I do:

import { chartViewProvider } from '../shared/chartview.service';
@Component({
  ...,
  providers: [
    chartViewProvider
  ]
})

in chartview.service file

export let chartViewFactory = (service: IResearchService, obj: any): any => {
    ... return new object
  }
};

export let chartViewProvider = provide(CHARTVIEW, {
  useFactory: () => chartViewFactory
});

Where CHARTVIEW and ChartView are:

import { OpaqueToken } from '@angular/core';
import { IResearchService } from './research.service.interface';

export let CHARTVIEW = new OpaqueToken('ChartView');

export interface ChartView {
  id: number | string;
  name: string;
  render(region: string, fromdate: string, todate: string, xCategories?: Array<string>): void;
}

Basically trying to use https://angular.io/docs/ts/latest/guide/dependency-injection.html guide for factory provider.

If I do ng serve the app works perfectly.
If I do ng serve -prod the app shows the loading screen and it never loads.
If I comment out

 providers: [
   // chartViewProvider
  ]

and then ng serve -prod the app works fine.

1. The log given by the failure. Normally this include a stack trace and some
   more information.

There is literally no error message either in the terminal or in the console.

Thanks for any help.

[jeffbcross]

@CristyTarantino did you create the project using the --mobile flag, i.e. ng new --mobile some-app?

[CristyTarantino]

@jeffbcross no I didn't. Just ng new testapp

[jwoehrle]

I'm having a similar issue. I included ng2-bootstrap into my app. It works in non-prod mode, but however, as soon as I have a
providers: [AlarmComponent]
in the decorator of my own component, the ng serve -prod is stuck at the loading screen without any errormessage or pending http operations.

When I run without the "-prod" switch everything works as expected (including the Bootstrap style of AlarmComponent).

My environment:
-Windows 10 x64,
-node v5.11.0
-npm 3.8.6
-ng 1.0.0-beta.5.

[filipesilva]

This seems _related_ to https://github.com/angular/angular-cli/issues/951 but from the information here it is not the same.

@CristyTarantino @jwoehrle did you add any third party libraries to your project?

[jwoehrle]

@filipesilva yes, I included ng2-bootstrap and along with it momentjs... I will try changing the package format as suggested in your answer in #951 first thing tomorrow morning and let you know if this helps.

[CristyTarantino]

@filipesilva no I don't have any third party so far. I was just following the tutorial.

[filipesilva]

@CristyTarantino could you provide me with a repo so I can debug the issue?

[CristyTarantino]

@filipesilva having a look through the repo I was using lodash without specifying the format.
I just added format: 'cjs' and it all seemed to work. Thanks so much for your help.

[jwoehrle]

@filipesilva I can confirm that adding (system-config.ts) the package format as:

'moment': {
    format: 'cjs'
  }

resolved my issue. Thank you very much.
Can you elaborate on no error at all being present when facing this issue? Is there anything which could've pointed me in the right direction?

Can't wait for the final version of angular-cli to be released :+1:

[filipesilva]

@CristyTarantino @jwoehrle glad to hear it's working for you now!

There is some more information regarding the why and how of this happening on this issue https://github.com/angular/angular-cli/issues/951#issuecomment-222863004

I believe the need for specifying every package format will be gone in beta.6 though, due to changes in our bundling procedure.

[davidgodzsak]

I have the same issue, but I don't have any third party libraries included.
I just created a project with ng new testproject and then run ng build --prod. The app works fine with ng serve, but not with ng build --prod neither ng build. It is stuck at the loading screen, when I run it locally (open index.html in a browser). Or should I put it on a server? I guess it should be working locally too. I guess it is just javascript and html.

[SnuK87]

I had the same issue and could solve it by manually changing
<base href="/"> to <base href="./"> in my index.html. (Working on Windows)

[juanmonsalveh]

@SnuK87 it worked to me! to redirect to my "home"... Thanks, for your comment...
do you know a way to do this while developing ? in order to not modify the dist generated files to deploy?
it would be so useful...

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}