aurelia-cli beta 1.7/typescript 3.2.2 activationStrategy not allowed in router.config

[jeremy-holt]

I'm submitting a bug report

• Library Version:
  aurelia-cli 1.0.7 beta

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  10.11.0

• Yarn Version:
  1.12.3

• JSPM OR Webpack AND Version
  Webpack 4.27.1

• Browser:
  Chrome 70.0.3538.110

• Language:
  TypeScript 3.2.2

Current behavior:
Just ran yarn upgrade. It updated aurelia-cli from beta 5 to to beta 7

au build fails to compile on
route.config[map ..... activationStrategy:'replace".....

Expected/desired behavior:
It should compile

• What is the expected behavior?

• What is the motivation / use case for changing the behavior?

[3cp]

Can you show more details? It looks like a syntax error 'replace".

[jeremy-holt]

Sorry - that was my bad typing. This was the actual code. I removed activationStrategy and it compiles now.

 public configureRouter(config: RouterConfiguration, router: Router) {
    config.title = "Amberwood";

    config.map([
      { route: ["", "home"], moduleId: PLATFORM.moduleName("modules/home/home"), name: "home", nav: true, title: "Home" },
      { route: "client/:id?", href: "#/client", moduleId: PLATFORM.moduleName("modules/client/client-edit"), name: "clientEdit", nav: true, title: "Clients" },
      {
        route: "contract/:id?", href: "#/contract", moduleId: PLATFORM.moduleName("modules/contract/contract-edit"), name: "contractEdit", nav: true, title: "Contracts",
        activationStrategy: "replace"
      },
      { route: "contract/print", moduleId: PLATFORM.moduleName("modules/printContract/print-contract"), name: "printContract", nav: false, title: "Print contract" },
      {

[3cp]

Sorry, I am not TS user. But can you try TS v3.1.6 + cli beta7? It could be the same reason for the bluebird import failure.

[jeremy-holt]

I suspect it was the upgrade to TS 3.2.2 - Stupidly I did them both at the same time. Each time I upgrade TS it finds more errors in my code (good thing!).
I do remember that putting in activationStrategy:"replace" never worked anyway. I ended up changing the query string when wanting to reload the same page. I should have removed activationStrategy from route.config at the time.

[3cp]

Based on the d.ts file, I guess you need to do

import {activationStrategy} from 'aurelia-router';
... activationStrategy: activationStrategy.replace,

[jeremy-holt]

Nope - doesn't like that

[jeremy-holt]

[ts]
Argument of type '({ route: string[]; moduleId: string; name: string; nav: boolean; title: string; } | { route: string; href: string; moduleId: string; name: string; nav: boolean; title: string; } | { route: string; href: string; ... 4 more ...; activationStrategy: string; } | { ...; } | { ...; } | { ...; })[]' is not assignable to parameter of type 'RouteConfig | RouteConfig[]'.
  Type '({ route: string[]; moduleId: string; name: string; nav: boolean; title: string; } | { route: string; href: string; moduleId: string; name: string; nav: boolean; title: string; } | { route: string; href: string; ... 4 more ...; activationStrategy: string; } | { ...; } | { ...; } | { ...; })[]' is not assignable to type 'RouteConfig[]'.
    Type '{ route: string[]; moduleId: string; name: string; nav: boolean; title: string; } | { route: string; href: string; moduleId: string; name: string; nav: boolean; title: string; } | { route: string; href: string; ... 4 more ...; activationStrategy: string; } | { ...; } | { ...; } | { ...; }' is not assignable to type 'RouteConfig'.
      Type '{ route: string; href: string; moduleId: string; name: string; nav: boolean; title: string; activationStrategy: string; }' is not assignable to type 'RouteConfig'.
        Types of property 'activationStrategy' are incompatible.
          Type 'string' is not assignable to type '"replace" | "no-change" | "invoke-lifecycle"'. [2345]

[jeremy-holt]

OK - so it's just a problem in the d-ts. Need to change it to
activationStrategy: "replace" | "no-change" | "invoke-lifecycle"

[3cp]

@bigopon @davismj some typing problem with latest TS?

[jeremy-holt]

Sorry - misspoke. It is correct in the d.ts. Can't see why it throws an error for 'replace'.

[davismj]

The router typings are correct. This is a bug or a quirk, depending on how positive you are, in TypeScript itself. See microsoft/TypeScript#10570.

config.map([
  { route: 'foo', moduleId: 'bar', activationStrategy: 'invoke-lifecycle' }
]);

What happens is that when you write the above TypeScript infers a type from the route config object literal and then tries to match it up with RouteConfig. In the first step, it recognizes 'invoke-lifecycle' as a string and not a string literal type, which is incompatible with the string literal type.

Workaround

config.map([
  { route: 'foo', moduleId: 'bar', activationStrategy: 'invoke-lifecycle' },
  { route: 'foo', moduleId: 'bar', activationStrategy: 'invoke-lifecycle' }
] as RouteConfig[]);

For now, this will work. You could also cast just the activationStrategy: <'invoke-lifecycle'>'invoke-lifecycle' or the individual route configs { ... } as RouteConfig,

Fix

We need to drop the string literal typing in favor of either a string or an enum-like.

[EisenbergEffect]

I think this was fixed in the latest version of TS, wasn't it?

[davismj]

Haven't seen that. Issue is still open in MS repo and upgrading to latest is what brought my attention to this issue.

[ejuntu]

I had this issue and got around with
var replaceStrat: any = "replace";
config.map([ { route: "", name: "index", moduleId: PLATFORM.moduleName("pages/index/index", "index"), title: "Front page", nav: 0, activationStrategy: replaceStrat },