Issues loading CSS

[vlameiras]

I'm using Angular 2 CLI and when I serve the application I get the following message:

ERROR in ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css
Module not found: Error: Can't resolve './fullcalendar/fullcalendar.min.css' in 'C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src'
 @ ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css 3:10-106
 @ ./src/styles.css
 @ multi styles

In the browser console

client?93b6:80 ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css
Module not found: Error: Can't resolve './fullcalendar/fullcalendar.min.css' in 'C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src'
resolve './fullcalendar/fullcalendar.min.css' in 'C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src'
  using description file: C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\package.json (relative path: ./src)
    using description file: C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\package.json (relative path: ./src/fullcalendar/fullcalendar.min.css)
      as directory
        C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src\fullcalendar\fullcalendar.min.css doesn't exist
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src\fullcalendar\fullcalendar.min.css doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src\fullcalendar\fullcalendar.min.css.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src\fullcalendar\fullcalendar.min.css.js doesn't exist
[C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src\fullcalendar\fullcalendar.min.css]
[C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src\fullcalendar\fullcalendar.min.css]
[C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src\fullcalendar\fullcalendar.min.css.ts]
[C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src\fullcalendar\fullcalendar.min.css.js]
 @ ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css 3:10-106
 @ ./src/styles.css
 @ multi styles

I also tried loading the CSS directly in the index.html but I get a 404 error on the browser.

Thanks, Vasco

[nekken]

Hi Vasco,

the CSS file might not be copied to your build when you use ng serve

in order for the build to copy the fullcalendar css, you have to add it in your angular-cli.json file like this:

"styles": [ "node_modules/fullcalendar/fullcalendar.min.css", ... ]

that will add the fullcalendar css file into your css build

Please refer to the angular-cli.json to know more about adding assets files to the project here: https://github.com/angular/angular-cli#project-assets

let me know if that works

[nekken]

Hi Vasco,

did that work for you?

[kingkarki]

I m also having same issue. i added "styles": [ "node_modules/fullcalendar/fullcalendar.min.css", ... ]

on angular-cli.json but no luck. i m getting following error ERROR in ./~/angular2-fullcalendar/src/calendar/calendar.ts Module not found: Error: Can't resolve 'fullcalendar' in '/Applications/apps/v2/doctor-app/node_modules/angular2-fullcalendar/src/calendar' @ ./~/angular2-fullcalendar/src/calendar/calendar.ts 12:0-22 13:0-39 @ ./src/app/school/school.module.ts @ ./src async @ ./~/@angular/core/@angular/core.es5.js @ ./src/main.ts @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts webpack: Failed to compile.

[malinn]

This worked for me: @import "~fullcalendar/dist/fullcalendar.min.css"; instead of: @import "fullcalendar/dist/fullcalendar.min.css";

thanks to: https://stackoverflow.com/a/42546788/1545775

[AltRoot17]

Try this its work for me @import " ~fullcalendar/dist/fullcalendar.min.css";