Datepicker does not appear #66
Comments
|
The problem was with require ng2-datepicker.component.html and css files. I changed ./ng2-datepicker.component.html to full path, and it worked. |
|
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 I've made this change locally and can submit a pull request if you want to give me permissions. |
|
I would vote for inline template/styles too. 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. @shamgang how did you mange inline template and css ? |
|
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? |
I think we need sometimes better than that. Having a
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. |
|
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. |
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.
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. |
|
Let's see what @jkuri has to say. I found this comment on a different issue :
I'll try to setup gulp on my branch, in the meantime let's wait from the owner answer. |
|
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. |
|
@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 |
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:
The text was updated successfully, but these errors were encountered: