Angular Moment Picker在Angular 2+TypeScript项目中的使用及类型定义问题

我完全懂你这种在Angular 2+ TypeScript项目里啃JS老库的痛苦——angular-moment-picker早年的资料确实几乎都是面向AngularJS的，踩坑太正常了。下面我一步步帮你把这些问题解决掉：

第一步：立刻抛弃AngularJS风格的angular.module写法 #

Angular 2+的模块化架构和AngularJS完全不兼容，你之前写的独立JS文件+TS调用的路子从根上就错了，直接删掉这些无用代码，改用Angular官方的模块导入方式。

第二步：正确配置app.module.ts #

先确保依赖装全：

npm install angular-moment-picker moment --save

然后在app.module.ts里完成模块注册：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 必须加，因为要用ngModel
// 导入moment-picker的核心模块
import { MomentPickerModule } from 'angular-moment-picker';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule, // 绑定ngModel必须依赖这个
    MomentPickerModule.forRoot() // 用forRoot()初始化模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

第三步：搞定独立的类型定义文件 #

你找到的那个src目录下的.d.ts文件，因为和包名不匹配且位置独立，我们可以手动让TypeScript识别它：

1. 把这个类型文件（比如moment-picker.d.ts）复制到你项目的src/typings目录下（如果没有typings目录就新建一个）。
2. 修改tsconfig.json，把这个文件加入编译范围：

{
  "compilerOptions": {
    // 你的原有配置不变
  },
  "include": [
    "src/**/*",
    "src/typings/moment-picker.d.ts" // 新增这一行
  ]
}

如果不想复制文件，也可以用paths映射直接指向node_modules里的原文件：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "angular-moment-picker": [
        "node_modules/angular-moment-picker/src/moment-picker.d.ts" // 替换成实际的文件路径
      ]
    }
  }
}

第四步：在组件中实际使用 #

在组件模板里直接用组件标签：

<moment-picker 
  [(ngModel)]="selectedDate" 
  format="YYYY-MM-DD"
  placeholder="选择日期">
</moment-picker>

在组件类里定义绑定的变量：

import { Component } from '@angular/core';
import * as moment from 'moment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  selectedDate: moment.Moment = moment(); // 用moment初始化当前日期
}

最后补两个容易踩的坑 #

• 样式缺失：别忘了导入库的CSS文件，在angular.json的styles数组里添加：

  "styles": [
    "node_modules/angular-moment-picker/dist/angular-moment-picker.css",
    "src/styles.css"
  ]
  

• moment依赖问题：确保moment在项目中能正常导入，如果遇到全局找不到的问题，可以在tsconfig.json里添加"types": ["moment"]。

内容的提问来源于stack exchange，提问作者Marko Taht