我的angularjs项目遇到了一个奇怪的问题.

我有一个网站 - www.server.com/pwm(主页).在页面中有一个锚标记带我到另一页 - www.server.com/publishers.当我加载主页并通过单击锚标签导航到发布者页面时,一切正常.但是当我直接在浏览器中输入网址时,我会得到以下例外情况(例如,如果我加载主页www.server.com/pwm,然后在网址末尾输入"/ publishers")

[$ injector:nomod]模块'ui.bootstrap'不可用!您要么错误拼写了模块名称,要么忘记加载它.如果注册模块,请确保将依赖项指定为第二个参数. http://errors.angularjs.org/1.2.18/ $ injector/nomod？p0 = ui.bootstrap"

令人困惑的部分是我已经包含了必要的库,当我浏览网页时它工作正常.当我尝试直接导航到子页面时,会发生此问题.我正在使用ngRoute和模板来加载页面

var pubsApp = angular.module('pubsApp', ['ngResource', 'ngRoute', 'ui.bootstrap'])

和我的脚本文件

<script src="/Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/Scripts/angular.js" type="text/javascript"></script>
<script src="/Scripts/angular-route.js" type="text/javascript"></script>
<script src="/Scripts/angular-sanitize.js" type="text/javascript"></script>
<script src="/Scripts/angular-resource.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/angular-ui/ui-bootstrap.min.js" type="text/javascript"></script>
<script src="Scripts/angular-ui/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<script src="/js/app.js" type="text/javascript"></script>

我想访问我的视图中的localhost:3000/admin .. index.html和admin.html是我的两个不同的基本文件,一个用于用户,另一个用于管理仪表板

在我的app.routes.js我有这个

 angular.module('appRoutes', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {

$routeProvider

    .when('/', {
        templateUrl: 'app/views/pages/home.html',
        controller: 'MainController',
        controllerAs: 'main'
    })
    .when('/admin', {
        templateUrl: 'app/views/admin.html',
    })
    .when('/logout', {
        templateUrl: 'app/views/pages/home.html'
    })
    .when('/login', {
        templateUrl: 'app/views/pages/login.html'
    })
    .when('/signup', {
        templateUrl: 'app/views/pages/signup.html'
    })
    .when('/admin/login' ,{
        templateUrl: 'app/views/pages/adminlogin.html'
    })

    $locationProvider.html5Mode(true);
   })

在server.js我有这个

app.get('*', function(req, res){
res.sendFile(__dirname + '/public/app/views/index.html');
});

有两个html索引文件:index.html,admin.html我想打开admin.html时url是:localhost:3000/admin

和index.html当url是:localhost:3000时

应用程序结构的屏幕截图

在views/pages中我有index.html和admin.html使用ng-view所需的所有html页面

我遇到了一个问题,看起来我无法导航到新路线,同时清除插座/辅助路线.

分别调用这两个动作是有效的 - 但感觉就像一个解决方法.是否有充分理由将它们作为两个电话完成？或者我的实施中是否有错误？或者我应该将其作为GitHub问题提交？

这些独立工作:

// Navigate to `/second`
this._router.navigate(['/second']);

// Clears the `popup` outlet
this._router.navigate(['', {outlets: { popup: null }}]);

我认为这应该有效,但它不清楚出口:

this._router.navigate(['/second', {outlets: { popup: null }}]);

我目前的解决方法是:

this._router.navigate(['', {outlets: { popup: null }}]).then(() => { this._router.navigate(['second']); } );

我创建了一个plnkr概念证明 - 导航代码在global-popup.component.ts

我想拥有多个routing模块,以保持我的应用程序清洁和易于阅读.我目前使用延迟加载,SubComponent但我不想这样做.所以我正在寻找一种方法来改变它.无论如何,这是目前正在运行的代码.

我有以下两个路由文件.

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'sub', loadChildren: './sub/sub.module#SubModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

sub-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', component: SubComponent, children: [
    { path: 'new', component: SubEditComponent }
  ] }, …

