javascript - 将 Angular2 应用程序的必要依赖项上传到 Web 主机

Question

我是 Angular2 的新手，对 node.js 和 Angular2 框架的功能和关系有点困惑。

我可以使用本地主机上的精简服务器运行我的应用程序，但我的问题是将应用程序上传到托管服务。 没有任何教程或指南说明应用程序准备就绪后该怎么做，所以我一直在尝试使用 webpack 制作 bundle ，但没有成功。 我知道上传由 npm 安装的所有 node_modules 是一种不好的做法，但我尝试制作这样的包是否正确？

另一个澄清是我的应用程序是否可以通过上传 html、css 和 js 文件(包括那些在 Node 模块)？或者我是否需要配置一个允许 Node.js 运行我的应用程序的主机？

Answer 1

在 Angular2 中，如果你使用 Typescript，你需要转译 web 应用程序，这个转译将文件放在/dist 文件夹中。 如果您使用 ES6，则可以使用开发根文件夹中的应用程序。

我在浏览器中打开/dist 文件夹中的“index.html”，该应用程序在 angular2 中工作。

在index.html中有这段代码

System.import('system-config.js').then(function () {
  System.import('main');
}).catch(console.error.bind(console));

在/dist 的 main.js 中，您有此代码

var _1 = require('./app/');

在此文件夹中要求您有此(例如)

var ng_fire_component_1 = require('./ng-fire.component');

这需要调用 webbapp 的主要组件...在此逻辑中，当 ng-fire.component 是您的根组件时，您的应用程序仅打开 index.html 运行。

<小时/>

在 Node 中你只需要创建一个网络服务器，这个网络服务器(如果使用express js)你需要调用index.html

router.get('/', function(req, res){
  res.sendfile('yourAPPfolder/index.html');
});

当您打开 www.yourweb.com/或 localhost:yourPort/时，您的 webApp 会再次运行

对于最后一个问题，如果使用服务器，您已经导入了文件夹/dist，在这个文件夹中您有需要的所有文件。

我推荐 Angular ci (https://cli.angular.io) 与 Angular2 一起使用...如果您需要其他 vendor 文件或 vendor 文件夹，您可以在文件 Angular-cli-build.js 中添加

例如:

    /* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

    module.exports = function(defaults) {
      return new Angular2App(defaults, {
        vendorNpmFiles: [
          'systemjs/dist/system-polyfills.js',
          'systemjs/dist/system.src.js',
          'zone.js/dist/*.js',
          'es6-shim/es6-shim.js',
          'reflect-metadata/*.js',
          'rxjs/**/*.js',
          '@angular/**/*.js'
        ]
      });
    };