angular-cli: Using ng serve with --aot option causes constant invalidating and rebuilding

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

MacOS Sierra

Versions.

Please run ng --version. If there’s nothing outputted, please run in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.16 node: 6.7.0 os: darwin x64

Repro steps.

Was this an app that wasn’t created using the CLI? What change did you do on your code? etc.

ng serve --aot

Initially builds, then goes into a constant Webpack INVALID rebuild VALID INVALID rebuild cycle.

The log given by the failure.

Normally this include a stack trace and some more information.

** NG Live Development Server is running on http://localhost:4200. **
4109ms building modules                 1ms add01043ms c94ms asset31ms emittinggHash: 79f9768baa01f1f7cde4
Version: webpack 2.1.0-beta.22
Time: 6095ms
           Asset       Size  Chunks             Chunk Names
  main.bundle.js    1.82 MB    0, 2  [emitted]  main
styles.bundle.js    10.4 kB    1, 2  [emitted]  styles
       inline.js    5.53 kB       2  [emitted]  inline
        main.map    1.98 MB    0, 2  [emitted]  main
      styles.map    14.5 kB    1, 2  [emitted]  styles
      inline.map    5.59 kB       2  [emitted]  inline
      index.html  476 bytes          [emitted]
  assets/bb8.png    12.5 kB          [emitted]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.81 kB       0
Child src/app/app.component.html:
                                                                   Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/app.component.html  2.67 kB       0       <app-nav-bar></app-nav-bar>
    <h1>
      {{title}}
    </h1>

    <my-fader [isVisible]="isVisible">
      Hello there <img src="/assets/bb8.png">
    </my-fader>


    <button (click)="isVisible = !isVisible">Toggle</button>
Child src/app/nav-bar/nav-bar.component.html:
                                                                               Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/nav-bar/nav-bar.component.html  2.52 kB       0       <nav>
      <img src="/assets/bb8.png">navbar-component works!
    </nav>

Child src/app/fader/fader.component.html:
                                                                           Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/fader/fader.component.html  2.59 kB       0       <div [@visibilityChanged]="visibility" >
          <ng-content></ng-content>
          <p>Can you see me? I should fade in or out...</p>
    </div>
Child src/app/nav-bar/nav-bar.component.scss:
                                                                               Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/nav-bar/nav-bar.component.scss  2.45 kB       0
Child src/app/fader/fader.component.scss:
                                                                           Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/fader/fader.component.scss  2.45 kB       0
Child src/app/app.component.scss:
                                                                   Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/app.component.scss  2.67 kB       0       @import '../styles';

    h1 {
        background-color: $primary-color
    }
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
480ms building modules                  3ms add0ms1ms ch54ms asset0ms emitting gHash: 79f9768baa01f1f7cde4
Version: webpack 2.1.0-beta.22
Time: 1194ms
           Asset     Size  Chunks       Chunk Names
  main.bundle.js  1.82 MB    0, 2       main
styles.bundle.js  10.4 kB    1, 2       styles
       inline.js  5.53 kB       2       inline
        main.map  1.98 MB    0, 2       main
      styles.map  14.5 kB    1, 2       styles
      inline.map  5.59 kB       2       inline
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.81 kB       0
Child src/app/app.component.html:
                                                                   Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/app.component.html  2.67 kB       0       <app-nav-bar></app-nav-bar>
    <h1>
      {{title}}
    </h1>

    <my-fader [isVisible]="isVisible">
      Hello there <img src="/assets/bb8.png">
    </my-fader>


    <button (click)="isVisible = !isVisible">Toggle</button>
Child src/app/nav-bar/nav-bar.component.html:
                                                                               Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/nav-bar/nav-bar.component.html  2.52 kB       0       <nav>
      <img src="/assets/bb8.png">navbar-component works!
    </nav>

Child src/app/fader/fader.component.html:
                                                                           Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/fader/fader.component.html  2.59 kB       0       <div [@visibilityChanged]="visibility" >
          <ng-content></ng-content>
          <p>Can you see me? I should fade in or out...</p>
    </div>
Child src/app/app.component.scss:
                                                                   Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/app.component.scss  2.67 kB       0       @import '../styles';

    h1 {
        background-color: $primary-color
    }
Child src/app/nav-bar/nav-bar.component.scss:
                                                                               Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/nav-bar/nav-bar.component.scss  2.45 kB       0
