AOT Compiler not working with Route data property

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

AOT compiler not resolving Object access in routes data property

Expected behavior

The AOT retrieves the property value from the accessed Object

Minimal reproduction of the problem with instructions

Created a roles.ts

export const Roles = {
  'page1': 'ROLE_PAGE_1'
}

Created the app-routing.module.ts

...
import { Roles } from './shared/roles.ts';

const myRoutes: Routes = [{
  path: 'page1',
  component: Page1Component,
  data: {
    roles: [Roles['page1']]
  }
}]
...

I would expect that AOT would get the Roles.page1 value and insert 'ROLE_PAGE_1' into the data property.
But instead of having:

data: {
  roles: ['ROLE_PAGE_1']
}

I'm having

data: {
  roles: [void 0]
}

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

Give the possibility to externalize the information given to the data property from Routes.

Environment


Angular version: 4.3.6

 
For Tooling issues:
- Node version: 6.9 and 7.8
- Platform:  Linux - Ubuntu 14.04 and Windows

I even tried to use the Roles object appended to the window object but the AOT resolves it instead of keeping the window object as it keeps in other parts of the project.

Instead of having

data: {
  roles: [window.Roles['page1']]
}

I'm having

data: {
  roles: [null]
}

I have a similar problem while trying to use the following router data configuration:

    data: {
      ApiResolver: {
        company(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
          return { url: API_URLS.COMPANY.API + route.params.companyId };
        }
      }

After aot compilation, the function 'company' is missing in data.ApiResolver object.

Can you test this again in 5.0.

The angular template compiler now treats this case specially and rewrites the .js to introduce a shrouded export for the value of data and then generates a reference to this shrouded export.

@chuckjaz

@chuckjaz I was just looking for the 5.0 version release

Edit: I just gave a try with angular5 & ng-cli 1.5, and it does NOT work.

If I enable AOT, no error, but the function configuration is ignored (probably dropped during AOT compilation):

ng serve --aot

And if I don't:

ng serve

I get this message:

webpack-internal:///../../../../../src/app/app.errors.ts:12 Error: Uncaught (in promise): Error: function configuration is not supported in aot mode
Error: function configuration is not supported in aot mode
    at ApiResolver.resolve (webpack-internal:///../../../../../src/app/backend/resolvers/api.resolver.ts:53)
    at PreActivation.getResolver (webpack-internal:///../../../router/esm5/router.js:3979)
    at PreActivation.resolveNode (webpack-internal:///../../../router/esm5/router.js:3953)
    at PreActivation.runResolve (webpack-internal:///../../../router/esm5/router.js:3929)
    at MergeMapSubscriber.eval [as project] (webpack-internal:///../../../router/esm5/router.js:3570)
    at MergeMapSubscriber._tryNext (webpack-internal:///../../../../rxjs/_esm5/operators/mergeMap.js:133)
    at MergeMapSubscriber._next (webpack-internal:///../../../../rxjs/_esm5/operators/mergeMap.js:123)
    at MergeMapSubscriber.Subscriber.next (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:96)
    at ArrayObservable._subscribe (webpack-internal:///../../../../rxjs/_esm5/observable/ArrayObservable.js:121)
    at ArrayObservable.Observable._trySubscribe (webpack-internal:///../../../../rxjs/_esm5/Observable.js:177)
    at ApiResolver.resolve (webpack-internal:///../../../../../src/app/backend/resolvers/api.resolver.ts:53)
    at PreActivation.getResolver (webpack-internal:///../../../router/esm5/router.js:3979)
    at PreActivation.resolveNode (webpack-internal:///../../../router/esm5/router.js:3953)
    at PreActivation.runResolve (webpack-internal:///../../../router/esm5/router.js:3929)
    at MergeMapSubscriber.eval [as project] (webpack-internal:///../../../router/esm5/router.js:3570)
    at MergeMapSubscriber._tryNext (webpack-internal:///../../../../rxjs/_esm5/operators/mergeMap.js:133)
    at MergeMapSubscriber._next (webpack-internal:///../../../../rxjs/_esm5/operators/mergeMap.js:123)
    at MergeMapSubscriber.Subscriber.next (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:96)
    at ArrayObservable._subscribe (webpack-internal:///../../../../rxjs/_esm5/observable/ArrayObservable.js:121)
    at ArrayObservable.Observable._trySubscribe (webpack-internal:///../../../../rxjs/_esm5/Observable.js:177)
    at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:824)
    at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:795)
    at eval (webpack-internal:///../../../../zone.js/dist/zone.js:873)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:425)
    at Object.onInvokeTask (webpack-internal:///../../../core/esm5/core.js:4815)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:424)
    at Zone.runTask (webpack-internal:///../../../../zone.js/dist/zone.js:192)
    at drainMicroTaskQueue (webpack-internal:///../../../../zone.js/dist/zone.js:602)
    at <anonymous>

@Toub

@Toub app/backend/resolvers/api.resolver.ts:53 seems to be application code.

If this is caused indirectly by the compiler can you link a github repository that contains a repro of the issue?

@chuckjaz

@chuckjaz you are right. For non-aot, it was a test in the application code to avoid the application to break only after deploying with AOT mode enabled.

As the underlying issue is fixed, I am closing this bug.

@chuckjaz

@chuckjaz It's OK, everything working now. Sorry for the delay.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

AOT Compiler not working with Route data property #18886

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

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

Environment

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

AOT Compiler not working with Route data property #18886

Description

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

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

Environment

Activity

sougiovn commented on Aug 26, 2017

Toub commented on Sep 1, 2017

chuckjaz commented on Oct 27, 2017

sougiovn commented on Oct 28, 2017

Toub commented on Nov 10, 2017

chuckjaz commented on Nov 10, 2017

Toub commented on Nov 13, 2017

chuckjaz commented on Nov 13, 2017

sougiovn commented on Nov 21, 2017

angular-automatic-lock-bot commented on Sep 12, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions