$ng serve
** NG Live Development Server is running on http://localhost:4200 **
Hash: a73c4ecdb8222366629e
Time: 16536ms
chunk    {0} polyfills.bundle.js,polyfills.bundle.js.map (polyfills) 405 kB {5} [initial] [rendered]
chunk    {1} main.bundle.js,main.bundle.js.map (main) 41.1 kB {4} [initial] [rendered]
chunk    {2} styles.bundle.js,styles.bundle.js.map (styles) 149 kB {5} [initial] [rendered]
chunk    {3} scripts.bundle.js,scripts.bundle.js.map (scripts) 244 kB {5} [initial] [rendered]
chunk    {4} vendor.bundle.js,vendor.bundle.js.map (vendor) 2.75 MB [initial] [rendered]
chunk    {5} inline.bundle.js,inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in Maximum call stack size exceeded
webpack: Failed to compile.

$ng serve
** NG Live Development Server is running on http://localhost:4200 **
Hash: a73c4ecdb8222366629e
Time: 16536ms
chunk    {0} polyfills.bundle.js,inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in Maximum call stack size exceeded
webpack: Failed to compile.
webpack: Compiling...
Hash: 02fd7618c3e2de3db52e
Time: 9915ms
chunk    {0} 0.chunk.js,0.chunk.js.map 926 kB {1} {2} {3} {5} [rendered]
chunk    {1} 1.chunk.js,1.chunk.js.map 397 kB {0} {2} {3} {5} [rendered]
chunk    {2} 2.chunk.js,2.chunk.js.map 33.1 kB {0} {1} {3} {5} [rendered]
chunk    {3} 3.chunk.js,3.chunk.js.map 2.96 kB {0} {1} {2} {5} [rendered]
chunk    {4} polyfills.bundle.js,polyfills.bundle.js.map (polyfills) 405 kB {9} [initial] [rendered]
chunk    {5} main.bundle.js,main.bundle.js.map (main) 41.1 kB {8} [initial] [rendered]
chunk    {6} styles.bundle.js,styles.bundle.js.map (styles) 149 kB {9} [initial] [rendered]
chunk    {7} scripts.bundle.js,scripts.bundle.js.map (scripts) 244 kB {9} [initial] [rendered]
chunk    {8} vendor.bundle.js,vendor.bundle.js.map (vendor) 2.75 MB [initial] [rendered]
chunk    {9} inline.bundle.js,inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

解决方法

// App Module

import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ROUTER_CONfig } from './app.routing';

@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    browserModule,FormsModule,HttpModule,ROUTER_CONfig
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }


// App Routing

import { RouterModule,Routes } from '@angular/router';
import { AppComponent } from './app.component';

const ROUTER_DATA: Routes = [
    { path:'home',component: AppComponent },{ path:'lazy',loadChildren: './lazy/lazy.module#LazyModule' },{ path:'',redirectTo:'home',pathMatch: 'full'}
];

export const ROUTER_CONfig = RouterModule.forRoot(ROUTER_DATA);

//App Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}


// Lazy module


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyComponent } from './lazy.component';
import { ROUTER_CONfig } from './lazy.routing';

@NgModule({
  declarations: [
    LazyComponent
  ],imports: [
    CommonModule
  ],bootstrap: [LazyComponent]
})
export class LazyModule { }


// lazy Routing

import { RouterModule,Routes } from '@angular/router';
import { LazyComponent } from './lazy.component';

const ROUTER_DATA: Routes = [
    { path:'',component: LazyComponent }
];

export const ROUTER_CONfig = RouterModule.forRoot(ROUTER_DATA);

// lazy component

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-lazy',templateUrl: './lazy.component.html',styleUrls: ['./lazy.component.css']
})
export class LazyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

<!-- App HTML -->

<div [routerLink]="['/home']">Home</div>
<div [routerLink]="['/lazy']">Lazy</div>
<router-outlet></router-outlet>

<!-- lazy html -->

<p>
  lazy works!
</p>

解决方法

