AppComponent content not rendered when using lite-server/browsersync

Question

I'm creating a simple Angular2 project using Angular CLI and the AppComponent content is correctly rendered when using the Development Server (ng serve). Then I installed lite-server to allow the detection of file changes and use browser sync.

The app starts loading, the BrowserSync layer appears on the left upper corner, however the content of the AppComponent is not rendered.

What am I missing?

package.json

{
  "name": "simple",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",

    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@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",
    "bootstrap": "^4.0.0-alpha.6",
    "core-js": "^2.4.1",
    "ngx-bootstrap": "^1.6.6",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.1.0-rc.2",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "2.5.45",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "concurrently": "^3.4.0",
    "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",
    "lite-server": "^2.3.0",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

bs-config.json

{
  "port": 3000,
  "server": {
    "baseDir": "src",
    "routes": {
      "/node_modules": "node_modules"
    }
  }
}

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Simple</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>
<body>
  <app-root></app-root>

  <!-- Enable bootstrap 4 theme -->
  <script>window.__theme = 'bs4';</script>
</body>
</html>

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "simple"
  },
  "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": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [

      ],
      "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": {}
  }
}

Here is the link of the GitHub repo: https://github.com/julianonunes/angular_simple

score 0 · Answer 1 · answered May 28 '17 at 17:48

0

You messed your scripts with that of systemjs and cli, replace those scripts with these

"ng": "ng",
"start": "ng serve",
"build": "ng build",
"lint": "ng lint"

answered May 28 '17 at 17:48

Aravind

40,391
16
91
110

If I change it like this I just can use `ng serve` or `npm start`, it works, but I have to stop the server and re-run after each modification. – juliano.net May 28 '17 at 18:16
No you need not do stop every time. replace that with this and get back to me – Aravind May 28 '17 at 18:18
I already did the change. The scripts section on `package.json` only have the content you mentioned, and I executed with this: `ng serve --host 0.0.0.0 --port 3000 --disable-host-check` because it's in a Docker container. – juliano.net May 28 '17 at 18:21
`ng serve --watch` add watch flag to look for changes – Aravind May 28 '17 at 18:24
Still not updating the content after Ctrl + F5. `root@bf375f83e08e:/var/www# ng serve --host 0.0.0.0 --port 3000 --disable-host-check --watch` – juliano.net May 28 '17 at 18:28
are you available in teamviewer? – Aravind May 28 '17 at 18:31
Just for documentation purposes, I've found that sometimes Docker stops notifying the containers of file changes made from the host OS. If I just open the file with Vim and save (even without making changes to the content), the development server detects the change and start recompiling. – juliano.net May 29 '17 at 18:34

AppComponent content not rendered when using lite-server/browsersync

1 Answers1