Search code examples
angularangular2-aotangular-aot

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

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:

enter image description here

Any idea?

Solution

  • 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.