What code can be statically checked and what cannot by Angular AOT compiler?

时间:2019-04-08 12:59:37

标签: angular compiler-errors angular2-aot

I have been working on some Angular page transitions that I want to be flexibly defined. So I created a new typescript-file that exports an array filled with angular-transitions. However, when I compile the project with the AOT compiler it doesn't work because the array is not created. I can't seem to determine why the array could not be statically created. So now I wonder, why can this not be compiled by AOT? What is not static in my code that makes this crash?

export const routerTransition = trigger(
  "routerTransition",
  ["page1", "page2", "page3"]
    .map(route => [
      transition("* => " + route, [
        query(":enter, :leave", style({ position: "fixed" }), {
          optional: true
        }),
        group([
          query(
            ":enter",
            [
              style({ transform: "translateX(100%)" }),
              animate(".3s ease-in-out", style({ transform: "translateX(0%)" }))
            ],
            { optional: true }
          ),
          query(
            ":leave",
            [
              style({ transform: "translateX(0%)" }),
              animate(
                ".3s ease-in-out",
                style({ transform: "translateX(-100%)" })
              )
            ],
            { optional: true }
          )
        ])
      ]),
      transition(route + " => *", [
        query(":enter, :leave", style({ position: "fixed" }), {
          optional: true
        }),
        group([
          query(
            ":enter",
            [
              style({ transform: "translateX(-100%)" }),
              animate(".5s ease-in-out", style({ transform: "translateX(0%)" }))
            ],
            { optional: true }
          ),
          query(
            ":leave",
            [
              style({ transform: "translateX(0%)" }),
              animate(
                ".5s ease-in-out",
                style({ transform: "translateX(100%)" })
              )
            ],
            { optional: true }
          )
        ])
      ])
    ])
    .reduce((total, pair) => total.concat(pair))
);

Ok, so I found a solution that works. However, I still have no clue what code is accepted and what is not. So I'm adding my solution to the question, since the question is still unanswered. Here is what, somehow, works:

export function toPage(route) {
  return transition("* => " + route, [
      query(":enter, :leave", style({ position: "fixed" }), {
        optional: true
      }),
      group([
        query(
          ":enter",
          [
            style({ transform: "translateX(100%)" }),
            animate(".3s ease-in-out", style({ transform: "translateX(0%)" }))
          ],
          { optional: true }
        ),
        query(
          ":leave",
          [
            style({ transform: "translateX(0%)" }),
            animate(
              ".3s ease-in-out",
              style({ transform: "translateX(-100%)" })
            )
          ],
          { optional: true }
        )
      ])
    ]);
}

export function fromPage(route) {
  return transition(route + " => *", [
    query(":enter, :leave", style({ position: "fixed" }), {
      optional: true
    }),
    group([
      query(
        ":enter",
        [
          style({ transform: "translateX(-100%)" }),
          animate(".5s ease-in-out", style({ transform: "translateX(0%)" }))
        ],
        { optional: true }
      ),
      query(
        ":leave",
        [
          style({ transform: "translateX(0%)" }),
          animate(
            ".5s ease-in-out",
            style({ transform: "translateX(100%)" })
          )
        ],
        { optional: true }
      )
    ])
  ]);
}

export function pageTransition(route) {
  return [toPage(route), fromPage(route)];
}

These functions are now called from the app component like this:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app-scss/app.component.scss'],
  animations: [trigger('routerTransition', [
    ...pageTransition('contact'),
    ...pageTransition('portfolio'),
    ...pageTransition('services'),
    ...pageTransition('about-us'),
    ...pageTransition('news'),
    ...pageTransition('home')
  ])]
})

0 个答案:

没有答案