Ionic-app-scripts: When updating code on a component the template for a tab reverts back to a previous version

[DiedrikDM]

Short description of the problem:

When I start to serve the app everything goes fine. The tools take my latest version of everything basically.
_However_ when I'm updating my templates and code, I can see that a previous version of a template is being used after updating code in a component or service.

What behavior are you expecting?

To always see the latest version of the template being rendered.

Steps to reproduce:

1. Start to serve the app (both npm run ionic:serve or ionic serve)

Output

> ionic-app-scripts serve

[15:42:22]  ionic-app-scripts 1.1.0
[15:42:22]  watch started ...
[15:42:22]  build dev started ...
[15:42:22]  clean started ...
[15:42:22]  clean finished in 9 ms
[15:42:22]  copy started ...
[15:42:22]  transpile started ...
[15:42:28]  transpile finished in 6.00 s
[15:42:28]  preprocess started ...
[15:42:28]  preprocess finished in 1 ms
[15:42:29]  webpack started ...
[15:42:29]  copy finished in 6.37 s
[15:42:39]  webpack finished in 10.30 s
[15:42:39]  sass started ...
[15:42:40]  sass finished in 1.35 s
[15:42:40]  postprocess started ...
[15:42:40]  postprocess finished in 1 ms
[15:42:40]  lint started ...
[15:42:40]  build dev finished in 17.71 s
[15:42:43]  watch ready in 20.43 s
[15:42:43]  dev server running: http://localhost:8100/

1. Make a change in one of the typescript files and save it. I'm using a service that gets injected into the component for which I'm updating the template. The change gets reflected in the running app.

Output

[15:42:46]  lint finished in 5.37 s
[15:43:16]  build started ...
[15:43:16]  transpile update started ...
[15:43:17]  transpile update finished in 199 ms
[15:43:17]  webpack update started ...
[15:43:22]  webpack update finished in 5.24 s
[15:43:25]  build finished in 8.33 s

1. Make an update to a template (like adding a new h1 element), save it and see that the change gets reflected into the running app

Output

[15:43:59]  build started ...
[15:43:59]  template update started ...
[15:44:00]  template update finished in 110 ms
[15:44:00]  build finished in 117 ms

1. Again make an update to the previous typescript file (in my case the service I was talking about). In my case I see a template that was previously used, so without the changes from step 3.

Output

[15:44:19]  build started ...
[15:44:19]  transpile update started ...
[15:44:19]  transpile update finished in 27 ms
[15:44:19]  webpack update started ...
[15:44:24]  webpack update finished in 4.60 s
[15:44:25]  build finished in 6.32 s

Which @ionic/app-scripts version are you using?

"devDependencies": {
    "@ionic/app-scripts": "1.1.0",
    "typescript": "2.0.9"
  },

_Sidenote_
I would like to help find this issue (or whatever could explain it), but it's very hard to figure out where I need to start searching. I was hoping to be able to search for the log messages like "webpack update started" but to no avail. Could you maybe give me a general direction where I could start looking?

[danbucholtz]

Hi - I cannot recreate this. Say you have component-one.html, component-one.ts, component-two.html and component-two.ts, can you create steps to reproduce with those two components?

Thanks,
Dan

[DiedrikDM]

Hi Dan,
I'll try to reproduce it with those steps, it will just be a bit later today (kids and programming don't always go hand in hand ;-))

Diedrik

[danbucholtz]

No worries. Whenever you get a chance. Please let me know how it goes.

Thanks,
Dan

[DiedrikDM]

Hi Dan,
I'm able to reproduce it with a simple component...

1. I've created a new ionic project with the following command:
   ionic start --v2 ionictest

2. I then let the creation run its course and it finishes without errors or warnings. I then start to serve the ionic app
   ionic serve

3. I go to the src/app folder and add two new files: component1.html and component1.ts. Here's the current code for both:

component1.html

<h1 (click)="callOnMe()">Hello There!</h1>

component1.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'Component1',
    templateUrl: 'Component1.html'
})
export class Component1 implements OnInit {
    constructor() { }

    callOnMe(){
        console.log('Muahaha!'); 
    }

    ngOnInit() {

     }
}

1. Of course I go to the app.module.ts and add a reference to Component1 (and import it) and I also remove everything from the app.html and add the directive for Component1 as follows:

app.module.ts

import { Component1 } from './component1';     // Right here
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    Component1     // Right here
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

app.html

<Component1></Component1>

1. Here I'm already getting the strange behavior, but just to be safe, I then stop ionic serve and do the following steps:
   a. start ionic serve
   b. revert app.html so it contains <ion-nav [root]="rootPage"></ion-nav> again and save it. It automatically reloads the page and shows me the tabbed view we love so dearly :)
   c. Go to component1.ts and change the callOnMe function to callOnMe(){ console.log('Hello there!'); } and save it again. It will reload automatically and show Component1 again on page instead of the ionic tabs.

Like I already said previously: I'm running the apps on version 1.1.0. The rest of my setup is as follows:

local typescript: 2.0.9
global tsc (tsc -v): 2.1.4
global ionic: 2.2.1

I'm running on Windows 10 (x64) and I'm using Chrome to test this. I have Chrome set up so that it deletes caching whenever the Developer Tools are open and yes I've got them open while I tested this ;-).
I hope this helps?

Thanks,
Diedrik

[glenharris]

This matches symptoms I am seeing - webpack update appears to be bringing in an older version of a template at (random?) times. I have used 'wget -r' to validate that it seems to be webpack that is serving the wrong contents to chrome, but I don't have any further details. Hopefully the reproducible test case above is enough to trace this, let me know if you need me to try to create another.
(I am running on linux/chrome, so this is unlikely to be platform-specific)

[vegardlarsen]

I am also seeing this behavior in two separate projects.

[vejja]

same here on OSX

[karlvd]

I see this problem as well, once a project grows above a simple test project with a few pages & components this happens frequently when rebuilding.
Running Windows 10

[chriswep]

i also have this issue, very strange. when i update component code the template reverts to an earlier version. restart of the dev server resolves it.

basically everything on latest versions, macOS

[yuricamara]

Same here!

[danbucholtz]

This should be fixed in nightly. I was able to recreate and resolve it. This slipped through the cracks as part of the Webpack 2.x RC to GA update a month or two back.

Note: There is a slew of things in the lastest nightly that are new-ish and once fully tested will be available soon in @ionic/[email protected].

Thanks,
Dan

[rashnk]

Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4

same issue, every time manullay delete build folder and rerun ionic serve, this makes development difficult