Angular 2示例应用程序返回错误“无法读取null的属性'X'”

Question

我是Angular 2的新手，我正在尝试从GitHub运行示例应用程序。我下载了the sample application。

[当我尝试为应用程序提供服务时，它给了我以下屏幕截图所示的以下错误：

我该如何解决该错误？

package.json

{
  "name": "material2-srcs",
  "description": "Material Design components for Angular",
  "homepage": "https://github.com/angular/material2",
  "bugs": "https://github.com/angular/material2/issues",
  "repository": {
    "type": "git",
    "url": "https://github.com/angular/material2.git"
  },
  "scripts": {
    "postinstall": "ngc -p angular.tsconfig.json",
    "build": "gulp :publish:build-releases",
    "demo-app": "gulp serve:devapp",
    "test": "gulp test",
    "tslint": "gulp lint",
    "stylelint": "gulp lint",
    "e2e": "gulp e2e",
    "deploy": "gulp deploy:devapp",
    "webdriver-manager": "webdriver-manager",
    "docs": "gulp docs",
    "api": "gulp api-docs"
  },
  "version": "5.0.1",
  "license": "MIT",
  "engines": {
    "node": ">= 5.4.1"
  },
  "dependencies": {
    "@angular/animations": "^5.1.1",
    "@angular/common": "^5.1.1",
    "@angular/compiler": "^5.1.1",
    "@angular/compiler-cli": "^5.1.1",
    "@angular/core": "^5.1.1",
    "@angular/forms": "^5.1.1",
    "@angular/http": "^5.1.1",
    "@angular/platform-browser": "^5.1.1",
    "@angular/platform-browser-dynamic": "^5.1.1",
    "@angular/platform-server": "^5.1.1",
    "@angular/router": "^5.1.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.5",
    "systemjs": "0.19.43",
    "tsickle": "^0.24.x",
    "tslib": "^1.7.1",
    "typescript": "^2.6.2",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@angular/bazel": "~5.1.0",
    "@angular/compiler-cli": "~5.1.0",
    "@angular/http": "~5.1.0",
    "@angular/platform-browser-dynamic": "~5.1.0",
    "@angular/platform-server": "~5.1.0",
    "@angular/router": "~5.1.0",
    "@angular/upgrade": "^5.0.1",
    "@bazel/ibazel": "^0.1.1",
    "@google-cloud/storage": "^1.1.1",
    "@types/chalk": "^0.4.31",
    "@types/fs-extra": "^4.0.3",
    "@types/glob": "^5.0.33",
    "@types/gulp": "3.8.32",
    "@types/hammerjs": "^2.0.35",
    "@types/jasmine": "^2.6.0",
    "@types/merge2": "^0.3.30",
    "@types/minimist": "^1.2.0",
    "@types/node": "^7.0.21",
    "@types/run-sequence": "^0.0.29",
    "autoprefixer": "^6.7.6",
    "axe-core": "^2.3.1",
    "axe-webdriverjs": "^1.1.1",
    "chalk": "^1.1.3",
    "dgeni": "^0.4.9",
    "dgeni-packages": "^0.22.0",
    "firebase": "^4.0.0",
    "firebase-admin": "^5.0.0",
    "firebase-tools": "^3.11.0",
    "fs-extra": "^3.0.1",
    "glob": "^7.1.2",
    "google-closure-compiler": "20170409.0.0",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-clean-css": "^3.3.1",
    "gulp-cli": "^1.3.0",
    "gulp-connect": "^5.0.0",
    "gulp-conventional-changelog": "^1.1.3",
    "gulp-dom": "^0.9.17",
    "gulp-flatten": "^0.3.1",
    "gulp-highlight-files": "^0.0.5",
    "gulp-htmlmin": "^3.0.0",
    "gulp-if": "^2.0.2",
    "gulp-markdown": "^1.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-transform": "^2.0.0",
    "gulp-util": "^3.0.8",
    "hammerjs": "^2.0.8",
    "highlight.js": "^9.11.0",
    "http-rewrite-middleware": "^0.1.6",
    "image-diff": "^1.6.3",
    "jasmine-core": "^2.8.0",
    "jsonwebtoken": "^7.4.1",
    "karma": "^1.7.1",
    "karma-browserstack-launcher": "^1.3.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage": "^1.1.1",
    "karma-firefox-launcher": "^1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-sauce-launcher": "^1.2.0",
    "karma-sourcemap-loader": "^0.3.7",
    "madge": "^2.2.0",
    "magic-string": "^0.22.4",
    "minimatch": "^3.0.4",
    "minimist": "^1.2.0",
    "moment": "^2.18.1",
    "node-sass": "^4.5.3",
    "protractor": "^5.2.0",
    "request": "^2.83.0",
    "resolve-bin": "^0.4.0",
    "rollup": "^0.41.6",
    "rollup-plugin-alias": "^1.3.1",
    "rollup-plugin-node-resolve": "^3.0.0",
    "run-sequence": "^1.2.2",
    "scss-bundle": "^2.0.1-beta.7",
    "selenium-webdriver": "^3.6.0",
    "sorcery": "^0.10.0",
    "stylelint": "^7.12.0",
    "ts-node": "^3.0.4",
    "tsconfig-paths": "^2.3.0",
    "tslint": "^5.8.0",
    "tsutils": "^2.6.0",
    "typescript": "~2.5.2",
    "uglify-js": "^2.8.14",
    "web-animations-js": "^2.2.5"
  }
}

Answer 1

首次运行npm install如果npm install不起作用，请尝试此操作。请在根文件夹中添加以下文件File Name-.angular-cli.json

 {
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
        "name": "xyz"
    },
    "apps": [
        {
            "root": "src",
            "outDir": "dist",
            "assets": [
                "assets",
                "favicon.ico"
            ],
            "index": "index.html",
            "main": "main.ts",
            "polyfills": "polyfills.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.app.json",
            "testTsconfig": "tsconfig.spec.json",
            "prefix": "app",
            "styles": [
                "assets/css/styles.css"

            ],
            "scripts": [
                "assets/js/project.js"      

            ],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        }
    ],
    "e2e": {
        "protractor": {
            "config": "./protractor.conf.js"
        }
    },
    "lint": [
        {
            "project": "src/tsconfig.app.json"
        },
        {
            "project": "src/tsconfig.spec.json"
        },
        {
            "project": "e2e/tsconfig.e2e.json"
        }
    ],
    "test": {
        "karma": {
            "config": "./karma.conf.js"
        }
    },
    "defaults": {
        "styleExt": "css",
        "component": {}
    }
}

Answer 2

尝试安装最新的npm或仅在您的项目目录中运行此命令，此命令将自动在您的节点模块文件夹中安装相关模块。如果不尝试，请尝试手动执行安装命令来解决即将出现的错误，例如安装angular-cli和typescript。命令很容易获得here

sudo npm安装。

此后，您可以通过npm serve运行您的项目

Answer 3

您是否先完成了[[npm install？

也许您已经安装了所有必需的组件，而我认为您必须使用：

npm run serve.dev

或npm run test] >>