在控制台Visual Studio 2017中尝试NG SERVE时页面内容未加载Angular-CLI

时间:2017-12-15 08:34:13

标签: angular visual-studio-2017 angular-cli

我是一个非常有角度的初学者。最近开始使用VS 2017和Angular-CLI。

面临两个麻烦。

接下来是当我执行应用程序时,它不反映更改,直到我运行NG build in命令。我从windows powershell执行命令。因此,一旦页面加载或执行之前,如果我运行 NG BUILD ,当页面显示其具有所有更改时。不明白为什么。

接下来是当我从控制台执行 NG SERVE 然后执行应用程序时,只显示标题栏文本。内容部分或正文中的任何内容都不是空的。所以为了让它再次显示,我需要打破应用程序然后 NG BUILD ,然后运行它就像以前一样显示页面。

这些是我的package.json

中的配置
{
    "name": "test-app",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "watch": "ng build --watch"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "~5.0.0",
        "@angular/cdk": "~5.0.1",
        "@angular/common": "~5.0.0",
        "@angular/compiler": "~5.0.0",
        "@angular/core": "~5.0.0",
        "@angular/forms": "~5.0.0",
        "@angular/http": "~5.0.0",
        "@angular/material": "~5.0.1",
        "@angular/platform-browser": "~5.0.0",
        "@angular/platform-browser-dynamic": "~5.0.0",
        "@angular/router": "~5.0.0",
        "@types/bootstrap": "latest",
        "@types/jquery": "^3.2.1",
        "bootstrap": "4.0.0-beta.2",
        "core-js": "^2.4.1",
        "jquery": "^3.2.1",
        "ng-bootstrap": "^1.6.3",
        "ngx-bootstrap": "^2.0.0-beta.9",
        "popper.js": "^1.12.9",
        "rxjs": "^5.5.2",
        "zone.js": "^0.8.14"
    },
    "devDependencies": {
        "@angular/cli": "1.5.4",
        "@angular/compiler-cli": "^5.0.0",
        "@angular/language-service": "^5.0.0",
        "@types/jasmine": "~2.5.53",
        "@types/jasminewd2": "~2.0.2",
        "@types/node": "~6.0.60",
        "codelyzer": "^4.0.1",
        "jasmine-core": "~2.6.2",
        "jasmine-spec-reporter": "~4.1.0",
        "karma": "~1.7.0",
        "karma-chrome-launcher": "~2.1.1",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "^1.2.1",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.1.2",
        "ts-node": "~3.2.0",
        "tslint": "~5.7.0",
        "typescript": "~2.4.2"
    }
}

以下是launchsettings.json的内容

{
  "iisSettings": {
    "windowsAuthentication": true,
    "anonymousAuthentication": false,
    "iisExpress": {
      "applicationUrl": "http://localhost:54225/",
      "sslPort": 0
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "myProject": {
      "commandName": "Project",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "http://localhost:54218/"
    }
  }
}

1 个答案:

答案 0 :(得分:0)

按照与从角度安装到另一个文件夹中的“ ng serve”相同的过程进行。 我也遇到了同样的问题,因此我在另一个文件夹中再次尝试了相同的过程,它可以工作。现在不再有空白页。