Привет. Делаю приложение на Angular 2 и Express. Когда запускаю - пишет ошибку:
zone.js:1382 GET http://localhost:3000/app/main.js 404 (Not Found)
(index):21 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/main.js
Error: XHR error (404 Not Found) loading http://localhost:3000/app/main.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/static/zone.js/dist/zone.js:698:29)
at ZoneDelegate.invokeTask (http://localhost:3000/static/zone.js/dist/zone.js:265:35)
at Zone.runTask (http://localhost:3000/static/zone.js/dist/zone.js:154:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/static/zone.js/dist/zone.js:335:33)
Error loading http://localhost:3000/app/main.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/static/zone.js/dist/zone.js:698:29)
at ZoneDelegate.invokeTask (http://localhost:3000/static/zone.js/dist/zone.js:265:35)
at Zone.runTask (http://localhost:3000/static/zone.js/dist/zone.js:154:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/static/zone.js/dist/zone.js:335:33)
Error loading http://localhost:3000/app/main.js
app.js
var express = require('express');
var app = express();
var path = require('path');
app.use('/static', express.static(__dirname));
app.use('/static', express.static(__dirname + '/node_modules'));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
});
app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule],
declarations: [ AppComponent],
bootstrap: [ AppComponent]
})
export class AppModule { }
app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>Hello</h1>'
})
export class AppComponent { }
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="/static/core-js/client/shim.min.js"></script>
<script src="/static/zone.js/dist/zone.js"></script>
<script src="/static/reflect-metadata/Reflect.js"></script>
<script src="/static/systemjs/dist/system.src.js"></script>
<script src="/static/systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
package.json
...
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"node app\" ",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"dependencies": {
"@angular/common": "~2.2.0",
"@angular/compiler": "~2.2.0",
"@angular/core": "~2.2.0",
"@angular/forms": "~2.2.0",
"@angular/http": "~2.2.0",
"@angular/platform-browser": "~2.2.0",
"@angular/platform-browser-dynamic": "~2.2.0",
"@angular/router": "~3.2.0",
"angular-in-memory-web-api": "~0.1.15",
"core-js": "^2.4.1",
"express": "^4.14.0",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.40",
"zone.js": "^0.6.26"
},
"devDependencies": {
"concurrently": "^3.1.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.10",
"@types/node": "^6.0.46"
}
}
Запускаю через npm start.
/app/main.js