Hi everyone, i’am confronted I have a problem and I’m asking for help… I’m developing an application using geolocation from openstreetmap and suppabase as a database. After making a change, the app crashes on loading with a white or black screen in the preview.I’m seeing the same error on another of my applications under development that also uses OpenStreetMap and is connected to Supbase on which I had not applied any modifications before and which worked very well. My question: are these malfunctions due to the build or to an external factor? I need help.
2 Likes
For the past two hours, my application has been displaying a blank page from Google AI Studio and loading indefinitely since the version I deployed on Google Cloud. (I haven’t changed them)
This doesn’t happen to me on all applications, so I wonder if it’s related to certain libraries or importmap.
I am facing the same issue, all of a sudden its not previewing. I got this message “Failed to load the app. Try reloading it.”
I have Same Issue Blank Screen on reload. Clean Cokies, Cache, ISP Clean DNS. I run Prompt inside the AI Assistant in the App Chat to Diagnose if some part of the Codebase Failed, or i have Broken partial not full code function. I didnt use the app for a week. Yesterday it was working fine. Didn’t make any codebase changes. And today it saying
// Warning “Failed to load the app. Try reloading it.”
I use this and couple more apps in the AI Studio and in december have same issue. IT Comes from the Cloudflare massive Interruption - and because in the AI Studio we load the scripts from CDN this was the issue. The Next Day it run alone without any Problem.
I am sure now is similar issue - some important Scripts, Functions and Code Library are in Cloudflare which have different outages every day.
Anyway the Ai Studio Code Assistant did Audit, Analyze and Write me a Summary of the Problem and some possible issues. It Looks absoloutley same Problem when the CDN by Cloudflare got down for all day or two. I am sure it’s a similar Issue abd the Summary Below seems like Logic Explanation.
Here is a summary of the application’s structure and an analysis of the loading problem.
Application Architecture & File Summary
Your application is a modern, standalone Angular application that relies heavily on external services for its libraries (via CDNs), data (via Time Doctor API), and persistence (via Firebase).
-
index.html: This is the most critical file for understanding the loading issue. It sets up the basic page, loads Tailwind CSS for styling, and, most importantly, contains an . This import map tells the browser where to download all the application’s core dependencies, like Angular, RxJS, and Firebase, from various Content Delivery Networks (CDNs). This is the likely source of the problem.
-
index.tsx: This is the entry point that “boots up” your Angular application. It imports the necessary libraries (which the browser looks up in the import map) and starts the root component (AppComponent). If any of those libraries fail to download, this file cannot execute properly, and the app will fail to load.
-
src/app.component.ts / .html: This is the main “shell” of your application. It contains the sidebar, the top status bar, and the main content area where all other pages are displayed. It holds a significant amount of the application’s global state and logic.
-
src/app.routes.ts: This file defines all the possible pages (routes) in your application, linking a URL path like /dashboard or /analysis to its corresponding component.
-
src/services/ folder: This is the logical core of your app.
-
url-generator-state.service.ts: A large and critical service that manages most of the application’s state using Angular Signals. It handles everything from API request parameters and bulk payroll runs to presets and UI state.
-
user-data.service.ts: Responsible for all interactions with the Firebase Firestore database. It saves and retrieves user information, reports, company rules, and activity thresholds.
-
api.service.ts: Handles the actual HTTP calls to the external Time Doctor API, using a CORS proxy to prevent browser security issues.
-
gemini.service.ts: Manages all interactions with the Google Gemini AI for analysis tasks.
-
Other services like ui.service.ts, chat.service.ts, and conversion.service.ts manage specific parts of the application’s functionality.
-
-
src/pages/ folder: Contains the main feature components for each page of the application (e.g., the Dashboard, the Analysis page, Settings, etc.).
-
src/components/ folder: Contains smaller, reusable UI pieces that are used across different pages, such as the video player, modals, and charts.
-
src/firebase.config.ts: This file contains the configuration keys for your Firebase project and initializes the connection to the Firestore database and Storage.
Audit Conclusion on the Loading Failure
Your analysis of the problem is correct. The application is architected to be “serverless” from a dependency perspective, meaning it relies entirely on CDNs to provide its core libraries at runtime.
-
Primary Cause: The importmap in index.html loads RxJS (a critical Angular dependency) from aistudiocdn dot com… As your research indicated, if this specific domain is blocked by an ad-blocker, browser extension, corporate firewall, or an ISP’s security feature, the application cannot download RxJS. Without RxJS, Angular cannot start, resulting in the “Failed to load the app” error.
-
Other Potential Points of Failure: The same issue could occur if any of the other CDNs are blocked, such as next.esm.sh (which provides Angular itself) or cdn.tailwindcss.com. However, aistudiocdn dot com is a common culprit in these environments.
-
Code Integrity: The application code itself does not have any apparent errors that would prevent it from bootstrapping. The logic, services, and components are structured to run correctly after all dependencies have been successfully loaded. The error you are seeing happens before any of your application’s specific logic has a chance to execute.
In short, the application is sound, but its dependency on externally hosted scripts makes it vulnerable to network-level blocking. The steps you found are the correct ones to resolve this issue.
Same for a few hours also
Hi everyone, everything is back to normal for me. Hi everyone, everything is back to normal for me. I hope it’s the same for you.
Thank you
1 Like
Yes, can confirm everything is back to normal also.