Akita: Devtools break with angular 8 rc & ivy

Created on 6 May 2019  路  4Comments  路  Source: datorama/akita

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

When you try to do a ng serve, the following error appear :
image

Expected behavior

The angular app should appear.

Minimal reproduction of the problem with instructions

Clone this repo https://github.com/adraax/akita-devttols-error-minimal , npm install, ng serve -o, and the error would be in the console.
I can't use stackblitz for this example because of the "Can't find package:core-js" bug.

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

Angular 8 and the new Ivy compiler will be out soon, it would be nice if this package is compatible.

Environment


Angular version: 8.0.0-rc2

Browser:
- [x] Chrome (desktop) version 76.0.3783.0 dev
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: 11.13.0
- Platform: Mac / Windows

Others:

Most helpful comment

Ivy is still in beta so that it might be fixed soon. I will leave the issue open for now. In the meantime you can use the devtools directly:

// main.ts
import { akitaDevtools } from '@datorama/akita';

akitaDevtools();

All 4 comments

Ivy is still in beta so that it might be fixed soon. I will leave the issue open for now. In the meantime you can use the devtools directly:

// main.ts
import { akitaDevtools } from '@datorama/akita';

akitaDevtools();

@NetanelBasal
For now, AkitaDevtools class should be decorated to work it properly with Ivy. Otherwise it won't be processed by ngcc compiler.

I don't how exactly you're building @datorama/akita-ngdevtools package but artefacts show that AkitaDevtools is not decorated class.

class AkitaDevtools {
    /**
     * @param {?} ngZone
     * @param {?} options
     */
    constructor(ngZone, options) {
        this.ngZone = ngZone;
        this.options = options;
        akitaDevtools(this.ngZone, this.options);
    }
}
/** @nocollapse */
AkitaDevtools.ctorParameters = () => [
    { type: NgZone },
    { type: undefined, decorators: [{ type: Inject, args: [DEVTOOLS_OPTIONS,] }] }
];

Ngcc is looking for decorators static property or __decorate call, for example it should be like this:

AkitaDevtools.decorators = [
    { type: Injectable }
];

Looking at the source map I don't see Injectable decorator on that class

@Injectable() // <== required here
export class AkitaDevtools {
    constructor(
      private ngZone: NgZone,
      @Inject(DEVTOOLS_OPTIONS) private options: DevtoolsOptions
  ) {
      akitaDevtools(this.ngZone, this.options);
  }
}

Thanks, @alexzuza. I'm using ng-packagr. I will check the decorator thing and let you know.

Yes, the Injectable was missing. I added it in v3.0.0. Thanks, @alexzuza.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

NetanelBasal picture NetanelBasal  路  6Comments

zvnt picture zvnt  路  6Comments

johanrin picture johanrin  路  7Comments

hoisel picture hoisel  路  5Comments

bruceharrison1984 picture bruceharrison1984  路  6Comments