我的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 …

我有一组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: { …

我有一个如下所示的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 ] 
  }
];

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

但在平板电脑及以上 …

LazyLoading chunkName 未显示

webpack.config.js

const webpack = require('webpack');
const path = require('path');

var PROD = JSON.parse(process.env.PROD_ENV || '0');

module.exports = {
    entry: {
        clientApp: "./App/Modules/main",
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].bundle.js",
        chunkFilename: '[name]-[chunkhash].js',
        publicPath: '/dist/',
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        loaders: [ 
            'angular-router-loader'
        ]
    },

    plugins: [
    ]
}

app.routing.ts

{
                path: 'about',     
                loadChildren: () => import('../Features/about/about.module').then(m => m.AboutModule)   
            }

它不显示块的模块名称。我在这里做错了什么？

我的项目在 IONIC 5 和 Firstore 中。经过ion-router-outlet身份验证的（主页）和未经身份验证的（索引）路由有 2 种不同。以下是为 class 中的用户动态打开登录/主页的代码app.component.ts。

  this.afAuth.authState.subscribe(user => {
    if (user) {
      this.router.navigateByUrl('home');
    } else {
      this.router.navigateByUrl('index');
    }
  }); 

流程：登录页面->（登录）->首页->（退出）->登录页面。当主页打开时，登录页面仍会加载并位于导航堆栈中。在ngOnDestroy登录页面的不执行。注销后，登录页面再次打开，但类 constructor 和ngOnInit方法不执行。这会导致很多问题，因为页面初始化没有重新加载。Flow Home Page -> (logout) -> Login Page -> (login) -> Home Page 也发生了同样的问题。如何在登录后销毁登录页面和注销后的主页，以便在同一会话中重新打开时可以重新加载？

编辑：

以下是路由配置：

app-routing.module.ts

const routes: Routes = [
  {
    path: 'home',
    canLoad: [AuthGuard],
    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
  },
  {
    path: 'index',
    loadChildren: () => import('./index/index.module').then(m => m.IndexPageModule)
  },
];

无论是Home.html …