Covalent: AOT Webpack build fail: Properties are private

[jt-helsinki]

This repository's issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?

Bug

Bug Report

When trying to execute AOT compilation using webpack a number of files won't compile as properties are marked as private: Errors such as the following are received:

Error in bail mode: [at-loader] compiled/node_modules/@covalent/core/data-table/data-table.component.ngfactory.ts:200:48
TS2341: Property '_templates' is private and only accessible within class 'TdDataTableComponent'.

This happens on the @ViewChild() and @ContentChildren() properties so to fix the problem, the following properties need to be marked as public:

_templates in core/file/file-input/data-table.component.ts. (line 72)
_inputElement in in core/file/file-input/file-input.component.ts (line 52)
_drawerMenu in core/layout/navigation-drawer/navigation-drawer.component.ts (line 35)
_searchInput in core/search/search-box/search-box.component (line 28)
_input in core/search/search-input/search-input.component (line 28)
_content in core/steps/step.component (line 54)

To build my project, I am using the Webpack scripts found here:

https://github.com/AngularClass/angular2-webpack-starter

Screenshots or link to CodePen/Plunker/JSfiddle

N/A

What is the expected behavior?

N/A

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

N/A

Which version of Angular and Material, and which browser and OS does this issue affect?

Versions from package.json:

angular: 2.4.7
covalent/core: ^1.0.0-beta.2

Other information

(e.g. detailed explanation, stacktraces, related issues, suggestions how to fix)

have not tested the optional or external component libraries.

[jt-helsinki]

If this needs to be replicated, I would say the easiest thing to do would be to clone the Angular Class starter and go from there.

@emoralesb05 It's a pretty simple fix so do you want me to do a PR of what I have?

[emoralesb05]

The fix is simple, but i want to be able to replicate it and understand why ours does not complain so it does not happen again.

Need to check the difference between builds and all that.

Thanks though 😄, a PR would be much appreciated once we understand that.

[CaerusKaru]

Has there been any movement on this? The angular-cli tool no longer masks AoT errors, so building a project with the cli and any Covalent components is currently broken. Repro would probably be possible simply by building any app with any component (on my end this includes Expansion Panels and Stepper).

[emoralesb05]

Yep, now with angular 1.0.0 i got them too. Gonna create a PR to fix all those errors + a few others.

Edit: got other errors though, not the ones specified in this issue though.

[pdjota]

Hello @emoralesb05 what is the status of this issue?
I cloned the quickstart and tried to build --aot and got errors as mentioned by @CaerusKaru
Detailed errors:
https://gist.github.com/pdjota/785ab28655171b90ff126ee311202280

[emoralesb05]

@pdjota did you just clone the covalent-quickstart and tried aot? Trying to see how to replicate this so its fixed by beta.3

[emoralesb05]

Did a clean quickstart install, and it doesnt give me those aot errors.. still havent found a way to replicate this.

[jt-helsinki]

@emoralesb05 are you using Angular Class webpack build to test this? It's should be relicatable if you try to use the data-table.

[emoralesb05]

Let me try that one, im using our covalent-quickstart

[pdjota]

@emoralesb05 sorry, I created a brand new project with Angular Cli. It is not a clone of covalent-quickstart

[emoralesb05]

Ah! awesome, let me try that too. Trying to get this fixed asap.

[emoralesb05]

@pdjota the issue you have is already fixed by https://github.com/Teradata/covalent/pull/448

@paistipoikka already replicated the issue, still not sure why it happens in that repo and not in covalent-quickstart, but ill start fixing them

[emoralesb05]

Ok, figured out why it doesnt happen with the CLI

https://github.com/angular/angular/issues/14739

Gonna have to use the Angular Class project to double check this kind of errors for now.

[pdjota]

@emoralesb05 how do I get that fix from develop?

1. I cloned the project
2. Run npm run build to generate the platform packages.
3. But when I do a local install I get errors like these:

ERROR in Error encountered resolving symbol values statically. Could not resolve @angular/animations relative to /Users/pdejuan/projects/sampleapp/frontend/node_modules/@covalent/core/common/animations/collapse/collapse.animation.d.ts., resolving symbol TdCollapseAnimation in /Users/pdejuan/projects/sampleapp/frontend/node_modules/@covalent/core/common/animations/collapse/collapse.animation.d.ts, resolving symbol TdCollapseAnimation in /Users/pdejuan/projects/sampleapp/frontend/node_modules/@covalent/core/common/animations/collapse/collapse.animation.d.ts, resolving symbol TdExpansionPanelComponent in /Users/pdejuan/projects/sampleapp/frontend/node_modules/@covalent/core/expansion-panel/expansion-panel.component.d.ts, resolving symbol TdExpansionPanelComponent in /Users/pdejuan/projects/sampleapp/frontend/node_modules/@covalent/core/expansion-panel/expansion-panel.component.d.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/pdejuan/projects/sampleapp/frontend/src'

[emoralesb05]

Normally you can get it if you point to https://github.com/Teradata/covalent-nightly but the tests arent passing since we need material to release their latest.

[pdjota]

I downgraded the Angular Cli to "@angular/cli": "1.0.0-rc.4" to get by until that is released.

[emoralesb05]

fixed with https://github.com/Teradata/covalent/pull/454