Angular 5: Unhandled promise rejection: Failed to load html file

Question

I have an issue with Angular 5. I am trying to run my application in production mode using aot in ng serve ==> ("start": "ng serve --ssl --aot" in package.json file). However, the application cannot find the html files in this case. It works without aot though. I tried several solutions (mentioned here or here) like changing the file path (e.g., absolute path) in templateUrl field in those files or changing the app routing or adding moduleId: module.id, but they don't work. See the below error:

Any idea?

@Likwid_T You mean commenting `"baseUrl": "./"` in the tsconfig? — Enayat, Dec 20 '17 at 16:22
sorry .. did you have configured properly the enviroment.prod.ts file?? — federico scamuzzi, Dec 20 '17 at 16:25
@federicoscamuzzi My environment.prod is the same as environment.ts except, production:true. Should I change something in the prod file? Maybe I am missing something here? — Enayat, Dec 20 '17 at 16:31
mmm .. it looks strange that it 's trying to ask your template to LOCALHOST .. instead of (for example) www.myproductionhost.com ... — federico scamuzzi, Dec 20 '17 at 16:32
@federicoscamuzzi I will have a look again, but I took this configuration from my other projects that are working... — Enayat, Dec 20 '17 at 16:52

score 1 · Accepted Answer · answered Jan 02 '18 at 19:29

I had a similar issue in one of my projects.

The issue for me was that I was bootstrapping my app in a different file (we had requirements on when the user could be logged in or not, we didn't want to load the app if they couldn't).

It worked with Angular 4, and when we upgraded to Angular 5 we got the error.

We had something along the lines of this:

const hack = false;
if (hack) {
  platformBrowserDynamic().bootstrapModule(AppModule);
}

const bootstrap = new Bootstrap(AppModule);
bootstrap.initializeBootstrap();

We passed in our module and let the bootstrap file do the rest. We did it this way as in Angular 4 there was a bug that didn't allow the bootstrap code to be in another file or a promise, see the following:

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

Angular 4.0.0 could not find bootstrap code

Changing it to be promise based seemed to have solved the issue after upgrading to Angular 5.

const bootstrap = new Bootstrap();
bootstrap.initializeBootstrap().then(() => {
  console.log('user is allowed to see, bootstrap the app');
  platformBrowserDynamic().bootstrapModule(AppModule);
}, (error) => {
  console.log('user is not allowed access do something here', error);
});

Hope this helps.

It worked when I changed the call back in my bootstrap to Promise.resolve(). Thank you! — Enayat, Jan 02 '18 at 19:38

Angular 5: Unhandled promise rejection: Failed to load html file

1 Answers1