search

bleenco / ng2-datepicker

Angular2 Datepicker Component
http://ng2-datepicker.jankuri.com
MIT License
311 stars 236 forks source link

Datepicker does not appear #66

Open nenych opened 7 years ago

nenych commented 7 years ago

Hello. I did everything from README, but datepicker does not appear. Here is what I did:

1) npm install ng2-datepicker

2) added css to index.html

<head> <base href="/"> <title>d2d</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" media="all">

<!-- 1. Load libraries --> <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <!-- 2. Configure SystemJS --> <script src="js/systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head>

3) in my app.modules.ts:

... import { DatePicker } from 'ng2-datepicker/ng2-datepicker'; import { FormsModule } from '@angular/forms'; ... @NgModule({ ... declarations: [ AppComponent, DatePicker, ... ] bootstrap: [ AppComponent ] })

4) in my component:

import { Component } from '@angular/core';

@Component({ template: hello <br /> <datepicker [(ngModel)]="date" [expanded]="true" class="danger"></datepicker> <br /> Selected date is: {{ date }}

})

export class MainPage { date = ""; }

5) in systemjs.config.js:

var map = { ... "ng2-datepicker": '../node_modules/ng2-datepicker' }; // packages tells the System loader how to load when no filename and/or no extension var packages = { ... 'ng2-datepicker': { defaultExtension: 'js' }, ... };

Result below on screenshot:

screenshot_2016-10-05_12-35-40

nenych commented 7 years ago

The problem was with require ng2-datepicker.component.html and css files. I changed ./ng2-datepicker.component.html to full path, and it worked. Now I have new problem, datapicker always placed in left side of page and it has broken position of day numbers.

shamgang commented 7 years ago

The relative path feature in templateUrls and styleUrls is module loader specific - based on looking at the docs (https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html) and what you've already tried it seems that moduleId: module.id, templateUrl: 'siblingFile' works for CommonJS, templateUrl: './siblingFile' works for Webpack, and your current solution moduleId: 'module.id', templateUrl: './siblingFile' works for SystemJS? Isn't it best to just use inline templates and styles (as do packages like ng2-table) for generality?

@jkuri

I've made this change locally and can submit a pull request if you want to give me permissions.

ghetolay commented 7 years ago

I would vote for inline template/styles too. I gave up url for some time and on my branch I wasn't able to get it working either.

I prefer using webpack with require() and use appropriate loaders for each type of file. That way you can for example use sass or less as it seems ng2-datepicker.css was generated from. Must say there was a problem with aot and require() on template/css, dunno if it's resolved.

@shamgang how did you mange inline template and css ?

shamgang commented 7 years ago

@ghetolay

I just copied the entire template HTML into the component file using the template: attribute and enclosing it in backticks. Then I copied the styles into a style tag in the template which as I understand is what styles: will compile to anyway. I agree that webpack is a good choice but I think for a lightweight dependency like this general usability is more of a win than being able to use Sass at develop time. Thoughts?

ghetolay commented 7 years ago

@shamgang

I just copied the entire template HTML into the component file using the template: attribute and enclosing it in backticks. Then I copied the styles into a tag in the template which as I understand is what styles: will compile to anyway

I think we need sometimes better than that. Having a <style> inside template is really bad because it'll be present for each component. We don't want a <style> per component, also you're loosing encapsulation.

usability is more of a win than being able to use Sass at develop time

I don't plan to reduce the usability of the library, I'm looking for a solution where we can do both.

I've been looking into some projects and they in fact use templateUrl/styleUrls but coupled with either rollup or webpack so the compiled .js file has inline template and style. So here we have clean source code and usable compiled code.

Angular material which is supposed to "serve as an example of how to write Angular code following best practices" uses sass, templateUrl, styleUrls and rollup.

Now we just need to find out how to setup this. Does someone reading this has some experience in the matter ?

ghetolay commented 7 years ago

I was wrong neither of webpack nor rollup are responsible for replacing templateUrl/styeUrls into inline template and styles. Angular material uses gulp to do it with this script.

Seems there is no simple solution so maybe @shamgang was right about inlining it directly on the code.

shamgang commented 7 years ago

@ghetolay

I think we need sometimes better than that. Having a style inside template is really bad because it'll be present for each component. We don't want a style per component, also you're loosing encapsulation.

I absolutely agree that if a template and styles are used across components they must be encapsulated to avoid code duplication. However a) since this project is single-purpose it shouldn't grow in size too much and issues such as duplication and separation of concerns shouldn't become an appreciable problem and b) Angular components are meant to represent a view element, so does sharing templates/styles between components really make sense? Shouldn't there be one configurable component if the HTML and CSS are the same? And if just CSS needs to be shared between components, shouldn't it be added in the parent component? These are just my speculations.

I don't plan to reduce the usability of the library, I'm looking for a solution where we can do both.

Angular material uses gulp to do it with this script.

Having said the above, I agree that both generality and proper encapsulation would be ideal. I am currently using gulp to do a relatively complex build and it has been (mostly) easy to use. If I have some time I could try to push a branch of this project building with gulp and copying the functions from the script you linked. However if there aren't plans to add components to this package soon it might be easiest to just inline the html/css for now and add a TODO to encapsulate.

ghetolay commented 7 years ago

Let's see what @jkuri has to say. I found this comment on a different issue :

I believe the fastest solution from my side would be including styles and template inline. But that's not okay because I am using sass in dev...

I'll try to setup gulp on my branch, in the meantime let's wait from the owner answer.

ghetolay commented 7 years ago

They've updated the webpack guide on the docs of angular.io.

The angular2-template-loader will inline template and style urls.

But I don't know if @jkuri wants to use webpack for the build.

jkuri commented 7 years ago

@ghetolay I am fine with any builder. The best option would still be that module is compatible with more or less all options... that option would be inlining the stuff. Not sure id moduleId: module.id breaks build on webpack, I am almost sure that it breaks build with rollup. I don't really know, its hard to be compatible with all the loaders. Just make a decision @ghetolay.