Figure out how to Circumvent the Angular Code Analysis

[Ben Winding]

Angular's Compilation Steps

According to angular documentation. There's 3 main steps of compilation:

• Phase 1 is code analysis. In this phase, the TypeScript compiler and AOT collector create a representation of the source. The collector does not attempt to interpret the metadata it collects. It represents the metadata as best it can and records errors when it detects a metadata syntax violation.

• Phase 2 is code generation. In this phase, the compiler's StaticReflector interprets the metadata collected in phase 1, performs additional validation of the metadata, and throws an error if it detects a metadata restriction violation.

• Phase 3 is template type checking. In this optional phase, the Angular template compiler uses the TypeScript compiler to validate the binding expressions in templates. You can enable this phase explicitly by setting the fullTemplateTypeCheck configuration option; see Angular compiler options.

Adding Another Type Of @NgModule

We want to add our own keyword decorator @PageModule which is a new type of @Module.

import { PageModule } from './page';

@PageModule({
  template: `<h1>Welcome</h1>`
})
export class TestPage {}

Problem

The problem is it fails at Phase 1 and throws the error that it's not a known type.

ERROR in : Unexpected value 'TestComponent in /home/ben/projects/ng-ts-transformations/src/app/test.component.ts' 
  declared by the module 'AppModule in /home/ben/projects/ng-ts-transformations/src/app/app.module.ts'. 
  Please add a @Pipe/@Directive/@Component annotation.

Hack Solution

So it turns out we can just stop the error by returning early from the check

But is there a better way to tell the angular compiler - during phase 1: code analysis - that @PageModule is a valid type?

[Ben Winding]

After a lot of research it seems this goal is not possible: angular/angular-cli#19328

The new design will abstract the entire Angular Compiler and transfer files to an intermediate .ngext folder, just like nextjs and nuxtjs