foundation-sites: 'foundation.d.ts' 不是一个模块

Question

我刚刚更新了我的 Angular / Foundation 项目以使用 node.js v9.3.0。 v8.4.0 一切正常。我现在在 webpack 尝试构建时遇到错误。

ERROR in src/app/app.component.ts(9,29): error TS2306: File '/path/to/node_modules/foundation-sites/dist/js/foundation.d.ts' is not a module.

文件foundation.d.ts确实存在。我什至将 foundation-sites 从 v6.4.3 升级到 v6.4.4-rc1，但这并没有解决问题。

这是 app.component.ts 中的导入：

import * as Foundation from 'foundation-sites';

这是我的 package.json 依赖项：

  "dependencies": {
    "@angular/animations": "^5.1.3",
    "@angular/common": "^5.1.3",
    "@angular/compiler": "^5.1.3",
    "@angular/core": "^5.1.3",
    "@angular/forms": "^5.1.3",
    "@angular/http": "^5.1.3",
    "@angular/platform-browser": "^5.1.3",
    "@angular/platform-browser-dynamic": "^5.1.3",
    "@angular/router": "^5.1.3",
    "big.js": "^5.0.3",
    "chart.js": "^2.7.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.3",
    "font-awesome": "^4.7.0",
    "foundation-sites": "^6.4.3",
    "fullcalendar": "^3.8.0",
    "jquery": "^3.2.1",
    "lodash.merge": "^4.6.0",
    "lz-string": "^1.4.4",
    "moment-timezone": "^0.5.14",
    "normalize.css": "^7.0.0",
    "primeng": "^5.0.2",
    "quill": "^1.3.4",
    "rxjs": "^5.5.6",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.3",
    "@angular/compiler-cli": "^5.1.3",
    "@angular/language-service": "^5.1.3",
    "@types/big.js": "^4.0.2",
    "@types/jasmine": "^2.8.3",
    "@types/jquery": "^3.2.17",
    "@types/node": "^9.3.0",
    "chalk": "^2.3.0",
    "codelyzer": "^4.0.2",
    "copy-paste": "^1.3.0",
    "del": "^3.0.0",
    "foundation-icons": "^1.0.1",
    "glob": "^7.1.2",
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0",
    "gulp-shell": "^0.6.5",
    "jasmine-core": "^2.8.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^2.0.0",
    "karma-chrome-launcher": "^2.1.1",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.3",
    "karma-jasmine": "^1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lodash.mergewith": "^4.6.0",
    "moment": "^2.20.1",
    "node-sass-tilde-importer": "^1.0.1",
    "path": "^0.12.7",
    "properties-reader": "^0.0.16",
    "protractor": "^5.2.2",
    "readline-sync": "^1.4.7",
    "request": "^2.83.0",
    "sass-flex-mixin": "^1.0.3",
    "ts-node": "^4.1.0",
    "tslint": "^5.8.0",
    "typescript": "^2.5.3",
    "xml2js": "^0.4.19"
  }

Answer 1

我有两种方法它确实有效。

方法要求：

const Foundation = require('foundation-sites');
new Foundation.default.Tooltip($('.has-tip'), {});

方法导入：

import 'foundation';
new Foundation.Tooltip($('.has-tip'), {});

要查看所有可用的方法，请参阅 /path/to/node_modules/foundation-sites/dist/js/foundation.d.ts。

foundation-sites: 'foundation.d.ts' 不是一个模块

foundation-sites: 'foundation.d.ts' is not a module

types

zurb-foundation

typescript

webpack