include metadatafiles to make aot compatiable. #1004

ammar91 · 2016-10-03T00:03:58Z

I'm able to successfully produce metadata files for primeng by following the below steps.

https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad#.mtna6ixy8

I did make several changes along the way by looking at the error messages during compilation. Those are very minor and quick fixes which are mentioned here (
https://medium.com/@isaacplmann/making-your-angular-2-library-statically-analyzable-for-aot-e1c6f3ebedd5#.nq9gqm4o2), specifically the 3rd one.

However, there were two major changes

Remove typings.json in favor of typescript 2.0, new way of defining type declaration files
https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files/
Update webpack to webpack2 beta
This is because uglifyjs plugin break with webpack1, and after upgrading to webpack2, content now being serve from http://localhost:8080 instead of http://localhost:880/webpack-dev-server
But this should be configurable, just didn't get a chance to look into this one.
Isolate the App Module and Entry file (Application.ts), otherwise webpack complain about Module error described here A dependency to an entry point is not allowed in multiple page app webpack/webpack#2894

Please let me know if anything else needed, I would be happy to assist further.

adrienverge · 2016-10-05T16:29:27Z

@ammar91 Nice work!

I think you aren't supposed to source the *.metadata.json files in git, it's a lot of noise. They only need to be included in the generated npm package.

Have you managed to produce a build that can be used as a dependency in an Angular project, and successfully compile with ngc? (I couldn't)

ammar91 · 2016-10-05T18:15:17Z

@adrienverge Thanks.

Yes, I'm successfully able to compile my Angular project by having PNG as dependency (with the Pull Request I made).

What errors you are having when you run ngc?

adrienverge · 2016-10-05T19:15:06Z

When I clone your branch into my project's node_modules/primeng, I get the same error as with regular PrimeNG:

Error: Unexpected value 'CalendarModule' imported by the module 'AppModule'
    at myproject/node_modules/@angular/compiler/bundles/compiler.umd.js:14109:37

(Angular 2.0.1)

ammar91 · 2016-10-05T19:46:04Z

Are you sure you checked out the 'ato' branch instead of master?

adrienverge · 2016-10-05T19:49:11Z

Of course :)

tree node_modules/primeng/components

node_modules/primeng/components
├── accordion
│   ├── accordion.css
│   ├── accordion.d.ts
│   ├── accordion.js
│   ├── accordion.js.map
│   ├── accordion.metadata.json
│   └── accordion.ts
├── autocomplete
│   ├── autocomplete.metadata.json
│   └── ...
├── breadcrumb
│   ├── breadcrumb.metadata.json
│   └── ...
├── button
│   ├── button.metadata.json
│   └── ...
├── calendar
│   ├── calendar.metadata.json
│   └── ...
├── carousel
│   ├── carousel.metadata.json
│   └── ...
...

I just git cloned your branch into node_modules/primeng. Is there any pre-compilation needed? (By the way running npm run ngc in the PrimeNG dir fails with missing Cannot find module 'angular2/core' errors.)

ammar91 · 2016-10-05T19:51:04Z

Does it have primeng.metadata.json next to primeng.d.ts?

node_modules/primeng/primeng.metadata.json

adrienverge · 2016-10-05T19:56:23Z

Does it have primeng.metadata.json next to primeng.d.ts?

Yes...

By the way, running npm run ngc in the PrimeNG dir fails with Cannot find module 'angular2/core' errors.

ammar91 · 2016-10-05T20:00:20Z

Can you paste your tsconfig.json here?

adrienverge · 2016-10-05T20:08:46Z

Sure, it's

{
  "compilerOptions": {
    "target": "ES5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": true,
    "noImplicitReturns": true
  },
  "files": [
    "src/app/app.module.ts",
    "src/app/main.ts",
    "typings/browser.d.ts"
  ],
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit" : true
  }
}

Do you have any plunker / demo / open-source project using your ato branch? I could try to start from there.

ammar91 · 2016-10-05T23:47:26Z

@adrienverge I created one https://github.com/ammar91/aot-primeng/tree/master
Hope that Helps!

adrienverge · 2016-10-06T07:17:46Z

@ammar91 Thanks!!

Unfortunately this proof of concept still doesn't work for me (same error) with tsc 2.0.3 and Angular 2.0.1. I'm opening an issue on your aot-primeng repo so we can continue debugging there: ammar91/aot-primeng#1.

adrienverge · 2016-10-06T14:25:12Z

Hey, here is some feedback:

your aot-primeng prototype now works for me 👍;
when I copy its primeng-aot-build/primeng into my project's node_modules/, my project can compile with ngc;
when I copy your PrimeNG branch (this pull request) to my project's node_modules/, I get the same error as described previously.

Is there any pre-compilation needed?

ammar91 · 2016-10-06T14:52:50Z

@adrienverge Thanks for your feedback.

Is there any pre-compilation needed?

Yes, that is because when you clone the branch it doesn't contain compiled js files. That is only available in the generated npm package.
So after cloning the branch (this pull request), you should have to run npm run tsc, that would give errors like Cannot find module 'angular2/core but .ts files should be compiled at this point. And after that when you run ngc, there won't be any errors.

adrienverge · 2016-10-06T15:16:45Z

I'm sorry but this still doesn't work, although *.js and *.metadata.json files are present in node_modules/primeng.

It would be good to have clear instructions on how you proceed to get it working. For instance, the following instructions fail at several points:

