我是Angular2
的新手,对node.js
和angular2框架的功能和关系有点困惑。
我可以在本地主机上使用lite服务器运行我的应用程序,但我的问题是将应用程序上传到托管服务。没有任何关于应用程序准备好后该做什么的教程或指南,所以我一直在尝试使用webpack进行捆绑,但我没有成功。我知道上传npm
安装的所有node_modules
是一种糟糕的做法,但我尝试制作这样的捆绑包是正确的吗?
另一个澄清是,我的应用程序是否可以通过上传html
、css
和js
文件(包括node_modules中的文件)来运行我的应用?还是我需要配置一个允许Node.js
运行我的应用程序的主机?
在Angular2中,如果您使用Typescript,则需要对Web应用程序进行transfile,此transfile会将文件放在/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。
在节点中,你只需要创建一个web服务器,这个web服务器(如果使用express js)你需要调用index.html
router.get('/', function(req, res){
res.sendfile('yourAPPfolder/index.html');
});
当您打开www.yourweb.com/或localhost:yourPort/时,您的webApp将再次运行
对于最后一个问题,如果使用服务器,您必须导入该文件夹中的文件夹/dist,您拥有所有需要的文件。
我修复了棱角分明的ci(https://cli.angular.io)对于angular2的工作。。。如果您需要其他供应商文件或供应商文件夹,您可以在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'
]
});
};