export const ROUTER_CONfig = RouterModule.forChild(ROUTER_DATA);

import { ROUTER_CONfig } from './lazy.routing';
... 

imports: [
    ROUTER_CONfig
  ]
})
export class LazyModule { }

组件类：

export class UserEditor implements OnInit {

    public userForm: FormGroup;
    userName: FormControl;
    firstName: FormControl;
    lastName: FormControl;
    email: FormControl;
    loginTypeId: FormControl;
    password: FormControl;
    confirmPassword: FormControl;
...

ngOnInit() {
    this.createFormControls();
    this.createForm();
    this.userForm.get('loginTypeId').valueChanges.subscribe(

            (loginTypeId: string) => {
                console.log("log this!");
                if (loginTypeId === "1") {
                    console.log("disable validators");
                    Validators.pattern('^[0-9]{5}(?:-[0-9]{4})?$')]);
                    this.userForm.get('password').setValidators([]);
                    this.userForm.get('confirmPassword').setValidators([]);

                } else if (loginTypeId === '2') {
                    console.log("enable validators");
                    this.userForm.get('password').setValidators([Validators.required,Validators.minLength(8)]);
                    this.userForm.get('confirmPassword').setValidators([Validators.required,Validators.minLength(8)]);

                }

                this.userForm.get('loginTypeId').updateValueAndValidity();

            }

        )
}
createFormControls() {
    this.userName = new FormControl('',[
        Validators.required,Validators.minLength(4)
    ]);
    this.firstName = new FormControl('',Validators.required);
    this.lastName = new FormControl('',Validators.required);
    this.email = new FormControl('',[
      Validators.required,Validators.pattern("[^ @]*@[^ @]*")
    ]);
    this.password = new FormControl('',[
       Validators.required,Validators.minLength(8)
    ]);
    this.confirmPassword = new FormControl('',Validators.minLength(8)
    ]);

}

createForm() {
 this.userForm = new FormGroup({
      userName: this.userName,name: new FormGroup({
        firstName: this.firstName,lastName: this.lastName,}),email: this.email,loginTypeId: this.loginTypeId,password: this.password,confirmPassword: this.confirmPassword
    });
}

但是,当我运行它时,我得到一个浏览器javascript错误

UserEditor.html:82 ERROR RangeError: Maximum call stack size exceeded
    at SafeSubscriber.tryCatcher (tryCatch.js:9)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscription.js.Subscription.unsubscribe (Subscription.js:68)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber.unsubscribe (Subscriber.js:124)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:242)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.SafeSubscriber.next (Subscriber.js:186)
    at Subscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber._next (Subscriber.js:127)
    at Subscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber.next (Subscriber.js:91)
    at EventEmitter.webpackJsonp.../../../../rxjs/_esm5/Subject.js.Subject.next (Subject.js:56)
    at EventEmitter.webpackJsonp.../../../core/esm5/core.js.EventEmitter.emit (core.js:4319)
    at FormControl.webpackJsonp.../../../forms/esm5/forms.js.AbstractControl.updateValueAndValidity (forms.js:3377)

“记录这个！”被重复记录,就像它被称为递归调用一样,这就是为什么它们是一个堆栈错误

如果我删除valueChanges.subscribe代码工作除了有条件地删除验证.

为什么递归调用valueChanges.subscribe？

