AoT is compiling #209

isaacplmann · 2016-09-29T13:15:00Z

I have the library compiling with AoT, but I don't understand how the gulp build process works and the *.metadata.json files are all being generated in the src folder instead of the dist folder. Could you tell me what to change to create those files in the correct place?

So, almost a fix for #206, probably hasn't fixed #207 yet.

shlomiassaf · 2016-09-29T18:44:47Z

@isaacplmann BIG 👍 💯

I appreciate it! I know I will faces lot's of issues soon due to AoT push from google in angular connect.

I'm a little swamped now, I will go over soon and let you know what is needed.

Also, once done can you squash to 1 commit and use angular commit style, this is needed for the changelog.

Thanks!!!

isaacplmann · 2016-09-29T18:53:29Z

I got this working and AoT compiling in my app, but without rollup.

This command makes a local tar.gz that I can install in my app.
npm run build && cp -r src/components/angular2-modal/* dist/ && node_modules/.bin/rimraf dist/**/*[!d].ts dist/*[!d].ts && cd dist && npm pack && cd ..

I'm manually copying the contents of src/components/angular-modal to dist and then deleting all the *.ts files (except the *.d.ts files) from dist.

So this does now fix #207 and #206, even though it breaks rollup.

Note: I also removed /../components from a lot of import paths, which I know I'll need to put back in to make the rollup process work.

shlomiassaf · 2016-09-29T19:37:54Z

src/components/angular2-modal/plugins/bootstrap/bootstrap.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';

-import { ModalModule, Modal as BaseModal } from '../../../../components/angular2-modal';
+import { ModalModule, Modal as BaseModal } from '../../../angular2-modal';


These references used to cause issue with SystemJS and other unpredicted stuff.
I changed them to a full reference and replace them before the build anyway, each is translated to angular2-modal

shlomiassaf · 2016-09-29T19:41:00Z

@isaacplmann Thanks.

I saw the /../components change. There is a process that replaces those to angular-2modal for actual production build since plugins are separate modules.

The rollup outputs UMD, this is important so we will need to sort this out.

There are a lot of files change so inspection will take time.

Can you change back the imports of component/angular2-modal back so I can review it as the final PR?

isaacplmann · 2016-09-29T20:05:43Z

Import paths have been switched back.

isaacplmann · 2016-09-29T20:07:00Z

FYI, I wrote down some of the things I learned making this PR in this article

shlomiassaf · 2016-09-29T21:13:21Z

src/components/angular2-modal/plugins/vex/presets/dialog-preset.ts

@@ -25,6 +25,7 @@ export class DialogPreset extends VEXModalContext {
  defaultResult: any;
  content: Type<any>;
  buttons: VEXButtonConfig[];
+  showInput: any;


What is it used for?

shlomiassaf · 2016-09-29T21:13:41Z

src/demo/app/bootstrap-demo/modal-customisation-wizard/modal-customisation-wizard.ts

@@ -43,6 +43,10 @@ export class ModalCustomisationWizard {
        fluent.open();
    }

+    public logForm(value: any) {


what is this used for?

shlomiassaf · 2016-09-29T21:14:14Z

src/components/angular2-modal/plugins/bootstrap/presets/message-modal-preset.ts

@@ -83,6 +83,7 @@ export interface MessageModalPreset extends BSModalContext {
  footerClass: string;

  buttons: BSMessageModalButtonConfig[];
+  showInput?: any;


what is this used for?

shlomiassaf · 2016-09-29T21:20:10Z

src/components/angular2-modal/components/css-backdrop.ts

@@ -20,6 +20,8 @@ import { BaseDynamicComponent } from './base-dynamic-component';
  template: ``
 })
 export class CSSBackdrop extends BaseDynamicComponent {
+  public cssClass: string;


What's the purpose of these?

shlomiassaf · 2016-09-29T21:39:48Z

@isaacplmann The TS command you changed is actually not related to the build process but to the UMD bundling process.

It runs after Rollup to make the UMD rollup from bundle an ES5 bundle, that's it.

I will reorder it to run in the right place, this requires programatic invocation of ngc, i'll see if it's possible.

shlomiassaf · 2016-09-29T22:08:38Z

@isaacplmann ok so now it's more clear, first i'll explain the build/bundle process:

The build process I use is split into 2:

TS to JS
TS to UMD bundle

(1) Has 2 outputs:
- CJS (ES5)
- ES6

Each output is managed by gulp, this allows better control. e.g: adding headers to the files, renaming imports etc...

(2) To create a UMD bundle I have 2 steps:
- Use the output of (1)ES6 to create an ES6 UMD bundle.
- Use TypeScript to transform the ES6 UMD bundle to ES5 UMD bundle.

AoT

There are 2 aspects for AoT compilation support

Support the modular CSJ and ES6 outputs.
Support UDM

I think that (2) does NOT require any action. I think that because I assume metadata.json files are treated as d.ts files by the compiler and as such they are auto imported by the compiler in their original form.
The current d.ts output is provided in the CJS output and automatically used by the compiler/IDE even if UMD bundle is used as main in package.json.

What to do:

So having that in mind we need to programatically run ngc as part of the stream.
This means replacing this code with a ngc gulp plugin that using the compiler-cli programatically.

Once we do that the output directory will contain .metadata.json files

Also, a refactoring is needed, I need to remove the CJS(ES5) build and leave ES6 only since UMD is ES5. This means:

Remove CJS scripts
Set ES6 TS compilation to output d.ts
set main in package.json to refer to UMD bundle

This refactoring is a blocker since ES6 build does not output .d.ts

shlomiassaf · 2016-09-29T22:15:30Z

@isaacplmann I'll take it and let you know if it worked, i'll commit the change to this branch.

isaacplmann · 2016-09-30T13:26:56Z

I assume you figured out why I added public properties on some component classes, but I'll answer explicitly here anyway.

To use AoT, every property that is referenced in a template has to be explicitly declared as public in its component. So all those changes I made were explicitly declaring things that were already in the templates. Also, some private properties I changed to public because the template was using them.

Thanks for working on the build process - I think you'll figure that piece out faster than I could.

isaacplmann · 2016-09-30T17:22:14Z

Something like this might be what you need to use to replace the gulp-typescript plugin.

var exec = require('child_process').exec;

gulp.task('task', function (cb) {
  exec('ngc -p "<path to your tsconfig.json>"', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
  });
});

shlomiassaf · 2016-09-30T21:34:55Z

@isaacplmann that won't help, I need a keep the stream rolling i'll have to programatically wrap ngc with through or something...

isaacplmann · 2016-09-30T21:38:12Z

I came across gulp-exec today. That might do what you need.

On Sep 30, 2016 5:34 PM, "Shlomi Assaf" [email protected] wrote:

@isaacplmann https://github.com/isaacplmann that won't help, I need a
keep the stream rolling i'll have to programatically wrap ngc with through
or something...

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#209 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA0lQIr-LRg615h0J-omt7hYUzkUcDPsks5qvYCBgaJpZM4KJ-jM
.

shlomiassaf · 2016-09-30T21:46:34Z

I'll look into that, I'm not sure it will help though.

You need to understand the process, each file process by TS (or NGC) is not saved into a file rather passed as a memory stream to the next handler in line.
This can be a handler that adds a comment to the file (header), or something that changes the imports ('components/angular2-modal->angular2-modal`) etc...

Going to a shell/childProcess does not allow that, the shell will open a stream and close it, it cant pass the stream...

shlomiassaf · 2016-09-30T23:39:10Z

@isaacplmann ok, got this to work but webpack dev mode now get's angry, will fix that and post.

shlomiassaf · 2016-10-01T23:45:35Z

@isaacplmann well this has been a huge refactor :)

I had to move to webpack 2.0 due to code changes that required better compatibility with TS and rollup.

I also had to remove some build steps, add others and refactor the tsconfig setup.

This project has built in plugins which make things even harder, I need to change the imports from them... this is the ../../../components/angular2-modal import reference from each plugin.
For dev it should stay that way, for packaged prod no.

Now I have to add another step since metadata.json files also has import string literals...

Anyway, big changes, I will need to re-org and see what to do with the PR

shlomiassaf · 2016-10-02T00:06:19Z

Complete PR in #211

isaacplmann · 2016-10-03T19:50:35Z

Closed in favor of #211.

isaacplmann added 3 commits September 28, 2016 16:47

AoT is compiling

7d8fda9

Providers working in AoT

d15eb97

Tidying up

7a2a322

Compiling without gulp

99d9ad0

shlomiassaf reviewed Sep 29, 2016

View reviewed changes

Fixing import paths

8814dd1

shlomiassaf reviewed Sep 29, 2016

View reviewed changes

isaacplmann closed this Oct 3, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

AoT is compiling #209

AoT is compiling #209

isaacplmann commented Sep 29, 2016

shlomiassaf commented Sep 29, 2016

isaacplmann commented Sep 29, 2016 •

edited

Loading

shlomiassaf Sep 29, 2016

shlomiassaf commented Sep 29, 2016

isaacplmann commented Sep 29, 2016

isaacplmann commented Sep 29, 2016

shlomiassaf Sep 29, 2016

shlomiassaf Sep 29, 2016

shlomiassaf Sep 29, 2016

shlomiassaf Sep 29, 2016

shlomiassaf commented Sep 29, 2016

shlomiassaf commented Sep 29, 2016 •

edited

Loading

shlomiassaf commented Sep 29, 2016

isaacplmann commented Sep 30, 2016

isaacplmann commented Sep 30, 2016

shlomiassaf commented Sep 30, 2016

isaacplmann commented Sep 30, 2016

shlomiassaf commented Sep 30, 2016

shlomiassaf commented Sep 30, 2016

shlomiassaf commented Oct 1, 2016

shlomiassaf commented Oct 2, 2016

isaacplmann commented Oct 3, 2016

AoT is compiling #209

AoT is compiling #209

Conversation

isaacplmann commented Sep 29, 2016

shlomiassaf commented Sep 29, 2016

isaacplmann commented Sep 29, 2016 • edited Loading

shlomiassaf Sep 29, 2016

Choose a reason for hiding this comment

shlomiassaf commented Sep 29, 2016

isaacplmann commented Sep 29, 2016

isaacplmann commented Sep 29, 2016

shlomiassaf Sep 29, 2016

Choose a reason for hiding this comment

shlomiassaf Sep 29, 2016

Choose a reason for hiding this comment

shlomiassaf Sep 29, 2016

Choose a reason for hiding this comment

shlomiassaf Sep 29, 2016

Choose a reason for hiding this comment

shlomiassaf commented Sep 29, 2016

shlomiassaf commented Sep 29, 2016 • edited Loading

AoT

What to do:

shlomiassaf commented Sep 29, 2016

isaacplmann commented Sep 30, 2016

isaacplmann commented Sep 30, 2016

shlomiassaf commented Sep 30, 2016

isaacplmann commented Sep 30, 2016

shlomiassaf commented Sep 30, 2016

shlomiassaf commented Sep 30, 2016

shlomiassaf commented Oct 1, 2016

shlomiassaf commented Oct 2, 2016

isaacplmann commented Oct 3, 2016

isaacplmann commented Sep 29, 2016 •

edited

Loading

shlomiassaf commented Sep 29, 2016 •

edited

Loading