Ionic-app-scripts: Ionic serve watch does not output Typescript errors

[nickwinger]

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

When using ionic serve it only shows Typescript errors the first run of build
after that when the watch triggers, it says "build finished" although there are typescript errors...

What behavior are you expecting?

Ionic serve should also fail the build and show Typescript errors when in watch mode

Steps to reproduce:

1. Make an ionic project with a typescript error
2. run ionic serve (the first time it will show typescript build errors)
3. make a minor change (add comment) and look at the watch trigger from ionic serve (no build errors)

insert any relevant code between the above and below backticks

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

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

[nickwinger]

you know that this issue is major urgent, why ?
You code and the watch says all the time the build succeeds, that page reloads everything works.
In reality you have broken code, but you don't see it, and you wonder why the app does not behave like u wish.
The curious thing is that the watcher some to just ignore code that does not compile (transpile), because the app is just working fine (the version before errors started)
The ionic serve watcher says build is ok and reloads the old version of the app.
You never know that your code actually is broken.
This bug makes the ionic serve command completely useless...

[scottieslg]

+1 here. I expect ionic serve to act similar to ng build --watch.

[lathonez]

This issue is very serious, it's curious that less people are here. Wondering if it's something specific to a certain setup. I am facing this too:

cli packages: (/home/lathonez/.node/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.1.6
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.9.4
    npm  : 5.6.0 
    OS   : Linux 4.13

Environment Variables:

    ANDROID_HOME : /home/lathonez/android-sdk-linux

Misc:

    backend : legacy

[lathonez]

Also, as of v4 Ionic are moving to ng-cli anyway, so this will be moot:

https://github.com/ionic-team/ionic-app-scripts/issues/762#issuecomment-351907363

However I really need a workaround in the interim.

[lathonez]

Have a fix working for this against @ionic/app-scripts: 3.1.6

In node_modules/@ionic/app-scripts/dist/transpile.js, replace:

        var host = compiler_host_factory_1.getInMemoryCompilerHostInstance(tsConfig.options);
        if (workerConfig.useTransforms && helpers_1.getBooleanPropertyValue(Constants.ENV_PARSE_DEEPLINKS)) {
            // beforeArray.push(purgeDeepLinkDecoratorTSTransform());
            // beforeArray.push(getInjectDeepLinkConfigTypescriptTransform());
            // temporarily copy the files to a new location
            copyOriginalSourceFiles(context.fileCache);
            // okay, purge the deep link files NOT using a transform
            var deepLinkFiles = util_1.filterTypescriptFilesForDeepLinks(context.fileCache);
            deepLinkFiles.forEach(function (file) {
                file.content = util_1.purgeDeepLinkDecorator(file.content);
            });
            var file = context.fileCache.get(helpers_1.getStringPropertyValue(Constants.ENV_APP_NG_MODULE_PATH));
            var hasExisting = util_1.hasExistingDeepLinkConfig(file.path, file.content);
            if (!hasExisting) {
                var deepLinkString = util_1.convertDeepLinkConfigEntriesToString(helpers_1.getParsedDeepLinkConfig());
                file.content = util_1.getUpdatedAppNgModuleContentWithDeepLinkConfig(file.path, file.content, deepLinkString);
            }
        }

with

        var host = ts.createCompilerHost(tsConfig.options);

remove / comment:

        resetSourceFiles(context.fileCache);

As per: https://gist.github.com/lathonez/672609416bac268f07ead769763cecaa#file-transpile-js-L125-L152

That gist is a working copy of transpile.js for me. I am probably just going to monkey-patch it.

[mungojerry]

Is there any news regarding this issue? it's a pain having to either monkey patch or manually change using the fix by @lathonez (which does work, YMMV!)

Edit: I'm using 3.1.8

[lcoenen]

I still have this issue too. So annoying.. I use version 3.20. I'm afraid to mess with webpack to be honest. I'll try the workaround. Thanks

EDIT also, since it looks related, I sometime have the serve script complaining about error AFTER I FIXED THEM. It sometime look like it's caching my code for a while and it's randomly reloaded. It's weird.

[dylan-chong]

Bump. This issue is very very very annoying!!!

[Arrowana]

Delicious issue that makes development a great pain

[AllARTSoftworks]

Same here, please fix!

[nickwinger]

after on year it is still not working. I'm really pissed. Ionic people are only concerned about the next version or something.
How about just fixing what there is
To have a framework that is working without bugs.

I mean how can you folks develop, when the errors are not shown ?!?!?!?!?!

[nickwinger]

moving to ionic v4 is not an option for me, i have a big app with ionic 3 and it works fine, but developing without seeing the errors is impossible.

[nickwinger]

Have a fix working for this against @ionic/app-scripts: 3.1.6

In node_modules/@ionic/app-scripts/dist/transpile.js, replace:

        var host = compiler_host_factory_1.getInMemoryCompilerHostInstance(tsConfig.options);
        if (workerConfig.useTransforms && helpers_1.getBooleanPropertyValue(Constants.ENV_PARSE_DEEPLINKS)) {
            // beforeArray.push(purgeDeepLinkDecoratorTSTransform());
            // beforeArray.push(getInjectDeepLinkConfigTypescriptTransform());
            // temporarily copy the files to a new location
            copyOriginalSourceFiles(context.fileCache);
            // okay, purge the deep link files NOT using a transform
            var deepLinkFiles = util_1.filterTypescriptFilesForDeepLinks(context.fileCache);
            deepLinkFiles.forEach(function (file) {
                file.content = util_1.purgeDeepLinkDecorator(file.content);
            });
            var file = context.fileCache.get(helpers_1.getStringPropertyValue(Constants.ENV_APP_NG_MODULE_PATH));
            var hasExisting = util_1.hasExistingDeepLinkConfig(file.path, file.content);
            if (!hasExisting) {
                var deepLinkString = util_1.convertDeepLinkConfigEntriesToString(helpers_1.getParsedDeepLinkConfig());
                file.content = util_1.getUpdatedAppNgModuleContentWithDeepLinkConfig(file.path, file.content, deepLinkString);
            }
        }

with

        var host = ts.createCompilerHost(tsConfig.options);

remove / comment:

        resetSourceFiles(context.fileCache);

As per: https://gist.github.com/lathonez/672609416bac268f07ead769763cecaa#file-transpile-js-L125-L152

That gist is a working copy of transpile.js for me. I am probably just going to monkey-patch it.

With your fix laze loading the ionic-pages does not work anymore :(
i get an error: "Invalid link"

[gnesher]

umm this sounds rather serious, any plans to address this?