search

atais / ng2-eonasdan-datetimepicker

A wrapper directive around the Eonasdan Datepicker v4 component.
MIT License
34 stars 23 forks source link

css issue #46

Closed jsutStacy closed 6 years ago

jsutStacy commented 6 years ago

CSS is broken. How to fix it?

screen shot 2018-05-02 at 16 27 02

angular-cli.json:

"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/font-awesome/css/font-awesome.css", "../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css"

  ],
  "scripts": ["../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/tether/dist/js/tether.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js",
    "../node_modules/moment/moment.js",
    "../node_modules/moment/min/moment.min.js",
    "../node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"
  ],

vendors.ts:

// css files import 'bootstrap/dist/css/bootstrap.min.css'; import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css'; // js files import as $ from 'jquery'; window['jQuery'] = window['$'] = $; import 'bootstrap/dist/js/bootstrap.min.js'; import 'eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js'; import as moment from 'moment';

fetrarij commented 6 years ago

hello @jsutStacy , I'm confused why you use angular cli and have vendor.ts. I guess you are using webpack so check our webpack.config.json , you may need to add a extract-text-webpack-plugin css-loader, css-loader and style-loader for css test: install the loader with: npm i style-loader extract-text-webpack-plugin css-loader--save then in webpack.config.json change the css test with:

 {
  test: /\.css$/,
  loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
},
jsutStacy commented 6 years ago

This meant that I tried both angular-cli and webpack. Anyway, when trying your advice I got the error:

ERROR in ./~/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css Module build failed: ReferenceError: window is not defined ERROR in ./~/bootstrap/dist/css/bootstrap.min.css Module build failed: ReferenceError: window is not defined

fetrarij commented 6 years ago

@jsutStacy Do you have extract-text-webpack-plugin css-loader and css-loader too in your package.json? you need to add theses plugins

jsutStacy commented 6 years ago

yes,

"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^2.1.2",
fetrarij commented 6 years ago

how is your webpack.config.json?

jsutStacy commented 6 years ago

it has only these lines:

externals: { jquery: 'jQuery' }

fetrarij commented 6 years ago

@jsutStacy in webpack.config.js , line 59, from the file you sent from the other topic, you should replace the line with the new one I said above.

fetrarij commented 6 years ago

I'm closing this issue since you doesn't give some news.