Tag Archives: Angular5

On the problem of inert loading error of angular5

Previously, in order to test a module optimization problem, an Ng5 scaffold demo was quickly built with angular cli. When applying the lazy loading function, it was found that the browser reported the following errors:


ERROR Error: Uncaught (in promise): TypeError: __webpack_require__.e is not a function
TypeError: __webpack_require__.e is not a function
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), :15:29)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6554)
    at SystemJsNgModuleLoader.load (core.js:6538)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at ScalarObservable._subscribe (ScalarObservable.js:51)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), :15:29)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6554)
    at SystemJsNgModuleLoader.load (core.js:6538)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at ScalarObservable._subscribe (ScalarObservable.js:51)
    at resolvePromise (zone.js:809)
    at resolvePromise (zone.js:775)
    at eval (zone.js:858)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4736)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1517)

then reconfirmed several times the configuration of the feature module, found that no problem, so began to search for bug source, here had to make complaints about the technology community in the country, too few original, often a problem search, the search engine several pages are the same person answer copy paste version, domestic search no fruit, had to turn out to find. Finally, a scheme was found on stackoverflow and a small version of angular/cli was reduced, as follows:


npm remove -g @angular/cli
npm install -g @angular/[email protected]
npm remove @angular/cli
npm add @angular/[email protected] --save-dev

It’s OK after the operation, but the following problems can’t be solved. I’ll upgrade the version to @ angular here/ [email protected] After (global and local), it is found that the previous problems no longer appear after running again (I hope someone can help explain it)

Angular5 Error: ngModel cannot be used to register form controls with a parent formGroup directive

An error occurred while creating a form:

The reason is that the formgroup instruction is used in the outermost form, but the ngmodel instruction is used in one of the following input elements, but the formcontrol instruction or formcontrolname attribute is not added

In other words, if formgroup is used in the form, all input elements contained in the form need to define a formcontrol. If not, an error will be reported

 1   <form [formGroup]="form">
 2     <mat-form-field>
 3       <input matInput placeholder="IP(SNMP)" [formControl]="snmpIpCtrl" required>
 4       <mat-error *ngIf="snmpIpCtrl.hasError('required')">IP(SNMP)不能为空</mat-error>
 5       <mat-error *ngIf="snmpIpCtrl.hasError('pattern')">请输入有效的IP地址</mat-error>
 6     </mat-form-field>
 7     
 8     <div>
 9       <p>是否支持Netconf</p>
10       <mat-radio-group [(ngModel)]="netconfFlag">
11         <mat-radio-button value="0" color="primary">支持</mat-radio-button>
12         <mat-radio-button value="1" color="primary">不支持</mat-radio-button>
13       </mat-radio-group>
14     </div>
15 </form>

Solution 1:

Add the formcontrol directive or formcontrolname attribute to the input element

1 <div>
2       <p>Whether Netconf is supported or not</p>
3       <mat-radio-group [(ngModel)]="netconfFlag" [formControl]="netconfFlagCtrl">
4         <mat-radio-button value="0" color="primary">supported</mat-radio-button>
5         <mat-radio-button value="1" color="primary">NOT supported</mat-radio-button>
6       </mat-radio-group>
7 </div>

The formcontrol for verification is defined in the corresponding component.ts

Solution 2:

Instead of adding formcontrol directive or formcontrolname attribute, add ngmodeloptions directive

Note that ngmodel options must be used with ngmodel

1     <div>
2       <p>Whether Netconf is supported or not</p>
3       <mat-radio-group [(ngModel)]="netconfFlag" [ngModelOptions]="{standalone: true}">
4         <mat-radio-button value="0" color="primary">supported</mat-radio-button>
5         <mat-radio-button value="1" color="primary">NOT supported</mat-radio-button>
6       </mat-radio-group>
7     </div>