MdDatepickerModule causes Unexpected value 'undefined' error

astynax777 commented 7 years ago

I've been going through the material directives attempting to get acquainted with Angular/Material2 and everything was working great until I added the MdDatepickerModule. If I remove the MdDatepickerModule there is no error and everything else works. Forgive my ignorance if this is a simple error, but all my research on StackOverflow seems to indicate the error is due to an improper import or circular reference. My import seems correct, so I'm wondering if you guys can tell me.

Bug, feature request, or proposal:

Bug?

What is the expected behavior?

No error

What is the current behavior?

Error:

(index):17 Error: (SystemJS) Unexpected value 'undefined' imported by the module 'AppModule'
    Error: Unexpected value 'undefined' imported by the module 'AppModule'
        at syntaxError (http://localhost:59766/node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34)
        at eval (http://localhost:59766/node_modules/@angular/compiler/bundles/compiler.umd.js:14413:40)
        at Array.forEach (native)
        at CompileMetadataResolver.getNgModuleMetadata (http://localhost:59766/node_modules/@angular/compiler/bundles/compiler.umd.js:14390:49)
        at JitCompiler._loadModules (http://localhost:59766/node_modules/@angular/compiler/bundles/compiler.umd.js:25571:64)
        at JitCompiler._compileModuleAndComponents (http://localhost:59766/node_modules/@angular/compiler/bundles/compiler.umd.js:25530:52)
        at JitCompiler.compileModuleAsync (http://localhost:59766/node_modules/@angular/compiler/bundles/compiler.umd.js:25492:21)
        at PlatformRef_._bootstrapModuleWithZone (http://localhost:59766/node_modules/@angular/core/bundles/core.umd.js:4793:25)
        at PlatformRef_.bootstrapModule (http://localhost:59766/node_modules/@angular/core/bundles/core.umd.js:4779:21)
        at Object.eval (http://localhost:59766/main.js:6:53)
    Evaluating http://localhost:59766/main.js
    Error loading http://localhost:59766/main.js
        at syntaxError (http://localhost:59766/node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34)
        at eval (http://localhost:59766/node_modules/@angular/compiler/bundles/compiler.umd.js:14413:40)
        at Array.forEach (native)
        at CompileMetadataResolver.getNgModuleMetadata (http://localhost:59766/node_modules/@angular/compiler/bundles/compiler.umd.js:14390:49)
        at JitCompiler._loadModules (http://localhost:59766/node_modules/@angular/compiler/bundles/compiler.umd.js:25571:64)
        at JitCompiler._compileModuleAndComponents (http://localhost:59766/node_modules/@angular/compiler/bundles/compiler.umd.js:25530:52)
        at JitCompiler.compileModuleAsync (http://localhost:59766/node_modules/@angular/compiler/bundles/compiler.umd.js:25492:21)
        at PlatformRef_._bootstrapModuleWithZone (http://localhost:59766/node_modules/@angular/core/bundles/core.umd.js:4793:25)
        at PlatformRef_.bootstrapModule (http://localhost:59766/node_modules/@angular/core/bundles/core.umd.js:4779:21)
        at Object.eval (http://localhost:59766/main.js:6:53)
    Evaluating http://localhost:59766/main.js
    Error loading http://localhost:59766/main.js

What are the steps to reproduce?

Here is my app.module.ts

import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MdDialogModule, MdButtonModule, MdSelectModule, MdInputModule, MdAutocompleteModule, MdCheckboxModule, MdDatepickerModule } from "@angular/material";

import { AppComponent } from "./app.component";
import { SampleDialog } from "./sample-dialog";

@NgModule({
    imports: [
        FormsModule,
        ReactiveFormsModule,
        BrowserModule,
        BrowserAnimationsModule,
        MdDialogModule,
        MdButtonModule,
        MdSelectModule,
        MdInputModule,
        MdAutocompleteModule,
        MdCheckboxModule,
        MdDatepickerModule
    ],
    declarations: [
        AppComponent,
        SampleDialog
    ],
    entryComponents: [
        SampleDialog
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Here's my package.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~4.1.3",
    "@angular/compiler": "~4.1.3",
    "@angular/core": "~4.1.3",
    "@angular/forms": "~4.1.3",
    "@angular/http": "~4.1.3",
    "@angular/platform-browser": "~4.1.3",
    "@angular/platform-browser-dynamic": "~4.1.3",
    "@angular/router": "~4.1.3",
    "@angular/material": "2.0.0-beta.6",
    "@angular/animations": "~4.1.3",

    "systemjs": "0.19.40",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
  },
  "repository": {}
}

and my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

I'm working in VS 2015 debugging in Chrome.

mmalerba commented 7 years ago

I believe you need to import MdNativeDateModule or manually provide DateAdapter and MD_DATE_FORMATS

astynax777 commented 7 years ago

Importing MdNativeDateModule did remove the error, however the datepicker is not popping up. Here is my markup:


<div>
    <md-input-container>
        <input mdInput [mdDatepicker]="datePicker" placeholder="Select a Date" />
        <button mdSuffix [mdDatepickerToggle]="datePicker"></button>
    </md-input-container>
    <md-datepicker #picker></md-datepicker>
</div>

Is there anything else I'm missing to make the picker pop up? mddatepicker