Comments (22)
Hi, try to set SystemJS
configuration for moment
to look at ng2-datepicker/node_modules
.
from ng2-datepicker.
There is no node_modules folder under ng2-datepicker. The only folder is src and, in it is components. I'm using version 0.8.0.
By looking at other issues it appears that moment is included with the bundles but I don't see the bundles.
from ng2-datepicker.
Then correctly set SystemJS
path to moment, check in node_modules
where is the source of moment and set it accordingly.
from ng2-datepicker.
It's correctly set. I am using version 2.14.1.
Should I use a different version?
Is there an ng2-datepicker I can use that has moment bundled?
- If I remove the system.js entry for moment it tries to look for moment.js in the root folder and returns a 404.
- If I misspell the system.js entry I also get a 404.
- When it's set correctly I see a status 200 in the network tab.
After I get the 200 for moment I get the error when I try to use the date picker. Here is the error:
browser_adapter.js:84 TypeError: moment is not a function
at DatePicker.init (ng2-datepicker.js:152)
at new DatePicker (ng2-datepicker.js:37)
at DebugAppView.View_RepairReturnComponent1.createInternal (RepairReturnComponent.template.js:608)
at DebugAppView.AppView.create (view.js:96)
at DebugAppView.create (view.js:308)
at TemplateRef.createEmbeddedView (template_ref.js:64)
at ViewContainerRef_.createEmbeddedView (view_container_ref.js:106)
at NgIf.set as ngIf
at DebugAppView._View_RepairReturnComponent0.detectChangesInternal (RepairReturnComponent.template.js:48)
at DebugAppView.AppView.detectChanges (view.js:243)
from ng2-datepicker.
In my project I imported moment as:
import * as moment from 'moment';
and then used it like this:
var o = moment('11.08.2016', 'DD.MM.YYYY');
I got the same error: 'moment is not a function'.
Then I changed the import to:
import moment from 'moment';
And it worked.
ng2-datepicker uses this import: import * as moment from 'moment';
I don't see how this is the problem since everyone is not getting it.
This stack overflow post led me to this:
http://stackoverflow.com/questions/35272832/systemjs-moment-is-not-a-function
from ng2-datepicker.
How do you set mappings in SystemJS configuration for moment?
from ng2-datepicker.
var map = {
'ng2-datepicker': 'lib/js/ng2-datepicker/src/components/ng2-datepicker',
'moment': 'lib/js/moment/moment',
};
var packages = {
'ng2-datepicker': { defaultExtension: 'js' },
'moment': { defaultExtension: 'js' },
};
var config = {
defaultJSExtensions: true,
map: map,
packages: packages
}
from ng2-datepicker.
Try
var map = {
'ng2-datepicker': 'node_modules/ng2-datepicker',
'moment': 'node_modules/moment'
}
var packages = {
'ng2-datepicker': { main: 'ng2-datepicker', defaultExtension: 'js' },
'moment': { main: 'moment', defaultExtension: 'js' }
}
Something like that, I think.
from ng2-datepicker.
My node_modules is not hosted. The content is moved to lib/js/ by a gulp script
I changed to this but still get the error.
var map = {
'ng2-datepicker': 'lib/js/ng2-datepicker/src/components',
'moment': 'lib/js/moment'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'ng2-datepicker': { main: 'ng2-datepicker', defaultExtension: 'js' },
'moment': { main: 'moment', defaultExtension: 'js' }
}
My only difference is the path the files. I have verified they are there and I see moment load in the network tab.
from ng2-datepicker.
I'll try to configure this with SystemJS and let you know.
from ng2-datepicker.
Is there a reason why you don't have node_modules
in the root and manually copying to lib/js
? I believe that's not the right way as any 3rd party package installed is importing from "own" node_modules
. In your case you should change path in ng2-datepicker.component.ts
to
import * as moment from '../../moment';
But that's not the right way though.
from ng2-datepicker.
This was the recommend way for a dotNet core project. They have a wwwroot folder for everything you want to host. By default, the npm packages install in node_modules outside of this hosted folder.
I have several third party applications and they work - ng2-select, ng2-bs3-modal, ng2-file-upload, ng2-ckeditor, etc.
I don't think I need to change the location of moment in the import. With the system.js config it can find it by just calling it moment. I have verified it with the network tab. Also, I have used moment (as a test) in my application with this import: "import moment from 'moment';"
I changed your source to:
import moment from 'moment';
on line 13 and now it's working. I don't think that's a good long term solution.
from ng2-datepicker.
No, that's not a solution. Still not sure if manually copying files from node_modules
is good, too.
Not sure how npm
works but I think that it's smart enough to have linked packages that are required by multiple packages and have them in separate node_modules
where module is installed, so they find the correct way when importing.
Didn't checked if this is a reccomended way of a dotNet core project but I personally think this is wrong.
from ng2-datepicker.
I can look into changing it but they application has been in work for sometime. I'm not sure why the location of the files would matter if we are finding them.
from ng2-datepicker.
I changed my application to use the hosted node_modules as you suggested. It didn't help - I still have the problem. I reverted back to my normal structure.
The runtime error is: "moment is not a function".
Line 14 of ng2-datepicker.ts is throwing the error: import * as moment from 'moment'.
My research indicates that when you import * a new object is created with the properties and functions and we want the original moment object like this. When I change the line to: import moment as moment from 'moment' the problem is resolved.
Here is another directive with this problem and the same fix:
valor-software/ngx-bootstrap#252
Here is a stack overflow post:
http://stackoverflow.com/questions/35272832/systemjs-moment-is-not-a-function
Any ideas?
from ng2-datepicker.
Hey @chambersDon, I just used this component a couple of days ago and everything works fine. Please check again the README and come back with questions if it still won't work.
from ng2-datepicker.
I have reviewed the readme and I don't see any differences from what I have done. What specifically do you think I missed?
- I import like this: import {DatePicker} from 'ng2-datepicker/ng2-datepicker';
- I added DatePicker as a directive.
- My mark-up is this:
<datepicker [(ngModel)]="model.quoteExpirationDate" view-format="DD.MM.YYYY" model-format="YYY-MM-DD" init-date="2017-05-12">
It builds with no problem. Then at runtime I get: TypeError: moment is not a function.
Also, I can't access your demo here: http://ng2-datepicker.jankuri.com
Is it still there?
from ng2-datepicker.
I know, I am moving demos to other VPS. Please give me your SystemJS config and I'll take a look what can be done.
from ng2-datepicker.
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'lib/spa', // 'dist',
'rxjs': 'lib/js/rxjs',
'angular2-in-memory-web-api': 'lib/js/angular2-in-memory-web-api',
'@angular': 'lib/js/@angular',
'ng2-file-upload': 'lib/js/ng2-file-upload/ng2-file-upload',
'ng2-ckeditor': 'lib/js/ng2-ckeditor/lib/ckeditor',
'ng2-bs3-modal': 'lib/js/ng2-bs3-modal',
'ng2-select': 'lib/js/ng2-select/ng2-select',
'ng2-datepicker/ng2-datepicker': 'lib/js/ng2-datepicker/src/components/ng2-datepicker',
'moment': 'lib/js/moment/moment',
'angular2-notifications': 'lib/js/angular2-notifications'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
'@angular': { defaultExtension: 'js' },
'ng2-file-upload': { defaultExtension: 'js' },
'ng2-ckeditor': { defaultExtension: 'js' },
'ng2-select': { defaultExtension: 'js' },
'ng2-datepicker/ng2-datepicker': { defaultExtension: 'js' },
'moment': { defaultExtension: 'js' },
'angular2-notifications': { main: 'components.js', defaultExtension: 'js' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router',
'@angular/testing',
'@angular/upgrade',
'@angular/forms'
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
defaultJSExtensions: true,
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
from ng2-datepicker.
Hey @chambersDon, can you try new 0.8.2
? I made a minor change importing a moment module. Sorry for late response btw.
from ng2-datepicker.
Closing this one out?
from ng2-datepicker.
yeah, I believe so since there's no response. Closing.
from ng2-datepicker.
Related Issues (20)
- about @hotlistener
- Automatic dropdown position feature request
- Option to not apply default input styles
- Not work with ReactiveForms
- How to clear selected date from UI? HOT 1
- ngModel null issue HOT 2
- The calendar remains opened even after the input looses focus
- Open calendar pop up on icon click event as well as input field
- Ability to keep calendar open after selecting a date
- How can i disable specific days like sunday, monday or whatever I need? HOT 1
- display month list
- Not showing dates in Saturday column on latest version of Edge on Windows HOT 2
- Locale option doesn't work with date-fns > 2
- Resetting a datepicker causes a jump, back to 1970 HOT 3
- upgrade to angular9 occurs error HOT 3
- Set value manually
- What happened to the headless attribute ? HOT 1
- Stackblitz
- Demo link taking users to malware
- Update UI when used in a reactive form.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng2-datepicker.