Closed
Description
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
Yes
Description
Greetings to everyone,
First of all, I would like to thank the entire Angular team for giving us the opportunity to provide development in the development section of our express api directly in the server.ts file for Angular 19.
I apologize in advance for my low-intermediate level English :)
When I add Tailwind plugin to my project, I do not encounter any problems in the development environment.
But when I got the build and
npm run serve:ssr:FirstAngular19Project
When I run the command, I go to localhost:4000 and I get the following error and the page loads very late.
Can you please take care of this issue? Thanks in advance, good work.
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run ng version)
"dependencies": {
"@angular/animations": "^19.0.0-next.0",
"@angular/common": "^19.0.0-next.0",
"@angular/compiler": "^19.0.0-next.0",
"@angular/core": "^19.0.0-next.0",
"@angular/forms": "^19.0.0-next.0",
"@angular/platform-browser": "^19.0.0-next.0",
"@angular/platform-browser-dynamic": "^19.0.0-next.0",
"@angular/platform-server": "^19.0.0-next.0",
"@angular/router": "^19.0.0-next.0",
"@angular/ssr": "^19.0.0-rc.1",
"express": "^4.18.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.0.0-rc.1",
"@angular/cli": "^19.0.0-rc.1",
"@angular/compiler-cli": "^19.0.0-next.0",
"@types/express": "^4.17.17",
"@types/jasmine": "~5.1.0",
"@types/node": "^18.18.0",
"autoprefixer": "^10.4.20",
"jasmine-core": "~5.4.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"postcss": "^8.4.47",
"tailwindcss": "^3.4.14",
"typescript": "~5.6.2"
}
Anything else?
app.component.ts
import { isPlatformBrowser } from '@angular/common';
import { Component, Inject, PLATFORM_ID } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
imports: [],
template: `
<div class="flex justify-around pt-10 dark:animate-bounce">
<div>
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>
</div>
<div>
<button type="button" class="py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Alternative</button>
</div>
<div>
<button type="button" class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">Dark</button>
</div>
</div>
<input type="checkbox" name="light-switch" class="light-switch" />
<label for="light-switch">Switch to light / dark version</label>
`,
})
export class AppComponent {
constructor(@Inject(PLATFORM_ID) private _platformId: Object) { }
ngAfterViewInit() {
if (isPlatformBrowser(this._platformId)) {
const lightSwitches = document.querySelectorAll('.light-switch');
if (lightSwitches.length > 0) {
lightSwitches.forEach((lightSwitch, i) => {
if (localStorage.getItem('dark-mode') === 'true') {
//@ts-ignore
lightSwitch.checked = true;
}
lightSwitch.addEventListener('change', () => {
//@ts-ignore
const { checked } = lightSwitch;
lightSwitches.forEach((el, n) => {
if (n !== i) {
//@ts-ignore
el.checked = checked;
}
});
//@ts-ignore
if (lightSwitch.checked) {
document.documentElement.classList.add('dark');
//@ts-ignore
localStorage.setItem('dark-mode', true);
} else {
document.documentElement.classList.remove('dark');
//@ts-ignore
localStorage.setItem('dark-mode', false);
}
});
});
}
}
}
}
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.html',
'./src/**/*.ts',
],
darkMode: "class", // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
styles.css
/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;