this.userForm.get('loginTypeId').valueChanges.subscribe(
  (loginTypeId: string) => {
    ...
    this.userForm.get('loginTypeId').updateValueAndValidity(); <-- Triggers valueChanges!
}

我们使用的是Angular 6.1.1,我们正在使用生成构建,并启用了优化和构建优化.使用zone.js 0.8.26这是目前最新版本.

我该怎么调试呢？

我的基本HTML非常简单：

<body ng-app="checkinApp" ng-controller="GlobalCtrl">
    <nav-view></nav-view>
</body>

这是相关屏幕的路由配置：

app.config(function($stateProvider,$urlRouterProvider) {

    $stateProvider
    .state('event',{
        url: "/event",templateUrl: "templates/event.html",controller: "MainCtrl"
    })
    .state('event.chooseEvent',{
        url: "/choose",templateUrl: "templates/chooseEvent.html",controller: "MainCtrl"
    })
    .state('event.eventCheckin',{
        url: "/checkin",templateUrl: "templates/eventCheckin.html",controller: "MainCtrl"
    });

     // if none of the above are matched,go to this one
     $urlRouterProvider.otherwise("/event/choose");
});

只需使用上述路由配置启动应用程序就会导致错误,无需其他交互.

以下是我的看法……

event.html：

请注意< nav-view>< / nav-view>块,我期望子视图呈现.

<side-menus>

    <!-- page content -->
    <pane side-menu-content>
        <header>
            <buttonng-click="toggleMenu()"></button>
            <h1>Checkin</h1>
        </header>

        <nav-view></nav-view>

    </pane>

    <side-menu side="left">
        <content>navigation menu content here</content>
    </side-menu>

</side-menus>

eventCheckin.html：

<content has-header="true" on-refresh="refreshAttendees()">

    <!-- for pull to refresh -->
    <refresher></refresher>

    <ul>
        <li
            ng-repeat="person in attendees | orderBy:'firstname' | orderBy:'lastname'"
            item="person">
                {{person.lastname}},{{person.firstname}}
                <label>
                    <input type="checkBox" ng-checked="person.arrived" ng-click="toggleArrived(person)" />
                    <div>
                        <div></div>
                    </div>
                </label>
        </li>
    </ul>

</content>

chooseEvent.html：

<div><br/><br/><br/>Swipe right to choose an Event</div>

除了调用堆栈无限递归,我在控制台中没有得到任何其他错误.知道我做错了什么吗？

有一点需要指出的是,eventmenu状态有abstract：true,因为side菜单本身不是它自己的视图,而是视图的容器.

An abstract state can have child states but can not get activated itself. An ‘abstract’ state is simply a state that can’t be transitioned to. It is activated implicitly when one of its descendants are activated.

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#wiki-abstract-states

下面是使用侧面菜单的抽象状态的示例.

$stateProvider
      .state('eventmenu',abstract: true,templateUrl: "event-menu.html"
      })
      .state('eventmenu.home',{
        url: "/home",views: {
          'menuContent' :{
            templateUrl: "home.html"
          }
        }
      })
      .state('eventmenu.checkin',{
        url: "/check-in",views: {
          'menuContent' :{
            templateUrl: "check-in.html",controller: "CheckinCtrl"
          }
        }
      })
      .state('eventmenu.attendees',{
        url: "/attendees",views: {
          'menuContent' :{
            templateUrl: "attendees.html",controller: "AttendeesCtrl"
          }
        }
      })

对于标记,主< nav-view>是在身体的根部,< nav-bar>在< pane side-menu-content>内.请注意,Ionic使用< nav-view>而不是Angular UI路由器的< ui-view>因为Ionic的navView指令带有内置的导航和动画系统.

接下来,event-menu.html(这是一个抽象状态)有一个名为menuContent的子navView指令,这是所有其他状态将其视图插入的位置.

<div ng-controller="MainCtrl">       
  <nav-view></nav-view>
</div>

<script id="event-menu.html" type="text/ng-template">
  <side-menus>

    <pane side-menu-content>
      <nav-bar type="bar-positive"
               back-button-type="button-icon"
               back-button-icon="ion-ios7-arrow-back"></nav-bar>
      <nav-view name="menuContent"></nav-view>
    </pane> 

    <side-menu side="left">
      <header>
        <div>Left Menu</div>
      </header>
      <content has-header="true">
        <ul>
          <a href="#/event/check-in">Check-in</a>
          <a href="#/event/attendees">Attendees</a>
        </ul>
      </content>
    </side-menu>

  </side-menus>
</script>

我在这里整理了一个快速的代码：
http://codepen.io/ionic/pen/EtbrF

此外,在编写本文时,codepen使用每晚构建,因为您的演示的某些要求尚未发布.

希望有所帮助！