Angular-cli: index.html generated without js references inside (so blank white page is shown)

Created on 27 Jul 2017 · 4Comments · Source: angular/angular-cli

Bug Report or Feature Request (mark with an `x`)

- [ x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Output from: `ng --version`. (windows 7)
@angular/cli: 1.3.0-rc.1
node: 6.11.0
npm 5.3.0
os: win32 x64

Repro steps.

Here's my package.json file.

"dependencies": {
    "@angular/animations": "4.3.1",
    "@angular/common": "4.3.1",
    "@angular/compiler": "4.3.1",
    "@angular/core": "4.3.1",
    "@angular/forms": "4.3.1",
    "@angular/http": "4.3.1",
    "@angular/platform-browser": "4.3.1",
    "@angular/platform-browser-dynamic": "4.3.1",
    "@angular/router": "4.3.1",
    "@ng2-dynamic-forms/core": "1.4.12",
    "@ng2-dynamic-forms/ui-primeng": "1.4.12",
    "@types/is-my-json-valid": "0.0.19",
    "@ultimate/ngxerrors": "1.3.0",
    "angular-oauth2-oidc": "1.0.20",
    "angular2-logger": "0.6.0",
    "angular2-moment": "1.3.3",
    "core-js": "2.4.1",
    "flag-icon-css": "2.8.0",
    "font-awesome": "4.7.0",
    "install": "0.10.1",
    "is-my-json-valid": "2.16.0",
    "jquery": "3.2.1",
    "js-uuid": "^0.0.6",
    "ng-http-interceptor": "3.0.1",
    "ng-prettyjson": "0.2.0",
    "ng2-dnd": "4.1.0",
    "ngx-webstorage": "1.8.0",
    "node-mock-server": "0.14.0",
    "npm": "5.3.0",
    "primeng": "4.1.1",
    "prismjs": "1.6.0",
    "proxy-polyfill": "0.1.6",
    "rxjs": "5.4.2",
    "tslib": "1.7.1",
    "uuid": "^3.1.0",
    "zone.js": "0.8.13"
  },
  "devDependencies": {
    "@angular/compiler-cli": "4.2.2",
    "@types/jasmine": "2.5.41",
    "@types/jquery": "2.0.45",
    "@types/lodash": "4.14.50",
    "@types/node": "7.0.22",
    "@angular/cli": "1.3.0-rc.1",
    "codelyzer": "3.0.1",
    "extract-text-webpack-plugin": "2.1.0",
    "husky": "0.13.3",
    "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-jasmine": "1.1.0",
    "karma-remap-istanbul": "0.6.0",
    "lite-server": "2.3.0",
    "node-sass": "4.5.3",
    "protractor": "5.1.2",
    "ts-node": "3.3.0",
    "tslint": "5.3.2",
    "typedoc": "0.7.1",
    "typescript": "2.4.1",
    "webdriver-manager": "12.0.6"
  }

I basically run this command to compile my application:
$ ng build --target=development --environment=dev

The log after the command.

> ng build --target=development --environment=dev
Date: 2017-07-27T10:30:25.454Z
Hash: 38a7f76194f69a089faf
Time: 43967ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 1.04 MB {vendor} [initial] [rendered]
chunk {scripts} scripts.bundle.js, scripts.bundle.js.map (scripts) 37.7 kB {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 520 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.68 MB [initial] [rendered]

C:\workspace\frontend\ng-project>

Desired functionality.

At first sight all seems to be ok after the build has finished as you can see from the log above.
However, by checking the index.html file generated it can be noticed that no .js file will be call (_has been injected inside_).

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>NG Project</title>
  <base href=".">

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

Mention any other details that might be useful.

Basically the issue I am facing is when I try to build the application.
All worked fine with the angular-cli 1.0.0-beta.20-4.
Here's the index.html it generated:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>NG Project</title>
  <base href=".">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico" async>
</head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

Any ideas/solution/tip?

Source

AndreaPaciolla

👍3

Most helpful comment

After a few hours of debugging, I discovered that the webpack config file obtained with "ng eject" works.
However, I can reproduce the same bug by setting "inject: false" in HtmlWebpackPlugin, as follows:

new HtmlWebpackPlugin({
      "template": "./src\\index.html",
      "filename": "./index.html",
      "hash": false,
      "inject": false,  <---- THIS
      "compile": true,
      "favicon": false,
      "minify": false,
      "cache": true,
      "showErrors": true,
      "chunks": "all",
      "excludeChunks": [],
      "title": "Webpack App",
      "xhtml": true
}

daniloarcidiacono on 27 Jul 2017

👍3

All 4 comments

I also have the same issue all I receive is a white screen with no console errors on production build

Christhecoleman on 27 Jul 2017

👍3

new HtmlWebpackPlugin({
      "template": "./src\\index.html",
      "filename": "./index.html",
      "hash": false,
      "inject": false,  <---- THIS
      "compile": true,
      "favicon": false,
      "minify": false,
      "cache": true,
      "showErrors": true,
      "chunks": "all",
      "excludeChunks": [],
      "title": "Webpack App",
      "xhtml": true
}

daniloarcidiacono on 27 Jul 2017

👍3

You are right @daniloarcidiacono . The webpack.config.js file got by ng eject seems to reveal that a bug is about the config of htmlWebpackPlugin at that line. It seems that the ng build command runs the build by setting inject property to false.

AndreaPaciolla on 27 Jul 2017

🎉1

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}