Angular-calendar: 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: https://github.com/angular/angular-cli/issues/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" ],