以 Angular 2 安装模块

Question

我正在尝试让 ngx-date-picker 在我的 Angular 2 应用程序中运行。 https://www.npmjs.com/package/ngx-date-picker

安装说明似乎很少，而且演示也不存在，所以我以蜗牛的速度浏览它。

我们正在使用 yarn，所以我在 node_modules 下的文件夹中运行 yarn add ngx-date-picker --save，现在我有了 /ngx-date -picker/ 文件夹。

我已经进入 package.json 并添加了组件，但我真的不知道我的语法是否正确：

{
  "name": "arv2",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "build-prod": "set NODE_ENV=production && webpack",
    "watch-build": "webpack --progress --colors --watch",
    "lint": "ng lint",
    "i18n": "ng-xi18n --i18nFormat=xlf",
    "publish-prod": "yarn run build-prod && yarn run publish",
    "publish": "dotnet publish -o \"..\\Publish\\leaves\"",
    "build": "webpack",
    "start": "webpack-dev-server --port=4200",
    "test": "karma start ./karma.conf.js",
    "prepree2e": "npm start",
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
    "e2e": "protractor ./protractor.conf.js"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@ngx-translate/core": "^7.0.0",
    "@ngx-translate/http-loader": "^0.1.0",
    "ngx-date-picker": "^0.0.0",
    "angular2-jwt": "^0.2.3",
    "core-js": "^2.4.1",
    "ngx-bootstrap": "^1.7.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },

现在我已经进入 app.module.ts 并完成了导入，就像它在自述文件中所说的那样：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, Http } from '@angular/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { LocalizationLoader } from './modules/localization-loader/localization-loader';

import { serviceConfigFactory, AppConfig } from './app.config';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from "./components/about/about.component";
import { LoginComponent } from './components/account/login/login.component';
import { AuthModule } from './modules/auth/auth.module';
import { ArV2Service } from './services/arv2.service';
import { CompanyModule } from './modules/company/company.module';
import { CompanyComponent } from './components/account/company/company.component';
import { SiteService } from './services/site.service';
import { AuthHttp } from 'angular2-jwt';
import { DatepickerModule } from 'ngx-date-picker';

然后

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
        AboutComponent,
        LoginComponent,
        CompanyComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        DatepickerModule,
        AppRoutingModule,
        AuthModule,
        CompanyModule,
        TranslateModule.forRoot({...})
        ...

很遗憾，Visual Studio 告诉我它找不到模块“ngx-date-picker”。

也找不到 './ngx-date-picker' 或 'ngx-date-picker/ngx-date-picker' 或 'ngx-date-picker/ngx- date-picker.js' 或任何其他组合。

不确定下一步该尝试什么。

Answer 1

在网站上给出了详细的安装，但请检查以下步骤：

1.step:  yarn add ngx-date-picker --save-dev

然后检查已安装的引导程序，因为此模块需要引导程序 3 或 4。

<!-- index.html -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

或

<!--- index.html -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

如果您使用 bootstrap 4 和普通 CSS，请检查样式文件为

"styles": [  
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",  
   "styles.css"  
   ],

我觉得导入就够用了

 import {DatepickerModule} from 'ngx-date-picker';