Child src/app/fader/fader.component.scss:
                                                                           Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/fader/fader.component.scss  2.45 kB       0
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
446ms building modules                  1ms add1ms0ms ch48ms asset1ms emitting gHash: 79f9768baa01f1f7cde4
Version: webpack 2.1.0-beta.22
Time: 1095ms
           Asset     Size  Chunks       Chunk Names
  main.bundle.js  1.82 MB    0, 2       main
styles.bundle.js  10.4 kB    1, 2       styles
       inline.js  5.53 kB       2       inline
        main.map  1.98 MB    0, 2       main
      styles.map  14.5 kB    1, 2       styles
      inline.map  5.59 kB       2       inline
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.81 kB       0
Child src/app/app.component.html:
                                                                   Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/app.component.html  2.67 kB       0       <app-nav-bar></app-nav-bar>
    <h1>
      {{title}}
    </h1>

    <my-fader [isVisible]="isVisible">
      Hello there <img src="/assets/bb8.png">
    </my-fader>


    <button (click)="isVisible = !isVisible">Toggle</button>
Child src/app/nav-bar/nav-bar.component.html:
                                                                               Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/nav-bar/nav-bar.component.html  2.52 kB       0       <nav>
      <img src="/assets/bb8.png">navbar-component works!
    </nav>

Child src/app/fader/fader.component.html:
                                                                           Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/fader/fader.component.html  2.59 kB       0       <div [@visibilityChanged]="visibility" >
          <ng-content></ng-content>
          <p>Can you see me? I should fade in or out...</p>
    </div>
Child src/app/app.component.scss:
                                                                   Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/app.component.scss  2.67 kB       0       @import '../styles';

    h1 {
        background-color: $primary-color
    }
Child src/app/nav-bar/nav-bar.component.scss:
                                                                               Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/nav-bar/nav-bar.component.scss  2.45 kB       0
Child src/app/fader/fader.component.scss:
                                                                           Asset     Size  Chunks       Chunk Names
    /Users/John/Dev/Javascript/Angular/a2test/src/app/fader/fader.component.scss  2.45 kB       0
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
 32% building modules 3/6 modules 3 active ...pp/fader/fader.component.ngfactory.ts

Mention any other details that might be useful.

Thanks! We’ll be in touch soon.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 16 (11 by maintainers)

Most upvoted comments

I had noticed that:

AOT is not mentioned in the readme yet
AOT just landed in master three days ago
AOT outputs a bunch of extra files into the just directory: the generated source code is landing there, clearly not something one would actually intend to ship as part of a distributable.

This makes me suspect that what we are looking at here is a super rough super early version of AOT support, still under development, not actually intended to work 100% yet.

kylecordes on Sep 30, 2016

Here’s what I’m seeing, as documented in #2560.

ng serve --aot causes constant rebuild

ng build --aot works fine as long as you do not use the --watch or --output-path / -o flags, but those cases fail for other reasons.

The --output-path / -o flag shows an error message not constant rebuild - see #2538.

The --watch flag breaks without --output-path / -o whether it’s --aot or not - see #2511.

Recap:

So what works: ng build --aot ng build -prod --aot

Do not add --watch or --output-path / -o to them, or you get other issues.

And do not use ng serve --aot (with or without any other flags), or you get the constant rebuild documented in this very issue, and in my accidental duplicate #2560.

Meligy on Oct 7, 2016

I wish I had my laptop with me. Basically this is what to reproduce: (on Windows 10):

ng new helloworld
in app.component.css, add a style, starting with “.” eg ".blue{color: blue;}" Now if you do a build "ng build -prod --aot", it will fail. It complains invalid token. Can’t remember the details. Just to confirm, I also have endless rebuilding problem if I do "ng server --aot"

garysui on Sep 30, 2016

I just tried it on a branch new app (ng new aottest). It only has the default styles.css file, which is empty, and I’m seeing the same behavior - repeated building of the app.

The only thing I did do, was update the packages to their latest version - Angular 2.0.1, etc. I did get an “UNMET PEER DEPENDENCY” when I changed Typescript to the latest, release, version - 2.0.3:

├─┬ angular-cli@1.0.0-beta.16
│ ├─┬ protractor@3.3.0
│ │ └─┬ jasmine@2.4.1
│ │   └── jasmine-core@2.4.1
│ └── UNMET PEER DEPENDENCY typescript@2.0.2

npm WARN @ngtools/webpack@1.0.0 requires a peer of typescript@2.0.2 but none was installed.

jtsom on Sep 29, 2016