AppRouting.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from '../buyer/home/home.component';
const routes: Routes = [
   {path: '', redirectTo:'buyer', pathMatch:"full"}
]
@NgModule({
  declarations:[],
  imports:[
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
   exports:[RouterModule]
})

export class AppRoutingModule {}

BuyerRouting.ts

import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core'; 
import { Routes,RouterModule } from '@angular/router';

import { WelcomeComponent } from './welcome/welcome.component';
import { HomeComponent } from './home/home.component';

@NgModule({
declarations:[],
imports:[
    CommonModule,
    RouterModule.forChild([ …

您好我试图延迟加载"详细模块",同时通过URL发送参数.

这是我的懒加载路线:

{
    path: 'venue/:name/:id',
    loadChildren: () => System.import('../containers/activity-detail/activity-detail.module').then((file: any) => {
        return file.default;
    })
},

我想路由到这个'activity-detail.module',然后使用":name"和"id:"参数加载详细信息.

加载的模块有自己的路由文件.

export const VenueDetailRoutes: Route[] = [
    {
        path: '',
        redirectTo: 'venue/:name/:id',  
        pathMatch: 'full'
    },
    {
        path: 'venue/:name/:id', 
        component: VenueDetailComponent,
        data: {
            shouldDetach: true, // Route will be resused. See CustomResuseStrategy.
            title: null
        }
    },
    {
        path: '**',
        redirectTo: '/'
    }

];

似乎没有第一个默认对象没有任何作用.我收到错误:

{
    path: '',
    redirectTo: 'venue/:name/:id', 
    pathMatch: 'full'
},

TypeError: Cannot read property 'path' of null

使用默认对象我得到错误:

Error: Cannot redirect to …

我有这个界面,我用来阻止用户离开页面

export interface ComponentCanDeactivate {
  canDeactivate: () => boolean;
}

@Injectable()
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {
  canDeactivate(component: ComponentCanDeactivate): boolean {
    return  component.canDeactivate() ?
     //code : //more code
  }
}

在我的一个组件中,我有以下代码

export class DashboardComponent implements ComponentCanDeactivate{
  @HostListener('window:beforeunload')
  canDeactivate(): boolean {
    return !this.isDirty;
  }

我的问题是来自PendingChangesGuard的我的组件 - >(component:ComponentCanDeactivate)总是为空,所以我得到一个错误说

无法调用null的canDeactivate()

我的路由也有这个设置

 path: 'dashboard',
        canDeactivate: [PendingChangesGuard],
        loadChildren: './views/dashboard/dashboard.module#DashboardModule'

谁能告诉我我做错了什么？

我有一组Angular路由,带有实体列表,有两条子路由,用于创建这样的实体和编辑现有实体.实体列表resolver附加了它以在显示组件之前预取组件的数据.这些路由可以总结如下,进一步了解如何在代码中描述这些路由.

• 指数: /items
• 创建: /items/create
• 编辑: /items/:itemId/edit

但是,如果我在/items/create,并成功创建一个项目,导航"返回" /items或任何编辑路线,甚至返回到/将不会导致我的解析器获取像我期望的更新数据.尽管将runGuardsAndResolvers属性设置为"始终".我的理解是这个属性应该能够实现我正在寻找的功能.

为什么会这样,我怎样才能启用我正在寻找的功能,而不需要在我的组件中订阅路由器事件和复制逻辑.

路线

const itemRoutes: Routes = [
    {
        path: '', // nb: this is a lazily loaded module that is itself a child of a parent, the _actual_ path for this is `/items`. 
        runGuardsAndResolvers: 'always',
        component: ItemsComponent,
        data: {
            breadcrumb: 'Items'
        },
        resolve: {
            items: ItemsResolver
        },
        children: [
            {
                path: 'create',
                component: CreateItemComponent,
                data: { …

我在Angular 6中遇到路由问题。我的应用程序右侧有一个侧面菜单，当用户在页面左侧导航时，该菜单会更新。此侧面菜单不在user-dashboard列出用户项目的位置上显示。它需要显示用户选择项目的时间，从而导航到project-home。

下图显示了该组织。一旦用户到达，project-home他们应该elements-list会element-detail在左侧看到从/到主数据/明细数据的流程。独立地，在activities上右手边，用户应该能够通过选项卡点击images，notes和tasks。

更新： 这是一个说明问题的Stackblitz：https ://stackblitz.com/edit/zsoflin-routing

我很茫然，不胜感激如何构造路线的任何方向。谢谢。-扎克

app-routing.module.ts

`
const routes: Routes =[
  { path: 'user-dashboard', component: UserDashboard },
  { path: '', redirectTo: 'user-dashboard', pathMatch: 'full' },
  {
    path: 'project/:projectId',
    component: ProjectHomePage, 
    children:[
        {path: '', component: ElementsPage, pathMatch: 'full'},
        {path: 'element/:elementId', component: ElementPage, pathMatch: 'full'},
        {path: 'edit/:categoryId', component: EditFormPage, pathMatch: 'full'},
        {path: 'act', component:ActivitiesPage, 
            children: [
                {path:'images',outlet:'images',component: ImagesPage},
                {path:'notes',outlet:'notes',component: NotesPage},
                {path:'tasks',outlet:'tasks',component: …

我有一个如下所示的user-profile路由模块:

const userProfileRoutes: Routes = [
  {
    path: ':id/view',
    component: UserProfileViewComponent,
    resolve: { 
      user: UrlUserResolverService,
      posts: PostsAllResolverService
    },
    canActivate: [ AccessGuard ],
    children: [
      {
        path: 'posts',
        outlet: 'tabs',
        component: TabPostsViewComponent
      },
      {
        path: 'followers',
        outlet: 'tabs',
        component: TabFollowersFollowingViewComponent,
        resolve: { followers: UserFollowersResolverService }
      },
      {
        path: 'following',
        outlet: 'tabs',
        component: TabFollowersFollowingViewComponent,
        resolve: { following: UserFollowingResolverService }
      }
    ]
  },
  {
    path: ':id/notifications',
    component: UserProfileNotificationsComponent,
    resolve: { notifications: NotificationsResolverService },
    canActivate: [ AccessGuard ] 
  }
];

当我在应用程序的移动视图中导航更改网址时,这一切都正常,正如我所期望的那样.

但在平板电脑及以上 …