/lib and /lib-esm included in build

[christopherthielen]

From @dcarabott on January 15, 2018 10:32

After upgrading to ng5 and using @uirouter/[email protected] and @uirouter/[email protected] the build ends up including both lib and lib-esm. Bundle was inspected using source-map-explorer.

Build process:

We're using rollup with the following config:

const config = {
  input:'dist/tmp/app/main-prod',
  sourcemap: true,
  treeshake: true,
  name: 'main',
  plugins: [
    includePaths({
      paths: ['dist/tmp/app'],
      extensions: ['.js', '.json', '.html', '.ts']
    }),
    nodeResolve({
      jsnext: true,
      main: true,
      module: true
    }),
    commonjs({
      include: 'node_modules/**'
    })
  ]
}

export = (done: any) => {
  rollup
    .rollup(config)
    .then((bundle: any) =>
      bundle.generate({
        format: 'iife'
      })
    )
    .then((result: any) => {
      const path ='dist/tmp/bundle.js';
       parallel(getTasks(path, result), (error: any, results: boolean[]) => {
          if (error && results.indexOf(false) === -1) {
            console.error(error);
            process.exit(0);
          }
          done();
        });
    })
    .catch((error: any) => {
      console.error(error);
      process.exit(0);
    });
};

function getTasks(path: string, result: any): any[] {
  const tasks = [
    (callback: any) =>
      writeFile(path, result.code,
        (error: any) => callback(null, !error)
      )
  ];
  return tasks;
}

main.prod.ts

import { enableProdMode } from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';

import { AppModuleNgFactory } from './app.module.ngfactory';

enableProdMode();

Previously we were using @uirouter/[email protected] and [email protected] and this issue was not observed.

The build process didn't change.

We recreated the issue on a simple POC with one parent state, a child state and a sticky state. Nothing fancy. When importing we always import using @uirouter/angular

Let me know if you would need a POC project since I can't replicate the issue on plunker.

Copied from original issue: ui-router/core#113

[christopherthielen]

@dcarabott can you please link to the POC project

[christopherthielen]

@dcarabott ping?

[dcarabott]

@christopherthielen We were working on a huge angular-seed as a POC (using SystemJS and Rollup) and that's where the lib/lib-esm UIRouter Core issue was observed.

I've created another smaller POC using the same SystemJS and Rollup just to demonstrate this issue. I could not replicate it on this POC. So my assumption is that is has something to do with how the first POC is setup.

I'm going to provide as much detail as possible for completeness sake.

Huge angular-seed POC where issue was observed

https://github.com/dcarabott/angular-seed-ui-router-poc

This POC is using the mgechev/angular-seed angular seed.

Steps to reproduce:

npm i
npm run build.prod.rollup.aot
cd dist/prod/js
source-map-explorer app.js

This seed makes use of a number of tools/tasks and we're mostly interested in the build.bundles.app.rollup.aot task where the rollup configuration is. This task can be found in tools/tasks/seed/build.bundles.app.rollup.aot.ts.

The SystemJS config can be found in tools/config/seed.config.ts line 561.

Simple POC where issue is not observed

https://github.com/dcarabott/ng-5-ui-router-poc

This POC is using the matthias-schuetz/angular2-seed angular seed.

Steps to reproduce

npm i
gulp build:prod
cd dist/src
source-map-explorer app.min.js

Rollup config: aot-rollup-config.js
SystemJS config: app/system.conf.js
Gulp config: gulpfile.js

This POC is building just lib-esm for UIRouter Core and lib for UIRouter Angular.

[christopherthielen]

small update, I've determined that ngc is using deep imports such as:

./src/app/welcome.component.ngfactory.js:import * as i1 from "@uirouter/angular/lib/directives/uiSref";
./src/app/welcome.component.ngfactory.js:import * as i2 from "@uirouter/core/lib/router";

Maybe this is the problem? Perhaps there is some way to structure the ui-router libs' package.jsons so ngc doesn't do this?

[christopherthielen]

[christopherthielen]

[christopherthielen]

I've created a minimal reproduction of this scenario: https://github.com/christopherthielen/bundled-lib-esm-and-lib

Basically, a pure JS library exports a symbol. Then an angular library uses that symbol as a DI token. The DI token is imported as a deep import vanillajslibrary/lib/vanillaJsClass.js. However, the user code does import { VanillaJSClass } from 'vanillajslibrary'. This causes both the UMD bundle and the deep import to get included in the end user application.

[christopherthielen]

I'm punting on further analysis. I'm adding an index.metadata.json file to @uirouter/core which will tell angular compiler to always import from @uirouter/core instead of deeply importing symbols. This is pretty hacky, but solves the problem. I'm not happy about introducing any framework logic into core, but according to Rob Wormald, Angular 7+ will no longer depend on this style of code gen, and the problem should go away then.

[christopherthielen]

My assumption is that Angular will support the v3 metadata file for the next few versions, then this will be a non-issue after version 7+. If the metadata file format gets revised for angular v6-7, then we can re-generate and statically commit it the metadata file in @uirouter/core.

[christopherthielen]

We're removing the index.metadata.json file from ui-router core, I don't think it's necessary anymore.

[nvioli]

Removing this file seems to have broken our (very outdated) app. We recently started receiving this error at runtime:

Module not found: Error: Can't resolve '@uirouter/core' in '/usr/src/app/node_modules/@uirouter/angularjs/lib-esm'

Appears to be fixed by manually pinning the peer dependency in package.json:

"@uirouter/core": "~6.0.9",