My current project involves an Angular 4.4 application that seems to be quite delicate and prone to breaking easily. The issue arises when I attempt to update the auth0-js module, causing the application to stop loading completely. Upon further investigation, it appears that the bootstrap component constructor is never called after running app.module.ts and main.ts. Despite numerous debugging attempts in Chrome and Firefox developer tools, the application just mysteriously halts without any clear indication as to why. I've inserted console.log statements at various points within the codebase, but the constructor of app.component.ts never seems to get invoked.
I meticulously isolated the changes made to the required modules, pinpointing them to the auth0-js module. Interestingly, there is only one required module, qs, which my code also uses. The other required modules are exclusive to auth0-js. To prevent any discrepancies, I locked the top-level qs version and mandated npm to install it as a dependency of auth0-js during the upgrade process. Despite these efforts, I cannot identify any alterations that could be causing this malfunction.
Regarding the auth0-js library itself, I have previously incorporated the latest version into a similar project with success. Strangely, the part of the code executed before the application abruptly stops does not contain any references to auth0-js. In essence, the execution flow ceases before reaching any auth0-js function calls or interactions.
The application is built using Angular CLI version 1.7.4, installed locally in the project directory (./node_modules/), and then launched using ng serve --env local. However, the server output lacks sufficient logging details, leading me to switch to serving via nginx and building using
ng build --output-hashing=all --env localBelow is an excerpt from my main.ts file:
import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';
if (environment.production) {
console.log('main.ts: enabling production mode');
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch((err) => console.error(err));
Update: I initially omitted the .catch method call on the bootstrapModule, but upon including it, an error message finally surfaced in the console:
Error: "Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten. Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)"
This newfound information provides some clarity and a starting point for further investigation. I plan to explore updating the zone.js version and ensuring its consistency with another library.
Lastly, here is a snippet from my package.json configuration:
{
"name": "ng2-cli",
"version": "0.0.0",
"license": "MIT",
// Remaining content unchanged...
}