Example app - Angular2 - Angular-Cli

[maxime1992]

I know this might not be the kind of issue you're expecting.

But if someone manage to build an angular2 app built with angular-cli, that'd be awesome and I'd be glad to ear about it !

Cheers

[alexeagle]

I don't think we need the angular-cli involved but I am planning to use splittable on my Angular-closure compiler example this week.

[cramforce]

Let me know how that goes!

On Sun, Feb 5, 2017 at 5:47 PM, Alex Eagle [email protected] wrote:

I don't think we need the angular-cli involved but I am planning to use splittable on my Angular-closure compiler example this week.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/cramforce/splittable/issues/23#issuecomment-277569082, or mute the thread https://github.com/notifications/unsubscribe-auth/AAFeTwLn92I52OFkHkkWnE1HPdBNDdYbks5rZnu4gaJpZM4K8O3v .

[alexeagle]

First issue: Angular's closure-friendly ES6 distro uses ES modules, currently fails to produce the module deps graph:

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (8:0)
    at Parser.pp$4.raise (/Users/alexeagle/Projects/closure-compiler-angular-bundling/node_modules/detective/node_modules/acorn/dist/acorn.js:2221:15)

I think we need module-deps to run detective with some config options (or use precinct which seems to be a multi-detective wrapper?)

[cramforce]

Is this a splittable invocation? Any way for me to reproduce?

[alexeagle]

yes:

$ git clone [email protected]:alexeagle/closure-compiler-angular-bundling.git
$ git checkout splittable
$ npm install && npm run build
$ ./node_modules/.bin/splittable built/bootstrap.js
Compilation failed:  Parsing file /Users/alexeagle/Projects/closure-compiler-angular-bundling/node_modules/@angular/core/src/zone/ng_zone.js: 'import' and 'export' may appear only with 'sourceType: module' (8:0)

[alexeagle]

I can workaround by locally modifying module-deps:

https://github.com/substack/module-deps/blob/3b240bb25cf0229558b4c9d0395c2c3e3555376a/index.js#L451

It calls detective with no second argument (the opts). Workaround is: detective(src, {parse: {sourceType: 'module'}})

I'm not sure if this is a bug in module-deps. For now I'll try getting further.

[alexeagle]

Next problem: the graph produced by splittable.js#getGraph is incomplete. It does not seem to walk transitive imports - only ESModules directly imported by sources in the app are included in the graph.

Here's a smaller repro:

yarn init
yarn add splittable angular/platform-browser-builds#master-es2015
cat > bootstrap.js
import { platformBrowser } from '@angular/platform-browser/index';
./node_modules/.bin/splittable bootstrap.js


Compilation failed:  Closure compiler compilation of bundles failed.

java -jar /Users/alexeagle/node_modules/splittable/third_party/closure-compiler/closure-compiler-1.0-SNAPSHOT.jar --apply_input_source_maps true --compilation_level ADVANCED --create_source_map %outname%.map --externs /Users/alexeagle/node_modules/splittable/splittable.extern.js --jscomp_off accessControls --jscomp_off globalThis --jscomp_off misplacedTypeAnnotation --jscomp_off nonStandardJsDocs --jscomp_off suspiciousCode --jscomp_off uselessCode --language_in ES6 --language_out ES5 --module_output_path_prefix out/ --new_type_inf true --parse_inline_source_maps true --process_common_js_modules true --rewrite_polyfills true --source_map_location_mapping splittable-build/transformed/|/ --source_map_location_mapping splittable-build/browser/|/ --source_map_location_mapping |/ --js node_modules/@angular/platform-browser/package.json --js node_modules/splittable/base.js --js node_modules/@angular/platform-browser/index.js --js ./splittable-build/transformed/bootstrap.js --module bootstrap:4 --module_wrapper bootstrap:self.global=self;%s
//# sourceMappingURL=%basename%.map
 --js_module_root ./splittable-build/transformed/ --js_module_root ./splittable-build/browser/ --js_module_root ./

WARNING - Failed to load module "./src/platform-browser.js"

WARNING - Failed to load module "@angular/platform-browser/index.js"

./splittable-build/transformed/bootstrap.js:1: ERROR - required "module$$angular$platform_browser$index" namespace never provided
import { platformBrowser } from '@angular/platform-browser/index';
^

node_modules/@angular/platform-browser/index.js:13: ERROR - required "module$node_modules$$angular$platform_browser$src$platform_browser" namespace never provided
export { BrowserModule, platformBrowser, Meta, Title, disableDebugTools, enableDebugTools, AnimationDriver, By, NgProbeToken, DOCUMENT, EVENT_MANAGER_PLUGINS, EventManager, HAMMER_GESTURE_CONFIG, HammerGestureConfig, DomSanitizer, VERSION, __platform_browser_private__ } from './src/platform-browser';
^

2 error(s), 2 warning(s)

Looking in the graph, I see

{
  "entryModules": [
    "built/bootstrap.js"
  ],
  "depOf": {
    "built/bootstrap.js": {
      "built/bootstrap.js": true,
      "node_modules/@angular/platform-browser/index.js": true
    }
  },
  "deps": {
    "node_modules/@angular/platform-browser/index.js": [],
    "built/bootstrap.js": [
      "node_modules/@angular/platform-browser/index.js"
    ]
  },
  "sorted": [
    "node_modules/@angular/platform-browser/index.js",
    "built/bootstrap.js"
  ],
  "bundles": {
    "built/bootstrap.js": {
      "isBase": false,
      "name": "built/bootstrap.js",
      "modules": [
        "node_modules/@angular/platform-browser/index.js",
        "built/bootstrap.js"
      ]
    }
  },
  "packages": {
    "node_modules/@angular/platform-browser/package.json": true
  },
  "transformed": {
    "built/bootstrap.js": "./splittable-build/transformed/built/bootstrap.js"
  },
  "browserMask": {}
}

