Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

strictTemplates compiler option in Angular components is ignored

See original GitHub issue

Describe the bug

Typing errors in Angular component templates are ignored by Storybook. They are correctly thrown by Angular compiler though. angularCompilerOptions.strictTemplates = true option in tsconfig.json is responsible for type checking the templates. This option is not used by Storybook.

To Reproduce

Create Angular app with strict mode enabled
Add storybook to it
Try to access possibly undefined property in the template

I created reproduction repo here: https://github.com/pf1gura/Storybook-Strict-Templates

Expected behavior

Storybook should throw error when development server is used, just like Angular dev server does in that case.

System

  System:
    OS: macOS 11.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 15.3.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - /usr/local/bin/npm
  Browsers:
    Chrome: 88.0.4324.96
    Edge: 86.0.622.43
    Firefox: 83.0
    Safari: 14.0.2

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

literalpiecommented, Oct 19, 2021

Despite Ivy support, Storybook still uses JIT, not the AOT compiler (more info). When JIT is used in any Angular project, none of the strictTemplate options work. (I just tested this in my own project).

1reaction

hv-pulcommented, Oct 6, 2021

We are running Storybook 6.3.9 (with Ivy-support) but still run into this issue. Our Angular version is 11.2.14, but from what I understand that should not affect the Ivy support?

/edit: we tried updating the reference-repo by @pf1gura (Angular 12, WP5 & Storybook) but there still is no error thrown from Storybook, only by Ivy so the issue still persists.

Top Results From Across the Web

Angular compiler options

References created by the template compiler use this module name when importing symbols from the flat module. Ignored if flatModuleOutFile is false ....

Angular 9's Best Hidden Feature: Strict Template Checking

Find and report more errors than ever with Angular 9's Ivy compiler, strict template checking.

angular - Disable strictTemplates per file not entirely

Preferably direct in the file itself. Something like: component.html. // pseudo code . Is ...

Angular compiler options

When true , replaces the templateUrl and styleUrls property in all @Component decorators with inlined contents in template and styles properties. When enabled, ......

Angular compilation restrictions overview

when the flag is disabled, null and undefined types are ignored by the ... More about the Angular component lifecycle can be found...