Upon finding the ng-book 2, I saw it as a promising resource to delve into Angular 2. Although I am new to module loaders and have minimal experience with npm and node, I find the terminology and assumed knowledge to be quite perplexing.
I decided to use my usual .NET MVC server instead of Node for now since that is what I will be using in conjunction with Angular 2 at work.
Currently, I am encountering issues with module loading as I keep receiving 404 errors when systemjs attempts to load Angular packages.
app.ts
/**
* A basic hello-world Angular 2 app
*/
import {
NgModule,
Component
} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@Component({
selector: 'hello-world',
template: `
<div>
Hello World
</div>
`
})
class HelloWorld {
}
@NgModule({
declarations: [HelloWorld],
imports: [BrowserModule],
bootstrap: [HelloWorld]
})
class HelloWorldAppModule { }
platformBrowserDynamic().bootstrapModule(HelloWorldAppModule);
systemjs.config.js
// See also: https://angular.io/docs/ts/latest/quickstart.html
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app/app',
'rxjs': 'app/node_modules/rxjs',
'@angular': 'app/node_modules/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'rxjs': { defaultExtension: 'js' }
};
var angularPackages = [
'core',
'common',
'compiler',
'platform-browser',
'platform-browser-dynamic',
'http',
'router',
'forms',
'upgrade'
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
angularPackages.forEach(function(pkgName) {
packages['@angular/' + pkgName] = {
main: 'bundles/' + pkgName + '.umd.js',
defaultExtension: 'js'
};
});
var config = {
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
index.cshtml
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 - Simple Reddit</title>
<script src="~/app/node_modules/core-js/client/shim.min.js"></script>
<script src="~/app/node_modules/zone.js/dist/zone.js"></script>
<script src="~/app/node_modules/reflect-metadata/Reflect.js"></script>
<script src="~/app/node_modules/systemjs/dist/system.src.js"></script>
<link rel="stylesheet" type="text/css" href="~/app/resources/vendor/semantic.min.css" />
<link rel="stylesheet" type="text/css" href="~/app/styles.css" />
</head>
<body>
<script resource="~/app/resources/systemjs.config.js"></script>
<script>
System.import('/app/app.js')
.then(null, console.error.bind(console));
</script>
<hello-world></hello-world>
</body>
</html>
The project structure looks like this
https://i.stack.imgur.com/CV544.png
However, the issue persists with requests like
zone.js:101 GET http://localhost:18481/@angular/core 404 (Not Found)