Nxext Angular progress & known issues

[Jordan-Hall]

This issue will remain open until Angular is out of Alpha.

Known issues/bugs/resolved issues:

• Angular: Can't take an interface as @Input to a component #489 Using interfaces on decorator properties
  - this bug is related to a new SWC bug Interfaces and Reflect meta swc-project/swc#3601 - If you know rust and want to help - use import type
• Vite plugin tries to compile CSS as typescript
• HMR on HTML and css files
• no SCSS support

Production builds

• bundle size need to be shrink

v13.0.0-alpha.1 Bugs introduced

• Angular: Can't take an interface as @Input to a component #489 Using interfaces on decorator properties
• Vite plugin tries to compile CSS as typescript
• HMR on HTML and css files
• no SCSS support

v13.0.0-alpha.2 (Next release - https://github.com/nxext/nx-extensions/tree/package-angular)

Issues resolved from previous version:

• Vite plugin tries to compile CSS as typescript
• You can now create your own SCSS compiler - we don't want to support it out the box on these packages
• Angular: Can't take an interface as @Input to a component #489 Using interfaces on decorator properties has an acceptable workaround. Use import type when importing interface

Additional Change:

• sperate packages into 3 standalone packages
  • @nxext/angular-vite package allows you to use Vite without NX
  • @nxext/angular-swc - this is the main angular compiler for Nxext
  • @nxext/angular - this is now NX support for angular. We also added support for angular CLI
• added experimental plugin system. Please read

  nx-extensions/packages/angular/vite/src/lib/vite-plugin-angular/plugin-options.ts

  Lines 10 to 16 in b129a60

  	component?: Omit<AngularComponentOptions, 'sourceUrl'>;
  	/**
  	* @summary This is an experiment plugin system. It could be removed or change at any time
  	*/
  	swc?: {
  	plugins: Plugin[];
  	};

  This is only supported on SWC and VITE plugin.
  • this resolves the Scss issue. You can now extend and add sync support yourself.

New bugs:

[Jordan-Hall]

#489 example of how to use interfaces and decorators together

https://github.com/nxext/angular-vite-demo/blob/4a33b349a9dd0a2f5408ed21e98d78fdd4f68a9a/apps/demo/src/app/example.component.ts#L1-L10

Using import type will resolve the issue.