0

I have a problem to setup an angular4 project using angular libraries as external dependencies.

The idea is a bit "oldschool" Create a "vendor.bundle.js" file including all angular libraries. @angular/core, @angular/common, etc. Use this as a global script in a customer portal with many SPAs, like the old angular.min.js.

Now, every application should use these libs. That means for each single app, do not include them in the bundle, but declare them as externals.

So i created project A, which is the "library project". I basically setup a vendor.ts file, which imports all the required angular libs.

import '@angular/core';
import '@angular/common';
...

I use standart ts compiler and webpack settings for compliation and bundling to get a vendor.lib.js out of it. Now, in project B, i would like to use it, but it does not work as expected.

To avoid errors from my side while bundling A, I put together the relevant umd modules from unpkg cdn and don't use my lib in the first place. So basically, i have an index.html that includes:

<script src="https://unpkg.com/core-js@2.4.0/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.20/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.12/Reflect.js"></script>
<script src="https://unpkg.com/rxjs@5.5.6/bundles/Rx.js"></script>

<script src="https://unpkg.com/@angular/core@4.0.0/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/common@4.0.0/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/compiler@4.0.0/bundles/compiler.umd.js"></script>

<script src="https://unpkg.com/@angular/platform-browser@4.0.0/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser-dynamic@4.0.0/bundles/platform-browser-dynamic.umd.js"></script>
<script src="https://unpkg.com/@angular/forms@4.0.0/bundles/forms.umd.js"></script>

<script src="https://unpkg.com/@angular/http@4.0.0/bundles/http.umd.js"></script>
<script src="https://unpkg.com/@angular/router@4.0.0/bundles/router.umd.js"></script>
<script src="https://unpkg.com/@ngx-translate/core@9.1.1/bundles/core.umd.js"></script>

And a matching webpack config, externals section like:

[
  {
        'core-js': 'core',
        'reflect-metadata': 'Reflect',
        'zone.js/dist/zone': 'Zone',
        'zone.js/dist/long-stack-trace-zone': 'Zone',
        '@ngx-translate': '@ngx-translate',
        '@angular/core': 'ng.core',
        '@angular/http': 'ng.http',
        '@angular/common': 'ng.common',
        '@angular/platform-browser': 'ng.platformBrowser',
        '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
        '@angular/compiler': 'ng.compiler',
        '@angular/router': 'ng.router',
        '@angular/forms': 'ng.forms'
    }
]

That works fine, because i am using the umd versions, which means ng is a property on the window scope.

With my own bundle A, no luck. core-js and reflect-metadata are all present. Everything @angular is basically undefined and there is no ng on the window.

I tried also to get the externals via: 

'@angular/core': {
    root: ['ng', 'core'],
    amd: '@angular/core',
    commonjs: '@angular/core'
}

Which should cover all use cases, but still core seems to be undefined.

So my question is: What would be the best or most common way to implement the library A and include it as external in B. Am I missing something, has anybody done a similar approach that is actually working?

p.s. I know that is not a typical use case and you cannot do treeshaking etc., but there is no other option as the 'vendor.lib' is a mandatory requirement. Besides, there are reasons why this approach makes sense, e.g. the CDN idea.

p.p.s This should not be so hard imho, it used to be one ....

PaaD
  • 113
  • 6
  • 1
    Why would you want to do this? Like, what problem are you trying to solve? – Roddy of the Frozen Peas Jan 31 '18 at 21:54
  • It is more a 'have to' than a 'want to', honestly. The responsible persons want to stay in control over the libraries used on the platform. Also, there could be n applications sharing the same libs, which is when this approach may save the user redundant bytes to download – PaaD Jan 31 '18 at 22:00
  • https://stackoverflow.com/questions/38153857/bundle-angular-2-app-using-umd-bundles-not-building-vendor-bundle – PaaD Feb 01 '18 at 07:47
  • https://stackoverflow.com/questions/36097701/how-to-reuse-webpack-vendor-bundle – PaaD Feb 02 '18 at 12:01

0 Answers0