Can't get styling applied to calendar

[gh0st]

This is the closest I can get to applying styling following code in the demo.

The only error I'm getting in my browser is

[Error] TypeError: undefined is not an object (evaluating 'window.FontAwesomeCdnConfig.asyncLoading')
    runTask (main.bundle.js:79243)
    invoke (main.bundle.js:79407)

I do not have an entry.ts but I'm using a main.ts inside my src folder. It's contents are

import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.css';
import 'angular2-calendar/dist/css/angular2-calendar.css';
import 'intl';
import 'intl/locale-data/jsonp/en';
import 'core-js';
import 'zone.js/dist/zone';
import './polyfills.ts';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from './environments/environment';
import { AppModule } from './app/';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

[mattlewis92]

I can't see anything that'd obviously wrong there, I suspect it's probably an issue with your build tool. What are you using? e.g. webpack, system.js etc?

[gh0st]

@mattlewis92 I'm using angular-cli which uses webpack as my build tool.

[mattlewis92]

That'd odd, it should just work with the CLI. There's definitely some other config interfering with your app though as from the screenshot you can see the optional bootstrap theme is also being included and it's not referenced in the code snippet you included.

[mattlewis92]

Ah, this is a CLI issue actually, they don't support including stylesheets in typescript config as it's non standard: angular/angular-cli#1459

I think you need to include the stylesheet somewhere in your cli config, there was a PR referenced at the end of that issue that shows how to do it.

[kodiraj]

i am also facing the same issue.i am not getting any error

[mattlewis92]

@kodiraj you're not including the stylesheets into your app. You need this somewhere:

import 'angular2-calendar/dist/css/angular2-calendar.css';

[JohnnyMatteus]

Just include it in angular.json and refresh the application. Because the CLI does not recognize the @import by the browser, it even loads, but the settings does not apply. I am using CLI version 6.0.x

[JohnnyMatteus]

@kodiraj você não está incluindo as folhas de estilo em seu aplicativo. Você precisa disso em algum lugar:

import 'angular2-calendar/dist/css/angular2-calendar.css';

I made this configuration in angular.json and it worked

[moytho]

Same thing here. Just added this css file into my angular.json styles section
"styles": [ "styles/index.scss", "./node_modules/angular-calendar/css/angular-calendar.css" ],

[Manoj-Khadka]

include the CSS file in the global (not component scoped) styles of your app:

/* angular-cli file: src/styles.css */
@import "../node_modules/angular-calendar/css/angular-calendar.css";

[Shabaltasov]

include the CSS file in the global (not component scoped) styles of your app:

/* angular-cli file: src/styles.css */ @import "../node_modules/angular-calendar/css/angular-calendar.css";

Hi, I have error :
Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Package path ./css/angular-calendar.css is not exported from package ...\node_modules\angular-calendar (see exports field in ...\node_modules\angular-calendar\package.json)

I include the CSS file in the global styles of my app:
@import "../node_modules/angular-calendar/css/angular-calendar.css";

In angular.json I alreadyhave this style
"styles": [
"node_modules/angular-calendar/css/angular-calendar.css",
"projects/business-slick-estimates/src/styles.scss"
],
angular/cli: "^15.2.7"

PLease, tell me how to fix it.

[Shabaltasov]

include the CSS file in the global (not component scoped) styles of your app:
/* angular-cli file: src/styles.css */ @import "../node_modules/angular-calendar/css/angular-calendar.css";

Hi, I have error : Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): HookWebpackError: Module build failed (from ./node_modules/css-loader/dist/cjs.js): Error: Package path ./css/angular-calendar.css is not exported from package ...\node_modules\angular-calendar (see exports field in ...\node_modules\angular-calendar\package.json)

I include the CSS file in the global styles of my app: @import "../node_modules/angular-calendar/css/angular-calendar.css";

In angular.json I alreadyhave this style "styles": [ "node_modules/angular-calendar/css/angular-calendar.css", "projects/business-slick-estimates/src/styles.scss" ], angular/cli: "^15.2.7"

PLease, tell me how to fix it.

---

I got away from the problem of connecting styles and added a line
link href="https://unpkg.com/angular-calendar@0.20.0/dist/css/angular-calendar.css" rel="stylesheet"
in my component template
I’m not sure about the optimality and correctness of this solution, so I’ll wait for your answers and comments, thx

[Shabaltasov]

Hi, thanks to your response. I've already fixed it. сб, 3 авг. 2024 г. в 07:21, JAYAGOPAL ***@***.***>:

…

include the CSS file in the global (not component scoped) styles of your app: /* angular-cli file: src/styles.css */ @import <https://github.com/import> "../node_modules/angular-calendar/css/angular-calendar.css"; Hi, I have error : Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): HookWebpackError: Module build failed (from ./node_modules/css-loader/dist/cjs.js): Error: Package path ./css/angular-calendar.css is not exported from package ...\node_modules\angular-calendar (see exports field in ...\node_modules\angular-calendar\package.json) I include the CSS file in the global styles of my app: @import <https://github.com/import> "../node_modules/angular-calendar/css/angular-calendar.css"; In angular.json I alreadyhave this style "styles": [ "node_modules/angular-calendar/css/angular-calendar.css", "projects/business-slick-estimates/src/styles.scss" ], angular/cli: "^15.2.7" PLease, tell me how to fix it. I got away from the problem of connecting styles and added a line link href=" ***@***.***/dist/css/angular-calendar.css" rel="stylesheet" in my component template I’m not sure about the optimality and correctness of this solution, so I’ll wait for your answers and comments, thx Did you able to solve problem? I'm using Angular 18 facing same problem `X [ERROR] Could not resolve "../node_modules/angular-calendar/css/angular-calendar.css" src/styles/styles.scss:5:8: 5 │ @import "../node_modules/angular-calendar/css/angular-calendar.css"; ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~` — Reply to this email directly, view it on GitHub <#71 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYKEHDYCMAVGLHZQYCIRTGLZPRLGPAVCNFSM6AAAAABL5SDLICVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENRWGM3DKOJSG4> . You are receiving this because you commented.Message ID: ***@***.***>