Platform: Example app does not compile

[FabienDehopre]

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

What is the current behavior?

When running the example app using either the example:start or the example:start:aot script, the compilation of the app fail with the following errors:

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: 49466d81b42155861f4b
Time: 21559ms
chunk    {0} 0.chunk.js, 0.chunk.js.map 79.4 kB {2} [rendered]
chunk    {1} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 324 kB {5} [initial] [rendered]
chunk    {2} main.bundle.js, main.bundle.js.map (main) 123 kB {4} [initial] [rendered]
chunk    {3} styles.bundle.js, styles.bundle.js.map (styles) 45.1 kB {5} [initial] [rendered]
chunk    {4} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.51 MB [initial] [rendered]
chunk    {5} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

WARNING in ./example-app/app/books/components/book-authors.ts
24:54-58 "export 'Book' was not found in '../models/book'

WARNING in ./example-app/app/books/components/book-authors.ts
24:78-82 "export 'Book' was not found in '../models/book'

WARNING in ./example-app/app/books/components/book-detail.ts
58:54-58 "export 'Book' was not found in '../models/book'

WARNING in ./example-app/app/books/components/book-detail.ts
58:78-82 "export 'Book' was not found in '../models/book'

WARNING in ./example-app/app/books/components/book-preview.ts
55:54-58 "export 'Book' was not found in '../models/book'

WARNING in ./example-app/app/books/components/book-preview.ts
55:78-82 "export 'Book' was not found in '../models/book'

ERROR in C:/Users/DehopréFabien/devs/platform/example-app/app/books/reducers/books.ts (14,32): An interface may only extend a clas
s or another interface.

ERROR in C:/Users/DehopréFabien/devs/platform/example-app/app/books/reducers/books.ts (54,44): Argument of type 'State' is not ass
ignable to parameter of type 'EntityState<Book>'.
  Type 'State' is not assignable to type 'EntityStateNum<Book>'.
    Property 'ids' is missing in type 'State'.

ERROR in C:/Users/DehopréFabien/devs/platform/example-app/app/books/reducers/books.ts (68,43): Argument of type 'State' is not ass
ignable to parameter of type 'EntityState<Book>'.
  Type 'State' is not assignable to type 'EntityStateNum<Book>'.

ERROR in C:/Users/DehopréFabien/devs/platform/example-app/app/books/reducers/index.ts (77,36): Argument of type 'MemoizedSelector<
object, State>' is not assignable to parameter of type '(state: object) => EntityState<Book>'.
  Type 'State' is not assignable to type 'EntityState<Book>'.
    Type 'State' is not assignable to type 'EntityStateNum<Book>'.

ERROR in C:/Users/DehopréFabien/devs/platform/example-app/app/books/reducers/index.ts (77,36): Argument of type 'MemoizedSelector<
object, State>' is not assignable to parameter of type '(state: object) => EntityState<Book>'.
  Type 'State' is not assignable to type 'EntityState<Book>'.
    Type 'State' is not assignable to type 'EntityStateNum<Book>'.

ERROR in C:/Users/DehopréFabien/devs/platform/example-app/app/books/reducers/books.ts (14,32): An interface may only extend a clas
s or another interface.

ERROR in C:/Users/DehopréFabien/devs/platform/example-app/app/books/reducers/books.ts (54,44): Argument of type 'State' is not ass
ignable to parameter of type 'EntityState<Book>'.
  Type 'State' is not assignable to type 'EntityStateNum<Book>'.
    Property 'ids' is missing in type 'State'.

ERROR in C:/Users/DehopréFabien/devs/platform/example-app/app/books/reducers/books.ts (68,43): Argument of type 'State' is not ass
ignable to parameter of type 'EntityState<Book>'.
  Type 'State' is not assignable to type 'EntityStateNum<Book>'.
webpack: Failed to compile.

Expected behavior:

The example app should compile without any error.

Minimal reproduction of the problem with instructions:

1. Clone the repo
2. npm run bootstrap
3. npm run example:start or npm run example:start:aot

Version of affected browser(s),operating system(s), npm, node and ngrx:

Commit 46d6f2fc35af8aef015561dbbfb9da05bbe94742

Other information:

OS: Windows 10
Node: v8.3.0
NPM: 5.4.2
Yarn: 1.1.0

[Cazs03]

Same for me
[ts] An interface may only extend a class or another interface.

[Bjeaurn]

I think a related issue can be found in #455

[brannon-darby]

this appears to have surfaced after the addition of support for using string or number for id:

https://github.com/ngrx/platform/commit/46d6f2fc35af8aef015561dbbfb9da05bbe94742

I fixed my own project by simply including ids and entities in my State interface instead of extending EntityState:

export interface State {
  ids: any[]
  entities: {}
  selectedId: any
  count: number
}

@brandonroberts - is this the right approach, or is there a cleaner solution you might be able to offer?

[brandonroberts]

@brannon-darby that would suffice for now. There is already a PR that will fix this issue

[sanbornsen]

@brannon-darby @brandonroberts This PR - https://github.com/ngrx/platform/pull/457 should fix it.

[brandonroberts]

Fixed via #454