标签: angular7-router

我已经在angular 7和ionic 4上创建了一个应用程序。我试图编辑app.routing.ts文件，设置路径和组件。从那时起，我在下面收到此错误：

ERROR in ./src/app/department/department.module.ts
[ng] Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
[ng] Error: ENOENT: no such file or directory, open 'C:\Users\x\department\department.module.ts'
[ng]     at Object.openSync (fs.js:436:3)
[ng]     at Object.readFileSync (fs.js:341:35)
[ng]     at Storage.provideSync (C:\Users\x\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:98:13)

我正在尝试使用 jasmine 为 getCurrentNavigation().extras.state 编写单元测试。

为了解决这个问题，我试图监视这个路由器方法。

我的组件文件，

@Component({
  selector: 'app-location-list',
  templateUrl: './location-list.component.html',
  styleUrls: ['./location-list.component.scss']
})
export class LocationListComponent implements OnInit{

  locationId;
  locationName;
  constructor(private activatedRoute: ActivatedRoute, private router: Router) {
    if (this.router.getCurrentNavigation().extras.state) {
      this.locationId = this.router.getCurrentNavigation().extras.state.locationId;
    }
    if (this.router.getCurrentNavigation().extras.state) {
      this.locationName = this.router.getCurrentNavigation().extras.state.locationName;
    }
  }
  ngOnInit() { }
}

我的规格文件，

describe('LocationListComponent ', () => {
  let component: LocationListComponent ;
  let fixture: ComponentFixture<LocationListComponent >;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        LocationListComponent 
      ],
      providers: []
    })
      .compileComponents();
  }));

  beforeEach(() …

在我的角度应用程序中，当我在gifts-routing.module.ts中添加路由时，会出现此错误，当我删除路由时，它可以工作，但我仍然需要路由，那么我该如何解决此错误

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[FormBuilder]: 
  StaticInjectorError(Platform: core)[FormBuilder]: 
    NullInjectorError: No provider for FormBuilder!
NullInjectorError: StaticInjectorError(AppModule)[FormBuilder]: 
  StaticInjectorError(Platform: core)[FormBuilder]: 
    NullInjectorError: No provider for FormBuilder!

礼品模块.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { GiftsRoutingModule } from './gifts-routing.module';
import { GiftListComponent } from './components/gift-list/gift-list.component';
import { GiftFormComponent } from './components/gift-form/gift-form.component';
import { SharedModule } from '../shared/shared.module';


@NgModule({
  declarations: [GiftListComponent, GiftFormComponent],
  imports: [
    CommonModule,
    GiftsRoutingModule,
    SharedModule
  ]
})
export class GiftsModule { }

礼物路由.module.ts

import { …

在 Angular 7 中，我定义了不同的组件应用程序文件夹，并在路由中定义组件，当我在 url 中定义路由器名称时，工作正常，向我显示附加到该 url 的组件，但是当我在锚标记中定义路由名称时单击锚定它，这里不起作用是我的 html 代码

<li class="nav-item">
  <a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item @@about">
  <a class="nav-link" routerLink="/about">About</a>
</li>
<li class="nav-item @@blog">
  <a class="nav-link" routerLink="/blog">BLOG</a>
</li>

这是我的路由器

const routes: Routes = [{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },
  {
    path: 'blog',
    component: BlogComponent
  },
];

我有一个名为“host”的模块，它有自己的路由，我想将其插入到 app-routing.module 中。但是，我遇到了首先加载通配符并显示 PageNotFoundComponent 的问题，而不是加载 Host 组件。我有以下文件。

主机模块.ts

....
const routes: Routes = [
  {
    path: 'host',
    children: [
     { path: '', component: HostComponent }
    ]
  }
];

@NgModule({
  declarations: [HostComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class HostModule { }

应用程序路由.module.ts

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: "full"},
  { path: '**', component: PageNotFoundComponent }
];

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

应用程序模块.ts

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    PageNotFoundComponent …

我尝试了三种方法。

第一个：index.html

<base href="/customer">

第二个：app.module.ts

@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: '/customer'}]
})

第三个：app-routing.module.ts

const routes: Routes = [
  { path: "", redirectTo: "/customer", pathMatch: "full" },
  {
    path: "customer",
    component: CustomerComponent,
    data: { animation: "HomePage" }
  }
];

以上所有方法都适用于 URL 路由，我得到了所需的 URL。

http://localhost:4200/客户

但是，静态文件（js 和图像）仍在使用基本路径“ http://localhost:4200/ ”加载。我需要它像http://localhost:4200/customer/main.js 一样。

因此，出于某些安全验证原因，我试图将其设为http://localhost:4200/customer/main.js而不是http://localhost:4200/main.js。

同样可以在下面的屏幕截图中看到。

我有两个选项可以滚动到页面顶部。第一的，

router.events.subscribe((evt) => {
    if (evt instanceof NavigationEnd) {
        window.scroll({
            top: 0,
            left: 0,
            behavior: 'smooth'
        });
    }
});

Angular 6 提供的第二个选项是，

RouterModule.forRoot(AppRoutes, { 
      scrollPositionRestoration: "enabled"
})

当我更改路线时，页面将移动到顶部，并且按预期工作。我在页面的几乎底部有使用子路线的选项卡部分。当子路由被触发时，页面将移动到页面顶部，而不是保留在选项卡部分。

所以我需要禁用子路线上的滚动到顶部功能。有什么办法可以做到吗？

任何帮助/想法表示赞赏。