标签: angular5

我试图通过ng build --prod将我的角度代码编译到生产模式并且它成功但在浏览器中我得到错误:

ERROR p {__zone_symbol__error: Error: Uncaught (in promise): Error: NullInjectorError: No provider for t!

错误:NullInjectorError:...,...}

当我只运行构建时,html工作正常.

我试过git hub上提到的几个链接:

https://github.com/angular/angular/issues/19219 https://github.com/angular/angular-cli/issues/6851

没有多大帮助.

附加我的Package.json文件内容:

{
  "name": "xxx",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor",
    "build": "ng build && node server.js",
    "dev": "ng build -w & nodemon server.js --watch dist --watch server",
    "production": "ng build --prod & node server.js …

我在 Angular-CLI 和 .NET Core 2.0 中使用 Angular 5.2.2（打字稿）。

我正在尝试向我的应用程序动态添加其他路由。

这个想法是我从服务器动态获取我的路由，该服务器检查哪些模块应该可供用户使用。但我似乎无法获得可用的路线。

我尝试使用添加它们，RouterModule.forRoot但这不起作用。

我试过使用，Router.resetConfig但我似乎无法让它工作。我尝试使用依赖注入在我创建的函数中获取它，但我最终得到了循环依赖：

Uncaught Error: Provider parse errors:
Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1

这是我拥有的一些代码：

app-routing.module.ts

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

var routes: Routes = [{ path: '', loadChildren: "../app/modules/f2p-dashboard/f2p-dashboard.module#F2PDashboardModule" }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: AppConfigServiceFactory,
      deps: [F2PModuleService, Router ],
      multi: true
    } …

我试图得到一个mat-slide-toggle但不幸的当前值我会得到一个错误:

Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'mat-slide-toggle'.

我在我的组件的html部分中使用这样的切换:

 <mat-slide-toggle color="primary" [(ngModel)]="showInnerView">
      Default Slide Toggle
 </mat-slide-toggle>

我的组件中的相应属性:

showInnerView: boolean = false;

我做错了什么？

文件的mat-slide-toggle

官方例子的mat-slide-toggle一起[(ngModel)]

使用版本:Angular:5.2.4,Angular材料:5.2.0

在我的一个单元测试文件中，我不得不使用不同的模拟对同一服务进行多次模拟。

import { MyService } from '../services/myservice.service';
import { MockMyService1 } from '../mocks/mockmyservice1';
import { MockMyService2 } from '../mocks/mockmyservice2';
describe('MyComponent', () => {

    beforeEach(async(() => {
        TestBed.configureTestingModule({
        declarations: [
            MyComponent
        ],
        providers: [
            { provide: MyService, useClass: MockMyService1 }
        ]
        })
        .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(MapComponent);
        mapComponent = fixture.componentInstance;
        fixture.detectChanges();
    });

    describe('MyFirstTest', () => {
        it('should test with my first mock', () => {
            /**
             * Test with my first mock
             */
        });
    });

    describe('MySecondTest', () => …

我目前的网址是：

https://localhost:8080/MyApp/manager/dashboard

在上面的 url 中，我只想获取https://localhost:8080/MyApp/部分。

有没有办法在没有硬编码的情况下获取它？

我正在开发angular 5应用程序,我需要在模板中的样式标记中应用动态css.我尝试了一些解决方案,但它们没有用.

app.component.ts

customCss : any;

constructor(){}

ngOnInit(){
   this.customCss['color'] = "red";
}

app.component.html

<div>
   <span class="custom_css">This is angular 5 application</span>
</div>

<style>
   .custom_css{
      color: {{customCss.color}};
   }
</style>

当我在浏览器中检查custom_css类时,它显示的样式

.custom_css{
   color: {{customCss.color}};
}

任何帮助表示赞赏.

我有以下代码

<form #createForm="ngForm">
 <mat-form-field>
   <mat-select placeholder="Favorite food"
      matInput
     [ngModel]
     food="food"
     #food="ngModel" required>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
   </mat-select>
</mat-form-field>
</form>
<button [disabled]="!createForm.valid">submit</button>

由于我希望"选择"是必填字段,因此在呈现表单时应禁用"提交"按钮.但是,显示表单时会启用"提交"按钮.问题是什么？

我在angular5应用程序中使用PrimeNG.我有p-dropdown的问题

题

我有显示国家的p-down.我正确绑定选择选项,它工作正常(此数据来自api),但我需要为此p-dropdown设置默认选择选项为"India".

我将ng-model值设置为印度,但它不起作用.

我的dummy.component.html代码

<div class="form-group col-md-2">
    <div>
        <label for="inputEmail4"> Select Country</label>
        <span style="color:red">*</span>
    </div>
    <p-dropdown name="country" [options]="countries" [(ngModel)]="applicant.country" placeholder="select country"
        (onChange)="getStatebyCountry(applicant.country,$event)" #country="ngModel" required>
    </p-dropdown>
    <span *ngIf="country.invalid && (country.dirty || country.touched)">
        <span [hidden]="!country.hasError('required')" style="color:#ffa500">country is mandatory</span>
    </span>
</div>

我的dummy.component.ts

export class dummyComponent implements OnInit {
    //variable declaration scope for all controller function
    applicant: any = {};
    country: string; constructor() {
    }
    ngOnInit() {
        this.applicant.country = 'India';
    } 
    this.countries = [];
// this.countries.push({ label: 'Select Country', value: '' });
//getallcountries …

我有一点泡菜.我正在使用Route guard(实现CanActivate接口)来检查用户是否被授予访问特定路由的权限:

const routes: Routes = [
    {
        path: '',
        component: DashboardViewComponent
    },
    {
        path: 'login',
        component: LoginViewComponent
    },
    {
        path: 'protected/foo',
        component: FooViewComponent,
        data: {allowAccessTo: ['Administrator']},
        canActivate: [RouteGuard]
    },
    {
        path: '**',
        component: ErrorNotFoundViewComponent
    }
];

现在它可以很好地保护'/ protected/foo'路由不被激活,但我想告诉用户他试图访问的路由是禁止的(类似于你可能从服务器获得的403 Forbidden).

问题: 如何向用户显示此特殊错误视图,而不将其重定向到错误路径哪个接缝是我找到的众多来源的首选选项？ 而且如何在RouteGuard没有实际加载禁止路线的情况下仍然使用我,因为如果我检查我的内部访问FooViewComponent并显示不同的视图它首先会失败点RouteGuard.

理想情况下,我想让我RouteGuard不仅在canActivate()方法中返回false ,而且还完全用say替换组件ErrorForbiddenViewComponent.但我不知道该怎么做,或者事件是否可能.任何替代品？

这就是我的护卫队现在的样子:

import {Injectable} from '@angular/core';
import {Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
import {AuthService} from '../services/auth.service';

@Injectable()
export …

我在我的项目中使用Angular 5.2并且是角度框架的新手.我的组件html看起来像这样: -

我想添加style ="top:200px;" 在角度ts代码的上述屏幕截图中,使用class ="app-alerts"动态地突出显示突出显示的元素.具有"app-alerts"类的div元素被添加到渲染上的DOM中.

请建议代码更改.