I have had Google AdSense for quite a while now and everyting has been working fine in my Angular app. That however has changed in the past few days where I have noticed on mobile devices the site was freezing when I had AdSense running. I could prove that was the root cause of the issue because if I don't enable them the site works like a charm however I have them enabled I get either blank page screen (total or partial) or the site hangs.
I have tested that behavior on a PC, a Mac, old iPads, various iPhones and an Android phone. On PC it works on Chrome without a problem however I could reproduce the issue on Edge. The site hangs but nothing is displayed in the console. On old iPads I could not get ads rendered therefore the site works as expected (considering the compatibility issues due to the versions of Safari). When tested on a Mac I got it working on both Safari and Chrome. Trying on iOS 16.3 and 16.6 I could reproduce the problem and I could see the site working when rejecting the analytics and marketing cookies. Android with new OS didn't show any issues either however I don't have the exact version. Old versions of Android seem to have the problem as well. If you want to test the behavior you can check https://www.micarburante.com .
My site is currenly on version 16.2.0 and the TS config is configured this way:
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"lib": [
"ES2022",
"dom"
],
"useDefineForClassFields": false
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
My package.json has the following packages:
"dependencies": {
"@angular/animations": "^16.2.0",
"@angular/common": "^16.2.0",
"@angular/compiler": "^16.2.0",
"@angular/core": "^16.2.0",
"@angular/elements": "^16.2.0",
"@angular/forms": "^16.2.0",
"@angular/platform-browser": "^16.2.0",
"@angular/platform-browser-dynamic": "^16.2.0",
"@angular/platform-server": "^16.2.0",
"@angular/router": "^16.2.0",
"@fortawesome/angular-fontawesome": "^0.13.0",
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-regular-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@ng-select/ng-select": "^11.1.1",
"@nguniversal/common": "^16.2.0",
"@nguniversal/express-engine": "^16.2.0",
"@webcomponents/custom-elements": "1.5.1",
"bootstrap": "^5.3.1",
"chart.js": "^3.6.0",
"compression": "^1.7.4",
"express": "^4.18.2",
"leaflet": "^1.9.4",
"ng-recaptcha": "^12.0.2",
"ng2-charts": "^4.1.1",
"ngx-cookie-service": "^16.0.0",
"rxjs": "~7.8.1",
"tslib": "^2.3.0",
"zone.js": "~0.13.1"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^16.0.0",
"@angular-devkit/build-angular": "^16.2.0",
"@angular/cli": "^16.2.0",
"@angular/compiler-cli": "^16.2.0",
"@angular/language-service": "^16.2.0",
"@nguniversal/builders": "^16.2.0",
"@types/express": "4.17.17",
"@types/leaflet": "1.9.3",
"@types/node": "20.4.8",
"concat": "1.0.3",
"fs-extra": "11.1.1",
"jasmine-core": "3.8.0",
"karma": "^6.4.0",
"karma-chrome-launcher": "3.1.0",
"karma-coverage-istanbul-reporter": "^3.0.2",
"karma-jasmine": "4.0.0",
"karma-jasmine-html-reporter": "1.5.0",
"postcss-scss": "4.0.6",
"purgecss-webpack-plugin": "5.0.0",
"typescript": "^4.9.3",
"webpack-bundle-analyzer": "^4.9.0"
}
I don't have anything fancy on my build process - only running PurgeCSS to reduce the style.css file size.
The AdSense configuration is pretty standard and I don't really know what could be happening. I checked this in case it could be related Angular website fails on iOS 16.5 or newer but I have the latest version of iOS and still doesn't work. I also updated to the Angular 16.2.0 just in case but it didn't work either. I tried to set the TS config to be for ES2020 or ES2015 to see if it was related to incompatibility in terms of JS - ignoring if that could possibly be.
The last thing I tried was to disable, completely, client hydration so that my main.ts looks like this:
import { AppComponent } from './app/app.component';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideHttpClient } from '@angular/common/http';
import { bootstrapApplication, provideClientHydration } from '@angular/platform-browser';
import { provideRouter, withEnabledBlockingInitialNavigation, withInMemoryScrolling, withRouterConfig } from '@angular/router';
import routes from './app/app.routes';
bootstrapApplication(AppComponent, {
providers: [
provideHttpClient(),
provideAnimations(),
provideRouter(routes,
withInMemoryScrolling({
scrollPositionRestoration: 'top',
anchorScrolling: 'enabled',
}),
withEnabledBlockingInitialNavigation(),
withRouterConfig({
paramsInheritanceStrategy: 'always',
onSameUrlNavigation: 'reload'
})
),
//provideClientHydration()
]
})
.catch(err => console.error(err));
and my main.server.ts looks like this (I have my entire application configured to use only standalone components and I have SSR in place as well):
import { bootstrapApplication, provideClientHydration } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideServerRendering } from '@angular/platform-server';
import { provideHttpClient } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import routes from './app/app.routes';
const bootstrap = () => bootstrapApplication(AppComponent, {
providers: [
provideHttpClient(),
provideRouter(routes),
provideServerRendering(),
//provideClientHydration(),
]
});
export default bootstrap;
The actual freeze happens when you navigate to the home page and scroll all the way down to the bottom of it and click either a link in the related links (something for example "Gasolineras en Madrid") or you click any element of the footer.
