0
У меня есть рабочий веб-сервер Node в Angular 1 с конструкцией материала. Теперь некоторые огромные проблемы с производительностью поразили меня, и поэтому я хочу перейти на Angular 2, который должен иметь лучшую производительность. Сервер узла в настоящее время настроен на использование Express с Jade в качестве механизма рендеринга, и все работает так, как ожидалось. Моя проблема заключается в том, что при настройке веб-сервера для Angular 2 ничего не отображается, говоря 404 GET /index.html. Это правда, но я хочу сделать views/index.jade по-прежнему, а не новый файл /index.html.Перемещение сервера NodeJS с помощью Express с Jade от углового до углового 2
Вот шаги, я в настоящее время используются для обновления до угловому 2:
- Добавление всех файлов и требования от 5 min quickstart guide.
- Запустите
npm install(или аналогичный), чтобы установить все необходимые зависимости. - Спрятаться во множестве файлов, чтобы попытаться отобразить
/views/index.jadeвместо/index.html, но я просто не могу найти подходящее место для правильной настройки.
Я расскажу о своей структуре файла и файлах, которые, как я считаю, важны для этого. Пожалуйста, дайте мне знать, нужно ли добавлять файлы.
структура папок (не важные файлы и папки удалены):
www
├── app <-- Added for Angular 2
│ ├── app.component.js
│ ├── app.component.js.map
│ ├── app.component.ts
│ ├── main.js
│ ├── main.js.map
│ ├── main.ts
│ └── reflect-metadata
├── app.js <-- Angular 1 main file (now app/main.ts)
├── bin
│ └── www <-- Angular 1: start file run with 'node bin/www'
├── package.json
├── public
│ ├── javascripts
│ │ ├── angular-animate.js
│ │ ├── angular_controllers <-- Angular 1 client side controllers
│ │ │ ├── casesController.js
│ │ │ ├── dataController.js
│ │ │ └── // <snip other controllers>
│ │ ├── angular.js <-- Angular 1 client side
│ │ ├── angular_js.js <-- Angular 2 client side
│ │ ├── angular_js.js.map <-- Angular 2 client side
│ └── stylesheets
│ ├── <snip, not important>
├── routes
│ ├── index.js
│ └── <snip other routes>
├── systemjs.config.js
├── tsconfig.json
├── typings
│ ├── <snip, auto-created>
├── typings.json
└── views
├── index.jade
└── <snip, other jade files>
package.json
{
"name": "MyWebApp",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"dependencies": {
"@angular/common": "2.0.0-rc.2",
"@angular/compiler": "2.0.0-rc.2",
"@angular/core": "2.0.0-rc.2",
"@angular/http": "2.0.0-rc.2",
"@angular/platform-browser": "2.0.0-rc.2",
"@angular/platform-browser-dynamic": "2.0.0-rc.2",
"@angular/router": "2.0.0-rc.2",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.2",
"angular": "^1.5.6",
"angular-animate": "^1.5.6",
"angular-aria": "^1.4.8",
"angular-bootstrap": "^0.12.2",
"angular-material": "http://github.com/angular/bower-material/tarball/v1.0.9",
"angular-sanitize": "^1.5.6",
"angular2-in-memory-web-api": "0.0.12",
"body-parser": "~1.12.0",
"bootstrap": "^4.0.0-alpha.2",
"bunyan": "^1.3.5",
"cookie-parser": "~1.3.4",
"core-js": "^2.4.0",
"debug": "~2.1.1",
"es6-shim": "^0.35.1",
"express": "^4.12.4",
"forever-monitor": "^1.6.0",
"graceful-fs": "^3.0.8",
"jade": "~1.9.2",
"jquery": "^2.1.4",
"jquery-ui": "^1.10.5",
"jsdom": "^5.4.1",
"lodash": "^3.9.3",
"moment": "^2.10.6",
"morgan": "~1.5.1",
"node-inspector": "^0.10.2",
"node-sass": "^3.7.0",
"node-sass-middleware": "^0.9.8",
"nodemailer": "^2.3.0",
"pg": "^4.3.0",
"pg-promise": "^1.2.3",
"phantomcss": "^0.10.4",
"prettydiff": "^1.13.6",
"promise": "^7.0.1",
"pug": "^0.1.0",
"reflect-metadata": "^0.1.3",
"request": "^2.62.0",
"resemblejs": "^1.3.1",
"restify": "^3.0.2",
"rxjs": "^5.0.0-beta.6",
"serve-favicon": "~2.2.0",
"systemjs": "0.19.27",
"tether": "^1.1.1",
"zone.js": "^0.6.12"
},
"devDependencies": {
"concurrently": "^2.0.0",
"gulp-jade": "^1.1.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
}
}
приложение/main.ts (в основном скопированы с app.js Используется для Углового 1):
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var sassMiddleware = require('node-sass-middleware');
var zone = require('zone');
var reflectmetadata = require('reflect-metadata');
var routes = require('../routes/index');
// <snip, vars for other routes>
var app = express();
// view engine setup
app.set('views', path.join(__dirname, '..', 'views'));
app.set('view engine', 'jade');
// Add serving of static files from folder 'public'.
app.use(express.static(path.join(__dirname, '..', 'public')));
// Working for Angular 1 with Express/Jade
app.use('/', routes);
// <snip, other routes)
// <snip error handlers and other stuff>
module.exports = app;
приложение/app.components.ts:
import { Component } from '@angular/core';
@Component({
selector: 'my-app', <-- Is this important?
template: '../views/index.jade' <-- I have tried multiple paths here.
})
export class AppComponent { }
маршруты/index.js:
var express = require('express');
var router = express.Router();
router.get('/', function(req, res) {
res.render('index'); // Also tried '../viwes/index', but it made no difference.
});
module.exports = router;
tsconfig.json, systemjs.config.json, typings.json и аналогичные файлы изображены на 5 min quickstart guide.
Выполнение этой настройки с использованием npm start (см. Package.json) теперь дает в браузере сообщение Cannot GET /. Что может быть неправильно с моей настройкой? Консольный выход выглядит следующим образом:
[email protected]:~/www$ npm start
> [email protected] start /home/me/www
> tsc && concurrently "npm run tsc:w" "npm run lite"
[0]
[0] > [email protected] tsc:w /home/me/www
[0] > tsc -w
[0]
[1]
[1] > [email protected] lite /home/me/www
[1] > lite-server
[1]
[1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
[1] ** browser-sync config **
[1] { injectChanges: false,
[1] files: [ './**/*.{html,htm,css,js}' ],
[1] watchOptions: { ignored: 'node_modules' },
[1] server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[1] [BS] Access URLs:
[1] -------------------------------------
[1] Local: http://localhost:3003
[1] External: http://192.168.1.1:3003
[1] -------------------------------------
[1] UI: http://localhost:3004
[1] UI External: http://192.168.1.1:3004
[1] -------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[1] 16.06.20 11:45:49 404 GET /index.html
[1] 16.06.20 11:45:49 404 GET /favicon.ico
[1] [BS] File changed: app/app.component.js
[1] [BS] File changed: app/main.js
[0] 11:45:49 AM - Compilation complete. Watching for file changes.
Каково содержание 'routes/index.js'? Наверное, вы не установили для него путь '/'. – Zen
Извините, я забыл, что один - я добавил его сейчас. Единственное, что я делаю, это сделать 'index' в'/'. Это работает для моего приложения Angular 1, но не для текущей попытки для Angular 2. –
Это невозможно. Отправьте код – Zen