Question

我在使用角度库作为外部依赖项设置angular4项目时遇到问题。

这个想法有点像老式学校＆＃34; 创建一个＆＃34; vendor.bundle.js＆＃34;文件包括所有角度库。 @ angular / core，@ angular / common等将其用作具有许多SPA的客户门户中的全局脚本，例如旧的angular.min.js。

现在，每个应用程序都应该使用这些库。这意味着对于每个单独的应用程序，不要将它们包含在捆绑包中，而是将它们声明为外部。

所以我创建了项目A，这是＆＃34;库项目＆＃34;。我基本上设置了vendor.ts文件，它导入了所有必需的角度库。

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

我使用标准编译器和webpack设置进行compliation和捆绑以获取vendor.lib.js。现在，在项目B中，我想使用它，但它没有按预期工作。

为了避免在捆绑A时出现错误，我将unpkg cdn中的相关umd模块放在一起，并且首先不要使用我的lib。所以基本上，我有一个index.html，其中包括：

<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>

一个匹配的webpack配置，外部部分如：

[
  {
        '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'
    }
]

工作正常，因为我使用的是umd版本，这意味着ng是窗口范围内的属性。

用我自己的捆绑A，没有运气。 core-js和reflect-metadata都存在。 @angular的所有内容基本上都是未定义的，窗口上没有。

我还试图通过以下方式获得外部：

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

哪个应该涵盖所有用例，但仍然核心似乎未定义。

所以我的问题是：实现库A的最佳或最常用的方法是什么，并将其作为外部包含在B中。我错过了什么，有没有人做过类似的方法实际工作？

P.S。我知道这不是一个典型的用例，你不能做树干等，但没有其他选项，因为＆＃39; vendor.lib＆＃39;是强制性要求。此外，有理由说明这种方法是有道理的，例如： CDN的想法。

p.p.s这应该不是那么难，我曾经是一个......

Angular4依赖性作为库

0 个答案: