小编Ale*_*net的帖子

"没有AuthGuard提供商!" 在Angular 2中使用CanActivate

编辑:显然这已经过时了,现在你providers在NgModule 的数组中提供你的守卫.请查看其他答案或官方文档以获取更多信息.

  • 对组件的引导已过时
  • provideRouter() 也过时了


我正在尝试使用Angular2指南中的登录名和AuthGuard在我的项目中设置身份验证:https://angular.io/docs/ts/latest/guide/router.html

我正在使用该版本:"@ angular/router":"3.0.0-beta.1".

我会尝试尽可能多地解释,如果您需要更多细节,请随时告诉我.


我有我的main.ts文件,使用以下代码提升应用程序:

bootstrap(MasterComponent, [
    APP_ROUTER_PROVIDERS,
    MenuService
])
.catch(err => console.error(err));
Run Code Online (Sandbox Code Playgroud)

我加载了MasterComponent,它加载了一个包含按钮的Header,允许我浏览我的应用程序,它现在还包含我的主要内容.

我正在按照指南使我的应用程序以相同的方式工作,使用以下app.routes.ts:

export const routes: RouterConfig = [
    ...LoginRoutes,
    ...MasterRoutes
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes),
    AUTH_PROVIDERS
];
Run Code Online (Sandbox Code Playgroud)

以及指南中的login.routes.ts,它定义了我的AuthGuard:

export const LoginRoutes = [
    { path: 'login', component: LoginComponent }
];

export const AUTH_PROVIDERS = [AuthGuard, AuthService];
Run Code Online (Sandbox Code Playgroud)

我的主组件有自己的路由定义,其中还包含我正在尝试设置的防护.master.routes.ts:

export const MasterRoutes : RouterConfig = [
    { path: '', …
Run Code Online (Sandbox Code Playgroud)

authentication angular2-routing angular

29
推荐指数
7
解决办法
3万
查看次数

角度材质 - 自定义自动完成组件

我正在尝试创建自己的自定义角度材质组件,它可以与mat-form-field控件一起使用.

除此之外,我希望控件使用该mat-autocomplete指令.

我的目标只是创建一个更好看的mat-autocomplete组件,其中包含一个集成的清除按钮和自定义css箭头,如下图所示.我通过使用标准组件成功地获得了它并添加了我想要的东西,但现在我想将它导出到通用组件中.

材料成分目标

我正在使用官方的角度材料文档来创建我自己的表单字段控件以及另一个关于它的SO帖子,它已经帮助了我很多:

我目前面临几个问题,我认为这些问题有关:

  • 即使正确选择了值,我的表单也无效.
  • 选择选项后,占位符未正确设置.
  • 自动完成过滤器选项根本不起作用
  • 如果我没有专门点击输入,焦点就无法正确触发.

我相信我的前三个问题是由与我的被动形式没有正确链接的自动完成值引起的.


这是与项目的个人公共存储库的直接链接(因为此处显示的问题有点大):Git存储库:https://github.com/Tenmak/material.


基本上,这个想法是改变这个:

  <mat-form-field>
    <div fxLayout="row">
      <input matInput placeholder="Thématique" [matAutocomplete]="thematicAutoComplete" formControlName="thematique" tabindex="1">

      <div class="mat-select-arrow-wrapper">
        <div class="mat-select-arrow" [ngClass]="{'mat-select-arrow-down': !thematicAutoComplete.isOpen, 'mat-select-arrow-up': thematicAutoComplete.isOpen}"></div>
      </div>
    </div>
    <button mat-button *ngIf="formDossier.get('thematique').value" matSuffix mat-icon-button aria-label="Clear" (click)="formDossier.get('thematique').setValue('')">
      <mat-icon>close</mat-icon>
    </button>

    <mat-hint class="material-hint-error" *ngIf="!formDossier.get('thematique').hasError('required') && formDossier.get('thematique').touched && formDossier.get('thematique').hasError('thematiqueNotFound')">
      <strong>
        Veuillez sélectionner un des choix parmi les options possibles.
      </strong>
    </mat-hint>
  </mat-form-field>

  <mat-autocomplete …
Run Code Online (Sandbox Code Playgroud)

autocomplete angular-material angular

13
推荐指数
1
解决办法
6674
查看次数

Kendo UI Angular:(SystemJS)意外的令牌<

我在使用IIS的ASP.NET Core解决方案上使用VS2015 RC3,Angular2 2.0.0.

每当我尝试添加新的UI模块(如下拉菜单或输入)时,我都会收到SystemJS错误,但奇怪的是我的按钮工作没有任何问题......

master.module.ts:

import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs';

@NgModule({
    imports: [
        CommonModule,
        MasterRouting,
        ButtonsModule,  // => Works fine and button is showing as expected 
        InputsModule,   // Error : Unexpected Token
        DropDownsModule // Error : Unexpected Token
    ],
    [...]
Run Code Online (Sandbox Code Playgroud)

我得到这些错误(取决于我尝试在"imports"数组中添加的模块:

InputsModule错误:指向master.modules.ts中的导入行

zone.js:192错误:(SystemJS)意外的标记<SyntaxError:意外的标记<at Object.eval(http:// localhost:39351/app/master/master.module.js:35:30)

DropdownnsModule错误:

zone.js:192错误:(SystemJS)意外的标记<SyntaxError:意外的标记<at Object.eval(http:// localhost:39351/node_modules/@ progress/kendo-angular-dropdowns/dist/npm/js/combobox. component.js:630:19)

这个显示了我在kendo库中的导入:

module.exports = require("@ telerik/kendo-dropdowns-common/dist/npm/js/bundle");

我确保我在wwwroot中有...

编辑: …

typescript systemjs kendo-ui-angular2 angular

5
推荐指数
1
解决办法
1196
查看次数

分组测试结果:与 Jenkins 的 Karma / Protractor 集成

我已经成功设置了一个 Jenkins 作业,它执行我的 Karma 测试(使用 Angular-CLI)以及我的 Angular4 应用程序(使用 Angular-CLI)的量角器测试。这两个测试都将输出一个 XML 文件,然后 Jenkins 将使用该文件来显示结果和详细信息。

我的问题非常简单,通过以下屏幕截图可见:我无法区分我的测试套件是来自量角器测试还是业力测试。

  • 红色突出显示的是我的量角器测试套件
  • 未突出显示的是我的 Karma 测试套件。

詹金斯工作结果

因此,我问自己以下问题:

  • 是否有一种良好的实践来管理今天的单元测试和持续集成的端到端测试?
  • 我是否必须在单独的 Jenkins 工作中分开测试?这是否意味着我稍后需要在 Jenkins-pipeline 工作流中使用两个不同的 JenkinsFiles ?
  • 或者相反,我可以简单地为每个测试套件设置一个前缀,以便我可以轻松管理所有内容?

最后两个选项似乎都不切实际。


编辑:仔细考虑这个问题并在投票结束之前完整阅读这个问题,因为它不是基于意见的。我会让自己清楚:我正面临着不切实际的持续集成实现,对问题有明确的定义,我希望有一个解决方案可以解决我当前的问题,如果可能的话,一些关于测试前端的良好实践应用程序也可以解决这个问题。

jenkins karma-runner protractor jenkins-pipeline angular

5
推荐指数
1
解决办法
2128
查看次数