git -C /tmp clone https://github.com/ammar91/aot-primeng.git
cd /tmp/aot-primeng
npm install
rm -rf node_modules/primeng
cd node_modules
git clone -b ato https://github.com/ammar91/primeng.git
cd primeng
npm install
npm run tsc
# fails because of missing 'moment' definition files
npm i moment
npm run tsc
# fails because of missing '../compiled/showcase/app.module.ngfactory'
npm run ngc
npm run tsc
cd ../..
ngc -p ./tsconfig.aot.json
# Error: Unexpected value 'DialogModule' imported by the module 'AppModule'

ammar91 · 2016-10-06T15:46:01Z

This works for me without any errors.

git clone https://github.com/ammar91/aot-primeng.git
cd aot-primeng
npm install
rm -rf node_modules/primeng
cd node_modules
git clone -b ato https://github.com/ammar91/primeng.git
cd primeng
npm run tsc (ignore the errors)
cd ../..
npm run ngc

CelsoSantos · 2016-10-10T18:01:54Z

What is the status on this? Any help needed?

I'm in dire need of this feature but I'd rather have it when beta18 does come out..

cagataycivici · 2016-10-15T17:00:59Z

We'll add AOT support in 1.0.0-RC1 (end of october)

ammar91 · 2016-10-15T17:37:15Z

Oops, a little disappointed to know this pull request has been closed without merge. Wasn't that helpful?

cagataycivici · 2016-10-25T21:30:52Z

I don't think metadata.json files should be under version control, shouldn't we generate them before publishing the npm package instead?

cagataycivici · 2016-10-25T21:56:17Z

Let's discuss at 871

kunshao-msft · 2016-11-01T22:25:43Z

@cagataycivici curious what the status o 1.0.0-RC1 is, I really need AOT compilation support for my project

include metadatafiles to make aot compatiable.

cb8c5d7

ammar91 mentioned this pull request Oct 3, 2016

AOT support #871

Closed

cagataycivici added the Status: Pending Review Issue or pull request is being reviewed by Core Team label Oct 4, 2016

cagataycivici added this to the 1.0.0-beta.18 milestone Oct 4, 2016

adrienverge mentioned this pull request Oct 5, 2016

Unable to compile the project: Unexpected value 'ButtonModule' imported by the module 'AppModule' #1007

Closed

adrienverge mentioned this pull request Oct 6, 2016

Unexpected value 'DialogModule' imported by the module 'AppModule' ammar91/aot-primeng#1

Closed

cagataycivici closed this Oct 15, 2016

cagataycivici removed this from the 1.0.0-beta.18 milestone Oct 15, 2016

jmesa-sistel mentioned this pull request Oct 19, 2016

Can we have an AOT compatibility beta soon? #1081

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

include metadatafiles to make aot compatiable. #1004

include metadatafiles to make aot compatiable. #1004

ammar91 commented Oct 3, 2016

adrienverge commented Oct 5, 2016

ammar91 commented Oct 5, 2016 •

edited

Loading

adrienverge commented Oct 5, 2016

ammar91 commented Oct 5, 2016

adrienverge commented Oct 5, 2016 •

edited

Loading

ammar91 commented Oct 5, 2016 •

edited

Loading

adrienverge commented Oct 5, 2016

ammar91 commented Oct 5, 2016

adrienverge commented Oct 5, 2016

ammar91 commented Oct 5, 2016

adrienverge commented Oct 6, 2016 •

edited

Loading

adrienverge commented Oct 6, 2016

ammar91 commented Oct 6, 2016

adrienverge commented Oct 6, 2016

ammar91 commented Oct 6, 2016 •

edited

Loading

CelsoSantos commented Oct 10, 2016

cagataycivici commented Oct 15, 2016

ammar91 commented Oct 15, 2016

cagataycivici commented Oct 25, 2016

cagataycivici commented Oct 25, 2016

kunshao-msft commented Nov 1, 2016

include metadatafiles to make aot compatiable. #1004

include metadatafiles to make aot compatiable. #1004

Conversation

ammar91 commented Oct 3, 2016

adrienverge commented Oct 5, 2016

ammar91 commented Oct 5, 2016 • edited Loading

adrienverge commented Oct 5, 2016

ammar91 commented Oct 5, 2016

adrienverge commented Oct 5, 2016 • edited Loading

ammar91 commented Oct 5, 2016 • edited Loading

adrienverge commented Oct 5, 2016

ammar91 commented Oct 5, 2016

adrienverge commented Oct 5, 2016

ammar91 commented Oct 5, 2016

adrienverge commented Oct 6, 2016 • edited Loading

adrienverge commented Oct 6, 2016

ammar91 commented Oct 6, 2016

adrienverge commented Oct 6, 2016

ammar91 commented Oct 6, 2016 • edited Loading

CelsoSantos commented Oct 10, 2016

cagataycivici commented Oct 15, 2016

ammar91 commented Oct 15, 2016

cagataycivici commented Oct 25, 2016

cagataycivici commented Oct 25, 2016

kunshao-msft commented Nov 1, 2016

ammar91 commented Oct 5, 2016 •

edited

Loading

adrienverge commented Oct 5, 2016 •

edited

Loading

ammar91 commented Oct 5, 2016 •

edited

Loading

adrienverge commented Oct 6, 2016 •

edited

Loading

ammar91 commented Oct 6, 2016 •

edited

Loading