Question

尝试使用Typescript和Aurelia进行构建并添加材质设计精简版。我只是克隆导航骨架，但使用打字稿。

但是，我在f12中收到了多个错误：

扩展到以下内容：

Cannot GET /jspm_packages/npm/aurelia-templating-router@1.0.0-beta.1.0.1/

有什么想法吗？

谢谢。

package.json文件：

{
  "name": "aurelia-skeleton-navigation",
  "version": "0.19.0",
  "description": "A starter kit for building a standard navigation-style app with Aurelia.",
  "keywords": [
    "aurelia",
    "navigation",
    "skeleton"
  ],
  "homepage": "http://aurelia.io",
  "bugs": {
    "url": "https://github.com/aurelia/skeleton-navigation/issues"
  },
  "license": "CC0-1.0",
  "author": "Rob Eisenberg <rob@bluespire.com> (http://robeisenberg.com/)",
  "main": "dist/main.js",
  "repository": {
    "type": "git",
    "url": "http://github.com/aurelia/skeleton-navigation"
  },
  "scripts": {
    "test": "gulp test",
    "e2e": "gulp serve e2e"
  },
  "devDependencies": {
    "aurelia-bundler": "^0.1.8",
    "aurelia-tools": "^0.1.3",
    "babel": "^5.8.23",
    "babel-eslint": "^4.1.3",
    "browser-sync": "^1.8.1",
    "conventional-changelog": "0.0.11",
    "del": "^1.1.0",
    "gulp": "^3.8.10",
    "gulp-babel": "^5.1.0",
    "gulp-bump": "^0.3.1",
    "gulp-changed": "^1.1.0",
    "gulp-eslint": "^1.0.0",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^0.6.6",
    "gulp-protractor": "^0.0.12",
    "gulp-jshint": "^1.9.0",
    "gulp-sourcemaps": "^1.3.0",
    "gulp-typescript": "^2.9.2",
    "gulp-yuidoc": "^0.1.2",
    "isparta": "^3.1.0",
    "istanbul": "gotwarlost/istanbul#source-map",
    "jasmine-core": "^2.1.3",
    "jshint-stylish": "^1.0.0",
    "jspm": "^0.16.11",
    "karma": "^0.12.37",
    "karma-babel-preprocessor": "^5.2.1",
    "karma-chrome-launcher": "^0.1.7",
    "karma-coverage": "douglasduteil/karma-coverage#next",
    "karma-jasmine": "^0.3.5",
    "karma-jspm": "2.0.1-beta.2",
    "karma-typescript-preprocessor": "0.0.21",
    "object.assign": "^1.0.3",
    "require-dir": "^0.1.0",
    "run-sequence": "^1.0.2",
    "tsd": "^0.6.5",
    "vinyl-paths": "^1.0.0",
    "yargs": "^2.1.1"
  },
  "jspm": {
    "dependencies": {
      "aurelia-animator-css": "npm:aurelia-animator-css@^1.0.0-beta.1.0.1",
      "aurelia-binding": "npm:aurelia-binding@^1.0.0-beta.1.0.1",
      "aurelia-bootstrapper": "npm:aurelia-bootstrapper@^1.0.0-beta.1",
      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@^1.0.0-beta.1",
      "aurelia-event-aggregator": "npm:aurelia-event-aggregator@^1.0.0-beta.1",
      "aurelia-fetch-client": "npm:aurelia-fetch-client@^1.0.0-beta.1",
      "aurelia-framework": "npm:aurelia-framework@^1.0.0-beta.1.0.1",
      "aurelia-history": "npm:aurelia-history@^1.0.0-beta.1",
      "aurelia-history-browser": "npm:aurelia-history-browser@^1.0.0-beta.1.0.1",
      "aurelia-loader": "npm:aurelia-loader@^1.0.0-beta.1",
      "aurelia-loader-default": "npm:aurelia-loader-default@^1.0.0-beta.1.0.1",
      "aurelia-logging": "npm:aurelia-logging@^1.0.0-beta.1",
      "aurelia-metadata": "npm:aurelia-metadata@^1.0.0-beta.1",
      "aurelia-pal": "npm:aurelia-pal@^1.0.0-beta.1",
      "aurelia-pal-browser": "npm:aurelia-pal-browser@^1.0.0-beta.1",
      "aurelia-path": "npm:aurelia-path@^1.0.0-beta.1",
      "aurelia-route-recognizer": "npm:aurelia-route-recognizer@^1.0.0-beta.1",
      "aurelia-router": "npm:aurelia-router@^1.0.0-beta.1",
      "aurelia-task-queue": "npm:aurelia-task-queue@^1.0.0-beta.1",
      "aurelia-templating": "npm:aurelia-templating@^1.0.0-beta.1",
      "aurelia-templating-binding": "npm:aurelia-templating-binding@^1.0.0-beta.1.0.1",
      "aurelia-templating-resources": "npm:aurelia-templating-resources@^1.0.0-beta.1.0.2",
      "aurelia-templating-router": "npm:aurelia-templating-router@^1.0.0-beta.1.0.2",
      "bootstrap": "github:twbs/bootstrap@^3.3.4",
      "core-js": "npm:core-js@^1.2.6",
      "fetch": "github:github/fetch@^0.9.0",
      "font-awesome": "npm:font-awesome@^4.3.0",
      "material-design-lite": "github:google/material-design-lite@^1.0.6",
      "text": "github:systemjs/plugin-text@^0.0.2"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.24",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "core-js": "npm:core-js@^1.2.6"
    },
    "overrides": {
      "github:google/material-design-lite@1.0.6": {
        "main": "material"
      }
    }
  }

Answer 1

在克隆存储库后，您忘记了npm install和jspm install。只需要做那两个（在README.md中列出），你应该做得很好。

Answer 2

来自mdl文档：

Material Design Lite将在页面加载时自动注册并呈现标有MDL类的所有元素。但是，在您动态创建DOM元素的情况下，您需要使用upgradeElement函数注册新元素。

Aurelia动态加载视图。话虽这么说，你需要使用mdl-css类为每个元素调用upgradeElement。

试试这个插件：https://github.com/genadis/aurelia-mdl

不能使用材料设计精简版获得aurelia包

2 个答案: