我已经设置了一个内存数据库并注册了，但什么都没有回来。没有错误，没有404 - 只是应用程序拦截它，并返回应用程序。
我是否想要排除＆＃39; api /＆＃39;来自某处处理？
我已导入最新的套餐：
{
"name": "spike02",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"angular-in-memory-web-api": "^0.3.1",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.0.0",
"@angular/compiler-cli": "^4.0.0",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}
}
并建立了一个新的数据库：
// ANGULAR/MODULES
import { Injectable } from '@angular/core';
import { InMemoryDbService } from 'angular-in-memory-web-api';
// CORE/SERVICES
import { DiagnosticsTracingService, TraceLevel } from "./core/services/diagnostics.tracing.service"
@Injectable()
export class InMemDemoDbDatabaseService implements InMemoryDbService {
constructor(private diagnosticsTracingService: DiagnosticsTracingService) {
//super();
}
public createDb() {
let heroes = [
{ id: '1', name: 'Windstorm' },
{ id: '2', name: 'Bombasto' },
{ id: '3', name: 'Magneta' },
{ id: '4', name: 'Tornado' }
];
return {heroes};
}
}
导入为：
// MODULES/ANGULAR
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { RouterModule } from "@angular/router";
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { InMemoryWebApiModule, InMemoryBackendConfig } from 'angular-in-memory-web-api';
// IMPORTANT: Only needed for Dev Demo:
import { InMemoryDbService } from 'angular-in-memory-web-api';
//MODULES/CORE/SERVICES
import { DateTimeService } from '../core/services/datetime.service';
import { GuidService } from '../core/services/guid.service';
import { DiagnosticsTracingService } from '../core/services/diagnostics.tracing.service';
import { EnvironmentService } from '../core/services/environment.service';
import { NetworkService } from '../core/services/network.service';
import { CommunicationService } from '../core/services/communication.service';
import { RepositoryService } from '../core/services/repository.service';
import { AuthenticationService } from '../core/services/authentication.service';
import { AuthorisationService } from '../core/services/authorisation.service';
import { PrincipalService } from '../core/services/principal.service';
import { TenantService } from '../core/services/tenant.service';
import { SessionService } from '../core/services/session.service';
import { NavigationService } from '../core/services/navigation.service';
import { NotificationService } from '../core/services/notification.service';
import { SearchService } from '../core/services/search.service';
//MODULES/FOO/SERVICES
import { InMemDemoDbDatabaseService } from '../inMemoryDatabase';
// ROUTING/APP
import { ROUTES } from "./app.routes";
import { Constants } from "./app.constants";
//
import { AppComponent } from './app.root';
// App views
import { CoreModule } from '../core/core.module';
import { FooModule } from '../foo/foo.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
JsonpModule,
HttpModule,
// IMPORTANT: ONLY needed for development to emulate API endpoint:
//using InMemoryBackendConfig
//InMemoryWebApiModule.forRoot(InMemDemoDbDatabaseService, {apiBase:'api2/'}),
InMemoryWebApiModule.forRoot(InMemDemoDbDatabaseService),
RouterModule.forRoot(ROUTES),
CoreModule,
FooModule,
],
providers: [
// MODULES/CORE/SERVICES:
DateTimeService,
GuidService,
DiagnosticsTracingService,
EnvironmentService/* can be lower than app root? */,
NetworkService/* can be lower than app root? */,
CommunicationService,
RepositoryService,
AuthenticationService/* can be lower than app root? */,
AuthorisationService/* can be lower than app root? */,
PrincipalService,
TenantService,
SessionService,
NavigationService /* can be lower than app root? */,
NotificationService,
SearchService,
{ provide: LocationStrategy, useClass: HashLocationStrategy },
{ provide: Constants, useValue: Constants }
],
bootstrap: [AppComponent]
})
export class AppModule { }
以下是路线 - 可能会拦截它：
import { Routes } from "@angular/router";
// The Views which act as Frames to 'children' routing (they render a nested 'router-outlet' element)
import { ViewLayoutBlankView } from "../core/view.layouts/view.layout.blank.view";
import { ViewLayoutDefaultView } from "../core/view.layouts/view.layout.default.view";
//The children Views that are rendered in the above Parent View Layouts:
import { LandingViewComponent } from "../foo/views/landing.views/landing.view";
import { UserLoginView } from "../core/views/user/login/user.login.view";
import { UserRegisterView } from "../core/views/user/register/user.register.view";
import { AltBrowseViewComponent } from "../foo/views/alt.views/alt.browse.view";
import { FooMainItemBrowseView } from "../foo/views/main.item.views/foo.main.item.browse.view";
import { FooMainItemViewView } from "../foo/views/main.item.views/foo.main.item.view.view";
import { FooMainItemEditView } from "../foo/views/main.item.views/foo.main.item.edit.view";
import { IsAuthenticatedActivationGuard } from '../core/guards/is.authenticated.activation.guard';
import { Status404View } from "../core/views/status/status.404.view";
import { ExampleViews } from "../core/views/example/example.views";
import { ExampleButtonsView } from "../core/views/example/example.buttons.view";
import { ExampleIconsView } from "../core/views/example/example.icons.view";
export const ROUTES: Routes = [
// Main redirect
{
path: '', redirectTo: 'landingView', pathMatch: 'full'
},
// App views
{
path: '', component: ViewLayoutDefaultView,
children: [
{
path: 'landingView', component: LandingViewComponent, data: {menuName: 'primary', titleResourceKey: 'App/Navigation/Titles/DashboardView', className: 'fa fa-th-large' }
},
{
path: 'altView', component: AltBrowseViewComponent, data: {menuName: 'primary', titleResourceKey:'App/Navigation/Titles/AltView', className: 'fa fa-desktop' } //, canActivate: [IsAuthenticatedActivationGuard]
},
]
},
// App views
{
path: 'foo', component: ViewLayoutDefaultView,
children: [
{
path: 'browse', component: FooMainItemBrowseView, data: {menuName: 'primary', titleResourceKey:'App/Navigation/Titles/FooView', className: 'fa fa-desktop' } //, canActivate: [IsAuthenticatedActivationGuard]
},
{
path: 'view', component: FooMainItemViewView, data: { } //, canActivate: [IsAuthenticatedActivationGuard]
},
{
path: 'edit', component: FooMainItemEditView, data: { } //, canActivate: [IsAuthenticatedActivationGuard]
}
]
},
{
path: 'user', component: ViewLayoutBlankView,
children: [
{ path: 'login', component: UserLoginView, data: {menuName: 'primary', titleResourceKey: 'App/Navigation/Titles/UserLoginView', className: 'fa fa-sign-in' } },
{ path: 'register', component: UserRegisterView, data: {menuName: 'primary', titleResourceKey: 'App/Navigation/Titles/UserRegisterView', className: 'fa fa-pencil' } },
{ path: 'retrieve', component: UserRegisterView, data: { } }
//{ path: 'user/logout', component: UserRegisterView , data : {glyph:'sign-out'}}
]
},
{
path: 'examples', component: ViewLayoutDefaultView,
children: [
{
path: 'list', component: ExampleViews, data: {title: 'Examples', menuName: 'primary', className: 'fa fa-th-large' }
},
{
path: 'buttons', component: ExampleButtonsView, data: {title: 'Buttons', menuName: 'examples', className: 'fa fa-th-large' }
},
{
path: 'icons', component: ExampleIconsView, data: {title: 'Icons', menuName: 'examples', className: 'fa fa-th-large' }
}
]
},
// Handle all other routes
//{ path: '**', component: Status404View }
];
我是否应该使用angular-cli.json（不包括路径？）
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "spike02"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css",
"assets/styles/styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/metismenu/dist/metisMenu.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
感谢。
答案 0 :(得分：0)
我是个傻瓜当然，它不会在Chrome的地址栏中工作！
出于某种原因，即使文档明确表示它正在拦截并包装http 客户端在应用程序中，我......期待它在服务器端工作（角度 - cli服务器）。
换句话说，它仅在通过Angular应用程序中的代码调用时才能正常工作 - 但在应用程序包装的http客户端的上下文之外不起作用。
换句话说......它运作得很好而且总是如此。
提示： 因为它拦截了来自客户端的所有呼叫，并且默认情况下不会处理“未知”的呼叫。网址，对静态文件的调用开始神秘失败。您必须更改配置以允许unkonwn网址实际离开客户端，然后转到服务器：
...
InMemoryWebApiModule.forRoot(InMemDemoDbDatabaseService, {passThruUnknownUrl: true, apiBase:'api/'})
...
谢谢！