Ionic-app-scripts: ngc Task does not throw template errors as of 0.0.47

[bildonia]

Short description of the problem:

While running ionic build --prod, the ngc Task does not show template errors and allows the build to complete.
Output:

> ionic-app-scripts build "--prod"

[10:13:19]  ionic-app-scripts 0.0.47
[10:13:19]  build prod started ...
[10:13:19]  clean started ...
[10:13:19]  clean finished in 1 ms
[10:13:19]  copy started ...
[10:13:19]  ngc started ...
[10:13:26]  ngc finished in 7.08 s
[10:13:26]  webpack started ...
[10:13:26]  copy finished in 7.21 s
[10:13:32]  webpack finished in 5.30 s
[10:13:32]  uglifyjs started ...
[10:13:32]  sass started ...
[10:13:33]  sass finished in 1.39 s
[10:13:33]  cleancss started ...
[10:13:34]  cleancss finished in 962 ms
[10:13:41]  uglifyjs finished in 9.36 s
[10:13:41]  build prod finished in 21.75 s

What behavior are you expecting?

I expected to see template errors in the console and the build should have failed. Here is the output from 0.0.45:

> ionic-app-scripts build

[10:17:19]  ionic-app-scripts 0.0.45
[10:17:19]  build prod started ...
[10:17:19]  clean started ...
[10:17:19]  clean finished in 3 ms
[10:17:19]  copy started ...
[10:17:19]  ngc started ...
[10:17:19]  copy finished in 71 ms
[10:17:27]  Error: Error at /Users/billsand/TestProjects/TestOldAppScripts/.tmp/app/app.component.ngfactory.ts:290:40
[10:17:27]  Property 'A_BAD_VARIABLE' does not exist on type 'MyApp'.
[10:17:27]  ngc failed
[10:17:27]  ionic-app-script task: "build"
[10:17:27]  Error: Error

Steps to reproduce:

1. Create a new project ionic start MyIonic2Project tutorial --v2
2. Update package.json devDependecies with "@ionic/app-scripts": "0.0.47"
3. Perform Upgrade steps for ionic-app-scripts 0.0.47
4. Make a template error in app.html (change a variable/method name in a binding)
5. Run ionic build --prod

src/app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

src/app/app.html ( [root] is bound an undefined variable to cause an error)

<ion-menu [content]="content">

  <ion-header>
    <ion-toolbar>
      <ion-title>Pages</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav [root]="A_BAD_VARIABLE" #content swipeBackEnabled="false"></ion-nav>

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

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

[danbucholtz]

@bildonia,

This is by design. Your app should work exactly as it does with ionic serve. Are you seeing something different? This is also how the Angular CLI works.

We found the template errors to be too vague. Maybe we can make this an option down the road.

Thanks,
Dan

[bildonia]

I understand that ionic build is just like ionic serve now.

ionic build --prod runs the ngc task though so why would that not throw errors if I am building this for production?

[ekrapfl]

I agree with @bildonia. It seems like if ngc throws errors, I don't want my build to succeed. It gives me a nice assurance that there are no lurking runtime errors in my templates. At a minimum, I would expect to see the errors output in the ionic build process. Right now, it is just completely hiding the output from us.

This did work in previous versions of ionic-app-scripts.

[danbucholtz]

@bildonia and @ekrapfl,

ngc will throw errors if the project doesn't build correctly. What it won't do is Typecheck generated code. We found Type checking generated code to be a great source of confusion and frustration for our users. You could run ionic serve and see/use your app, but when building for the device you would have a different experience often times with very vague error messages.

If there is a legitimate error, it should be found while developing. If there is a subtle syntax error, often times the app will still work (just like when using the runtime compiler) just fine.

This is something we could expose down the road. Right now it's lower priority for us though.

Thanks,
Dan

[ekrapfl]

I can understand that typechecking the generated code can be a bit confusing, but it is a LOT easier to find errors this way. Otherwise, you just have to wait until someone hits the area at runtime. That is the way it worked with previous Ionic betas, but personally, I was really liking the AoT giving me errors if I fat-fingered something in an html template with ionic-app-scripts 0.0.46 and earlier. It was a very valuable feature to have.

[danbucholtz]

I can make it an option. I don't think it will be too difficult to do. It will be off by default right now, though, until ngc can output better error messages.

Thanks,
Dan

[danbucholtz]

This will land in0.0.48 today.

Thanks,
Dan

[danbucholtz]

Hi, sorry, this did not make the cut for 0.0.48. I am running into issues on Windows. I have spent a few hours on it but I have to switch gears for a bit.

In the meantime, this may help. It's not 100% baked yet and I haven't personally tried it, but some coworkers are having good results with it:

https://github.com/angular/vscode-ng-language-service

I will have this out as soon as I can!

Thanks,
Dan

[danbucholtz]

We probably aren't going to get to this for awhile. PR welcome!

Thanks,
Dan