2

Привет. Делаю приложение на 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.

1
  • в списке express-овских роутов нет ничего что бы отдало /app/main.js Commented 23 дек. 2016 в 10:07

1 ответ 1

0

Разобрался значит я, может кому поможет. Исправил функцию предоставления статических файлов в app.js и поменял пути в index.html. И всё заработало.

app.js

var express = require('express');
var app = express();
var path = require('path');

app.use(express.static(__dirname));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Смета расходов</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" type="text/css" href="node_modules/primeng/resources/themes/omega/theme.css" />
    <link rel="stylesheet" type="text/css" href="node_modules/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="node_modules/primeng/resources/primeng.min.css" />
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.