从 angular2 部署英雄应用程序



我已经完成了英雄教程,并通过修改一些组件创建了自己的Angular2应用程序。但基本上它与英雄教程相同。

我的 IDE、npm 等一切都运行良好,我现在准备好将我的应用程序部署到生产环境中......我完全迷失了。

在我的索引文件中,我看到有一些对一些node_module文件的引用。

<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

很酷,因为我不想在我的服务器上转储 30000 个文件,所以我在我的应用程序中创建一个 lib 文件夹并将必要的文件复制到那里,然后我链接到它们:

<script src="lib/shim.min.js"></script>
<script src="lib/zone.js"></script>
<script src="lib/system.src.js"></script>

我将所有内容部署到互联网上的应用程序服务器。我得到的下一个错误是:

http://frontangle.com/angular2charts/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js 加载资源失败:服务器响应状态为 500

好的,看起来我需要导入更多文件,所以我猜你需要从 30,000+ 个node_module文件中取出零碎的东西。

如果我查看我的 systemjs.config 文件,那么我会看到这个:

// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs':                      'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ng2-charts': 'node_modules/ng2-charts',
'angular2-color-picker': 'node_modules/angular2-color-picker'

我是否正确地假设,与其复制这些文件,然后为此处列出的每个角度js文件进行HTML导入,我可以引用一些angular.min.js文件来处理此处列出的所有角度文件?

所有这些角度文件都来自package.json,并作为版本2.4.5导入。那么我是否需要在我的新 lib 目录中使用 angular.2.4.5.min.js 之类的东西来封装所有这些文件?这就是我所需要的吧?这个可分发文件是否存在于 npm 拉入我的项目的目录森林中的任何位置?

接下来是 rxjs。我只是在"捆绑包"目录中获取jxjs.min.js吗?并将其复制到我的lib文件夹中?

注意:我不想使用 webpack 或 cli 或一些花哨的构建工具。我只是想知道如何让我的简单应用程序工作。

使用 angular CLI 并使用 --prod标志进行构建。这将缩小/丑化您的文件以托管到服务器。

最新更新