angularjs2 SPA - 如何一饮而尽任务改为prevent不能得到/页错误 [英] angularjs2 SPA - how to change gulp task to prevent cannot get /page error
本文介绍了angularjs2 SPA - 如何一饮而尽任务改为prevent不能得到/页错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题：我得到无法GET /英雄或试图达成时无法GET /仪表板错误的的http：//本地主机：9000 /仪表板或的http：//本地主机：9000 /英雄
我现在有一个一口任务设置网页：
VAR HTTP =要求（'HTTP'）;＆LT; BR /＆GT;
VAR连接=要求（连接）;＆LT; BR /＆GT;
VAR serveStatic =要求（'服务静态'）;＆LT; BR /＆GT;
VAR开放=要求（'开'）;＆LT; BR /＆GT;
VAR端口= 9000，应用;＆LT; BR /＆GT;gulp.watch（PATHS.src，['ts2js']）;应用= connect（）的使用（serveStatic（__目录名））。http.createServer（APP）。听（端口，函数（）{
打开（的http：//本地主机：'+端口）;
}）;
问：我应该在我的一饮而尽任务prevent更改index.html文件被绕过？
我曾尝试加入的连接 - 历史-API的回退，但我不知道如何设置正确。
我尝试以下，但那就不是让我改变的子页面都：
VAR历史=要求（连史-API的回退'）;
应用= connect（）的使用（serveStatic（__目录名））。
app.use（历史）;
下面是我的angularjs2路由的配置（如果它帮助）：
进口{}组件从angular2 /核心;
进口{RouteConfig，ROUTER_DIRECTIVES，ROUTER_PROVIDERS}从'angular2 /路由器;从./dashboard.component进口{DashboardComponent};
进口{} HeroesComponent从'./heroes.component';@零件（{
选择：启动应用程序，
模板：`
＆LT; H1＆GT;的{{title}}＆LT; / H1＆GT;
＆LT;＆导航GT;
＆LT; A [routerLink] =[控制台]＆GT;仪表及LT; / A＆GT;
＆LT; A [routerLink] =['英雄']＆GT;英雄＆LT; / A＆GT;
＆LT; / NAV＆GT;
＆LT;路由器出口＆GT;＆LT; /路由器出口＆GT;
`
styleUrls：['./src/app/app.component.css']，
指令：[ROUTER_DIRECTIVES]
供应商：[/ * HeroService，* / ROUTER_PROVIDERS]
}）
@RouteConfig（[
{路径：'/仪表盘，名称：仪表板，分量：DashboardComponent，useAsDefault：真正}，
{路径：'/英雄，名称：'英雄'，成分：HeroesComponent}
]）
出口类应用组件//
{
公共标题=英雄之旅;
}
在此先感谢！
这里要求是整个吞掉文件（希望它可以帮助你）：
VAR一饮而尽=要求（'吞掉'）;VAR PATHS = {
SRC：'SRC / ** / * TS'
};gulp.task（'干净'，函数（完成）{
VAR德尔=要求（'德尔'）;
德尔（['DIST']，完成）;
}）;//复制依赖性
gulp.task（'副本：库'，['干净']，函数（）{
gulp.src（[
SRC /应用/ *。HTML'，'SRC /应用/ *。CSS
]）
.pipe（gulp.dest（'DIST /应用程序'））;gulp.src（[
SRC /家庭/ *。HTML'，'SRC /家庭/ *。CSS
]）
.pipe（gulp.dest（'DIST /家'））;gulp.src（[
SRC /登录/ *。HTML'，'SRC /登录/ *。CSS
]）
.pipe（gulp.dest（'DIST /登录'））;gulp.src（[
SRC /注册/ *。HTML'，'SRC /注册/ *。CSS
]）
.pipe（gulp.dest（'DIST /注册'））;
}）;gulp.task（'ts2js'，['副本：库']，// ['副本：库']，
功能（）{
VAR打字稿=要求（'一饮而尽-打字稿'）;
VAR tscConfig =要求（'./ tsconfig.json'）; VAR tsResult =一饮而尽
的.src（PATHS.src）
.pipe（打字稿（tscConfig.compilerOptions））; 返回tsResult.js.pipe（gulp.dest（'DIST'））;
}）;gulp.task（'玩'，['ts2js']，函数（）{
VAR HTTP =要求（'HTTP'）;
VAR连接=要求（'连接'）;
VAR serveStatic =要求（'服务静态'）;
VAR开放=要求（'开'）;VAR端口= 9000，应用;gulp.watch（PATHS.src，['ts2js']）;应用= connect（）的使用（serveStatic（__目录名））。
http.createServer（APP）。听（端口，函数（）{
打开（的http：//本地主机：'+端口）;
}）;}）;
gulp.task（'默认'，['玩']）;
解决方案
下面就是答案如何设置它在任务一饮而尽：
VAR historyApiFallback =要求（连史-API的回退'）;
变种BS =要求（'浏览器同步'）创建（）。
bs.init（{
服务器：{BASEDIR：./，中间件：[historyApiFallback（）]}
}）;
the problem: i get "Cannot GET /heroes" or "Cannot GET /dashboard" errors when trying to reach http://localhost:9000/dashboard or http://localhost:9000/heroes
i currently have a gulp task to setup the webpage:
var http = require('http');<br/>
var connect = require('connect');<br/>
var serveStatic = require('serve-static');<br/>
var open = require('open');<br/>
var port = 9000, app;<br/>
gulp.watch(PATHS.src, ['ts2js']);
app = connect().use(serveStatic(__dirname));
http.createServer(app).listen(port, function () {
open('http://localhost:' + port);
});
Question: what should i change in my gulp task to prevent the index.html file being bypassed?
I have tried adding in connect-history-api-fallback but I don't know how to setup properly.
i tried the following but then it wouldn't let me change the subpage at all:
var history = require('connect-history-api-fallback');
app = connect().use(serveStatic(__dirname));
app.use(history);
Here is my angularjs2 routing config (if it helps):
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
import {DashboardComponent} from './dashboard.component';
import {HeroesComponent} from './heroes.component';
@Component({
selector: 'start-app',
template: `
<h1>{{title}}</h1>
<nav>
<a [routerLink]="['Dashboard']">Dashboard</a>
<a [routerLink]="['Heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
styleUrls: ['./src/app/app.component.css'],
directives: [ROUTER_DIRECTIVES],
providers: [/*HeroService,*/ ROUTER_PROVIDERS]
})
@RouteConfig([
{ path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true },
{ path: '/heroes', name: 'Heroes', component: HeroesComponent }
])
export class App//Component
{
public title = 'Tour of Heroes';
}
thanks in advance!
as requested here is the whole gulp file (hope it helps you):
var gulp = require('gulp');
var PATHS = {
src: 'src/**/*.ts'
};
gulp.task('clean', function (done) {
var del = require('del');
del(['dist'], done);
});
// copy dependencies
gulp.task('copy:libs', ['clean'], function() {
gulp.src([
'src/app/*.html', 'src/app/*.css'
])
.pipe(gulp.dest('dist/app'));
gulp.src([
'src/home/*.html', 'src/home/*.css'
])
.pipe(gulp.dest('dist/home'));
gulp.src([
'src/login/*.html', 'src/login/*.css'
])
.pipe(gulp.dest('dist/login'));
gulp.src([
'src/signup/*.html', 'src/signup/*.css'
])
.pipe(gulp.dest('dist/signup'));
});
gulp.task('ts2js',['copy:libs'], //['copy:libs'],
function () {
var typescript = require('gulp-typescript');
var tscConfig = require('./tsconfig.json');
var tsResult = gulp
.src(PATHS.src)
.pipe(typescript(tscConfig.compilerOptions));
return tsResult.js.pipe(gulp.dest('dist'));
});
gulp.task('play', ['ts2js'], function () {
var http = require('http');
var connect = require('connect');
var serveStatic = require('serve-static');
var open = require('open');
var port = 9000, app;
gulp.watch(PATHS.src, ['ts2js']);
app = connect().use(serveStatic(__dirname));
http.createServer(app).listen(port, function () {
open('http://localhost:' + port);
});
});
gulp.task('default', ['play']);
解决方案
here is the answer how to set it up in that gulp task:
var historyApiFallback = require('connect-history-api-fallback');
var bs = require('browser-sync').create();
bs.init({
server: {baseDir: "./", middleware: [ historyApiFallback() ]}
});
这篇关于angularjs2 SPA - 如何一饮而尽任务改为prevent不能得到/页错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
