I'm trying to deploy angular2-quickstart app in local IIS for the first time and new to production ready build process.
my quick-start app is running fine.
I've added gulp to my project and what I'm doing with gulp is,
1) Creating dist folder in root directory. dist Folder
2) converting all .ts into .js and putting them under dist/app
3) creating dist/libs which contains reflect.js,shim.min.js,system.src.js,zone.js as shown in image.
4) systemjs.config.js is as follow (please note: I've made no changes to existing file yet),
/**
* 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);
5) index.html is as follow,
<!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>
6) I copy dist folder's content to c:/inetpub/wwwroot and try to access localhost in the chrome browser and I see following in browser's console.
7) I know its incomplete process but I want to complete it and don't know what other things are required.
Now questions are,
1) Do I need to change anything in systemjs.config.js? If yes, what?
2) As you can see systemjs.config.js uses node_modules, what to do for angular2 dependencies?
3) What about other dependencies like jquery, hummerjs and etc?
4) As I'm not going to have node_modules folder in dist folder, what about node_modules folder?
5) which other files require in dist folders?
I just needed to copy node_modules folder to
c:/inetpub/wwwroot/and boom. Now its works as expected.So finally my
c:/inetput/wwwrootfolder contains below folder to run angular2 app successfully,app
|_______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)