我正在尝试首次在 angular2-quickstart
中部署 local IIS
应用,并且刚刚进入生产准备版构建流程。
我的快速启动应用运行正常。
我已将 gulp 添加到我的项目中,而我正在使用的是gulp,
1)在根目录中创建 dist 文件夹。 dist
文件夹
2)将所有 .ts
转换为 .js
并将其置于 {{1}下}
3)创建 dist/app
,其中包含 dist/libs
, reflect.js
, shim.min.js
, system.src.js
,如图所示。
4) zone.js
如下(p 租借说明: 我没有现有文件的更改 ),
systemjs.config.js
5) /**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// 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/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'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
如下,
index.html
6)我将 <!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- changed this section with libs -->
<script src='lib/shim.min.js'></script>
<script src='lib/zone.js'></script>
<script src='lib/Reflect.js'></script>
<script src='lib/system.src.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
内容复制到 dist folder's
并尝试访问 {{1 c:/inetpub/wwwroot
中的,我在浏览器的控制台中看到了以下内容。
7)我知道它的过程不完整但我想完成它并且不知道还需要什么其他东西。
现在问题 ,
1)我是否需要更改 systemjs.config.js 中的任何内容?如果有,那是什么?
2)正如您所见 localhost
使用 chrome browser
,如何为 {做{1}} ?
3) systemjs.config.js
, node_modules
等其他依赖项怎么样?
4)由于我不会在 angular2 dependencies
文件夹中包含 jquery
文件夹,那么 node_modules 文件夹?
5) hummerjs
中需要哪些其他文件?
答案 0 :(得分:0)
我只需要将 node_modules文件夹复制到 c:/inetpub/wwwroot/
并繁荣。现在它按预期工作。
最后,我的 c:/inetput/wwwroot
文件夹包含以下文件夹,以便成功运行angular2应用,
应用
| _______ app.component.js
| _______ app.module.js
| _______ main.js
LIB
| _______ Reflect.js
| _______ shim.min.js
| _______ system.src.js
| _______ zone.js
node_modules( just copy paste
)
index.html的( changed script's path, refer above index.html
)
systemjs.config.js(no change
)
强>
答案 1 :(得分:-1)
如果我们使用任务运行器为我们做这样的事情会更好, 我正在寻找gulp配置和npm脚本来快速发布应用程序。
所以Angular2 QuickStart应该有npm脚本,例如 npm run deploy ,适合初学者。