Clearly the files referenced by node_modules/@angular/platform-browser/index.js need to be included in the graph. That file contains: export { BrowserModule, platformBrowser, Meta, Title, disableDebugTools, enableDebugTools, AnimationDriver, By, NgProbeToken, DOCUMENT, EVENT_MANAGER_PLUGINS, EventManager, HAMMER_GESTURE_CONFIG, HammerGestureConfig, DomSanitizer, VERSION, __platform_browser_private__ } from './src/platform-browser';

[cramforce]

I'll try to take a look on Sunday or Monday!

On Feb 17, 2017 5:12 PM, "Alex Eagle" [email protected] wrote:

Next problem: the graph produced by splittable.js#getGraph is incomplete. It does not seem to walk transitive imports - only ESModules directly imported by sources in the app are included in the graph.

Here's a smaller repro:

yarn init yarn add splittable angular/platform-browser-builds#master-es2015 cat > bootstrap.js import { platformBrowser } from '@angular/platform-browser/index'; ./node_modules/.bin/splittable bootstrap.js

Compilation failed: Closure compiler compilation of bundles failed.

java -jar /Users/alexeagle/node_modules/splittable/third_party/closure-compiler/closure-compiler-1.0-SNAPSHOT.jar --apply_input_source_maps true --compilation_level ADVANCED --create_source_map %outname%.map --externs /Users/alexeagle/node_modules/splittable/splittable.extern.js --jscomp_off accessControls --jscomp_off globalThis --jscomp_off misplacedTypeAnnotation --jscomp_off nonStandardJsDocs --jscomp_off suspiciousCode --jscomp_off uselessCode --language_in ES6 --language_out ES5 --module_output_path_prefix out/ --new_type_inf true --parse_inline_source_maps true --process_common_js_modules true --rewrite_polyfills true --source_map_location_mapping splittable-build/transformed/|/ --source_map_location_mapping splittable-build/browser/|/ --source_map_location_mapping |/ --js node_modules/@angular/platform-browser/package.json --js node_modules/splittable/base.js --js node_modules/@angular/platform-browser/index.js --js ./splittable-build/transformed/bootstrap.js --module bootstrap:4 --module_wrapper bootstrap:self.global=self;%s //# sourceMappingURL=%basename%.map --js_module_root ./splittable-build/transformed/ --js_module_root ./splittable-build/browser/ --js_module_root ./

WARNING - Failed to load module "./src/platform-browser.js"

WARNING - Failed to load module "@angular/platform-browser/index.js"

./splittable-build/transformed/bootstrap.js:1: ERROR - required "module$$angular$platform_browser$index" namespace never provided import { platformBrowser } from '@angular/platform-browser/index'; ^

node_modules/@angular/platform-browser/index.js:13: ERROR - required "module$node_modules$$angular$platform_browser$src$platform_browser" namespace never provided export { BrowserModule, platformBrowser, Meta, Title, disableDebugTools, enableDebugTools, AnimationDriver, By, NgProbeToken, DOCUMENT, EVENT_MANAGER_PLUGINS, EventManager, HAMMER_GESTURE_CONFIG, HammerGestureConfig, DomSanitizer, VERSION, platform_browser_private } from './src/platform-browser'; ^

2 error(s), 2 warning(s)

Looking in the graph, I see

{ "entryModules": [ "built/bootstrap.js" ], "depOf": { "built/bootstrap.js": { "built/bootstrap.js": true, "node_modules/@angular/platform-browser/index.js": true } }, "deps": { "node_modules/@angular/platform-browser/index.js": [], "built/bootstrap.js": [ "node_modules/@angular/platform-browser/index.js" ] }, "sorted": [ "node_modules/@angular/platform-browser/index.js", "built/bootstrap.js" ], "bundles": { "built/bootstrap.js": { "isBase": false, "name": "built/bootstrap.js", "modules": [ "node_modules/@angular/platform-browser/index.js", "built/bootstrap.js" ] } }, "packages": { "node_modules/@angular/platform-browser/package.json": true }, "transformed": { "built/bootstrap.js": "./splittable-build/transformed/built/bootstrap.js" }, "browserMask": {} }

Clearly the files referenced by node_modules/@angular/ platform-browser/index.js need to be included in the graph. That file contains: export { BrowserModule, platformBrowser, Meta, Title, disableDebugTools, enableDebugTools, AnimationDriver, By, NgProbeToken, DOCUMENT, EVENT_MANAGER_PLUGINS, EventManager, HAMMER_GESTURE_CONFIG, HammerGestureConfig, DomSanitizer, VERSION, platform_browser_private } from './src/platform-browser';

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/cramforce/splittable/issues/23#issuecomment-280808307, or mute the thread https://github.com/notifications/unsubscribe-auth/AAFeT07jf61BcfJF1elBj5fKSM_2Nvs8ks5rdkV8gaJpZM4K8O3v .

[cramforce]

I made some significant progress in #47

The reason for the incomplete graph was that babel did not run on node_modules.

This now triggers a bunch of follow up errors. I might need to upgrade closure compiler to have a chance at fixing that. I've been putting this off for a while. They fixed the npm module resolve algorithm, but that will require a lot of work in splittable to adapt.

[alexeagle]

Note, @mlaval got Angular + Closure + lazy-loading working by hacking some bits from splittable: https://github.com/mlaval/optimize-angular-app/commit/9a1158392d30dcfd8e59cc344e2ae03474babb09 so we know it's possible. Just need to make the dev tooling easy enough for most ppl to be able to set it up.