I am trying to create a Registration form under Angular 5. When doing so, I get an error:
./src/app/pages/auth-admin/auth-admin.module.ts Module not found: Error: Can't resolve '@angular/platform-browser/src/browser'
How can I resolve this problem?
TIA
this is what I am running with under angular
Angular CLI: 1.6.1
Node: 8.9.4
OS: win32 x64
Angular: 5.1.1
... animations, mon, piler, piler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.6.1
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.23
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.13
typescript: 2.4.2
webpack: 3.10.0
The directory setup is as follows:
error message
Failed to pile.
./src/app/pages/auth-admin/auth-admin.module.ts
Module not found: Error: Can't resolve '@angular/platform-browser/src/browser' in 'C:\WORK\AppAngularDev\ContractorsClub\src\app\pages\auth-admin'
@ ./src/app/pages/auth-admin/auth-admin.module.ts 19:0-70
@ ./src/$$_lazy_route_resource lazy
@ ./node_modules/@angular/core/esm5/core.js
@ ./src/main.ts
@ multi webpack-dev-server/client?:0 ./src/main.ts
error message from javascript side
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngClass' since it isn't a known property of 'input'. (" <input type="text" [(ngModel)]="firstname" #userFirstname="ngModel"
[ERROR ->][ngClass]="{'is-invalid' : userFirstname.errors && userFirstname.touched }"
id="firs"): ng:///AuthAdminModule/AdminRegisterFormComponent.html@19:16
Error: Template parse errors:
Can't bind to 'ngClass' since it isn't a known property of 'input'. (" <input type="text" [(ngModel)]="firstname" #userFirstname="ngModel"
[ERROR ->][ngClass]="{'is-invalid' : userFirstname.errors && userFirstname.touched }"
id="firs"): ng:///AuthAdminModule/AdminRegisterFormComponent.html@19:16
at syntaxError (piler.js:485)
at TemplateParser.parse (piler.js:24631)
at JitCompiler._parseTemplate (piler.js:34442)
at JitCompiler._pileTemplate (piler.js:34417)
at eval (piler.js:34318)
at Set.forEach (<anonymous>)
at JitCompiler._pileComponents (piler.js:34318)
at eval (piler.js:34188)
at Object.then (piler.js:474)
at JitCompiler._pileModuleAndComponents (piler.js:34187)
at syntaxError (piler.js:485)
at TemplateParser.parse (piler.js:24631)
at JitCompiler._parseTemplate (piler.js:34442)
at JitCompiler._pileTemplate (piler.js:34417)
at eval (piler.js:34318)
at Set.forEach (<anonymous>)
at JitCompiler._pileComponents (piler.js:34318)
at eval (piler.js:34188)
at Object.then (piler.js:474)
at JitCompiler._pileModuleAndComponents (piler.js:34187)
at resolvePromise (zone.js:824)
at resolvePromise (zone.js:795)
at eval (zone.js:873)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.js:4744)
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:192)
at drainMicroTaskQueue (zone.js:602)
at <anonymous>
defaultErrorLogger @ core.js:1427
[... snip ...]
admin-register-formponent.html
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col-md-8 ">
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
<!-- <form (submit)="onSubmit($event)" [formGroup]="form"> -->
<!-- <form (ngSubmit)="onSubmit()" > -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<!-- set up first name -->
<div class="form-group">
<div class="input">
<label>First Name</label>
<input type="text" [(ngModel)]="firstname" #userFirstname="ngModel"
[ngClass]="{'is-invalid' : userFirstname.errors && userFirstname.touched }"
id="firstname" class="form-control input-lg" name="firstname" required minlength="2" tabindex="1">
</div>
<div class="invalid-feedback">
Please enter your First Name
</div>
</div>
</div>
[... snip ...]
admin-register-formponent.ts
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { HttpErrorResponse } from '@angular/mon/http';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { ElementRef } from '@angular/core/src/linker/element_ref';
// import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-admin-register-form',
templateUrl: './admin-register-formponent.html',
styleUrls: ['./admin-register-formponent.scss'],
encapsulation: ViewEncapsulation.None
})
export class AdminRegisterFormComponent implements OnInit {
firstname = '';
lastname = '';
email = '';
username = '';
password = '';
passwordconf = '';
constructor() { }
ngOnInit() {
}
ngAfterViewInit() {
document.getElementById('preloader').classList.add('hide');
}
onSubmit(form: ElementRef) {
console.log("form was submitted");
console.log(form);
// { "username":"jwoo", "email":"[email protected]", "password":"123456", "firstname":"jason", "lastname":"wu" }
}
}
auth-admin.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/mon';
import { AdminLoginComponent } from './admin-login/admin-loginponent';
import { AdminRegisterComponent } from './admin-register/admin-registerponent';
import { AdminDataComponent } from './admin-data/admin-dataponent';
import { RouterModule } from '@angular/router';
import { AdminHeaderComponent } from './admin-header/admin-headerponent';
import { AdminFooterComponent } from './admin-footer/admin-footerponent';
import { AuthAdminComponent } from 'app/pages/auth-admin/auth-adminponent';
import { AdminRegisterFormComponent } from './admin-register-form/admin-register-formponent';
import { FormsModule } from '@angular/forms';
import { NgClass } from '@angular/mon';
import { BrowserModule } from '@angular/platform-browser/src/browser';
export const routes = [
{ path:'', redirectTo:'admin-login-main', pathMatch:'full' },
{ path: 'admin-login', ponent: AdminLoginComponent, pathMatch: 'full' },
{ path: 'admin-login-main', ponent: AuthAdminComponent, pathMatch: 'full' },
{ path: 'admin-register', ponent: AdminRegisterComponent, pathMatch: 'full' },
{ path: 'admin-data', ponent: AdminDataComponent, pathMatch: 'full' }
];
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forChild(routes)
],
declarations: [AdminLoginComponent, AdminRegisterComponent,
AdminDataComponent, AdminHeaderComponent,
AdminFooterComponent, AdminHeaderComponent, AdminFooterComponent,
AuthAdminComponent, AdminRegisterFormComponent]
})
export class AuthAdminModule { }
I am trying to create a Registration form under Angular 5. When doing so, I get an error:
./src/app/pages/auth-admin/auth-admin.module.ts Module not found: Error: Can't resolve '@angular/platform-browser/src/browser'
How can I resolve this problem?
TIA
this is what I am running with under angular
Angular CLI: 1.6.1
Node: 8.9.4
OS: win32 x64
Angular: 5.1.1
... animations, mon, piler, piler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.6.1
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.23
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.13
typescript: 2.4.2
webpack: 3.10.0
The directory setup is as follows:
error message
Failed to pile.
./src/app/pages/auth-admin/auth-admin.module.ts
Module not found: Error: Can't resolve '@angular/platform-browser/src/browser' in 'C:\WORK\AppAngularDev\ContractorsClub\src\app\pages\auth-admin'
@ ./src/app/pages/auth-admin/auth-admin.module.ts 19:0-70
@ ./src/$$_lazy_route_resource lazy
@ ./node_modules/@angular/core/esm5/core.js
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
error message from javascript side
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngClass' since it isn't a known property of 'input'. (" <input type="text" [(ngModel)]="firstname" #userFirstname="ngModel"
[ERROR ->][ngClass]="{'is-invalid' : userFirstname.errors && userFirstname.touched }"
id="firs"): ng:///AuthAdminModule/AdminRegisterFormComponent.html@19:16
Error: Template parse errors:
Can't bind to 'ngClass' since it isn't a known property of 'input'. (" <input type="text" [(ngModel)]="firstname" #userFirstname="ngModel"
[ERROR ->][ngClass]="{'is-invalid' : userFirstname.errors && userFirstname.touched }"
id="firs"): ng:///AuthAdminModule/AdminRegisterFormComponent.html@19:16
at syntaxError (piler.js:485)
at TemplateParser.parse (piler.js:24631)
at JitCompiler._parseTemplate (piler.js:34442)
at JitCompiler._pileTemplate (piler.js:34417)
at eval (piler.js:34318)
at Set.forEach (<anonymous>)
at JitCompiler._pileComponents (piler.js:34318)
at eval (piler.js:34188)
at Object.then (piler.js:474)
at JitCompiler._pileModuleAndComponents (piler.js:34187)
at syntaxError (piler.js:485)
at TemplateParser.parse (piler.js:24631)
at JitCompiler._parseTemplate (piler.js:34442)
at JitCompiler._pileTemplate (piler.js:34417)
at eval (piler.js:34318)
at Set.forEach (<anonymous>)
at JitCompiler._pileComponents (piler.js:34318)
at eval (piler.js:34188)
at Object.then (piler.js:474)
at JitCompiler._pileModuleAndComponents (piler.js:34187)
at resolvePromise (zone.js:824)
at resolvePromise (zone.js:795)
at eval (zone.js:873)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.js:4744)
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:192)
at drainMicroTaskQueue (zone.js:602)
at <anonymous>
defaultErrorLogger @ core.js:1427
[... snip ...]
admin-register-form.ponent.html
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col-md-8 ">
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
<!-- <form (submit)="onSubmit($event)" [formGroup]="form"> -->
<!-- <form (ngSubmit)="onSubmit()" > -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<!-- set up first name -->
<div class="form-group">
<div class="input">
<label>First Name</label>
<input type="text" [(ngModel)]="firstname" #userFirstname="ngModel"
[ngClass]="{'is-invalid' : userFirstname.errors && userFirstname.touched }"
id="firstname" class="form-control input-lg" name="firstname" required minlength="2" tabindex="1">
</div>
<div class="invalid-feedback">
Please enter your First Name
</div>
</div>
</div>
[... snip ...]
admin-register-form.ponent.ts
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { HttpErrorResponse } from '@angular/mon/http';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { ElementRef } from '@angular/core/src/linker/element_ref';
// import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-admin-register-form',
templateUrl: './admin-register-form.ponent.html',
styleUrls: ['./admin-register-form.ponent.scss'],
encapsulation: ViewEncapsulation.None
})
export class AdminRegisterFormComponent implements OnInit {
firstname = '';
lastname = '';
email = '';
username = '';
password = '';
passwordconf = '';
constructor() { }
ngOnInit() {
}
ngAfterViewInit() {
document.getElementById('preloader').classList.add('hide');
}
onSubmit(form: ElementRef) {
console.log("form was submitted");
console.log(form);
// { "username":"jwoo", "email":"[email protected]", "password":"123456", "firstname":"jason", "lastname":"wu" }
}
}
auth-admin.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/mon';
import { AdminLoginComponent } from './admin-login/admin-login.ponent';
import { AdminRegisterComponent } from './admin-register/admin-register.ponent';
import { AdminDataComponent } from './admin-data/admin-data.ponent';
import { RouterModule } from '@angular/router';
import { AdminHeaderComponent } from './admin-header/admin-header.ponent';
import { AdminFooterComponent } from './admin-footer/admin-footer.ponent';
import { AuthAdminComponent } from 'app/pages/auth-admin/auth-admin.ponent';
import { AdminRegisterFormComponent } from './admin-register-form/admin-register-form.ponent';
import { FormsModule } from '@angular/forms';
import { NgClass } from '@angular/mon';
import { BrowserModule } from '@angular/platform-browser/src/browser';
export const routes = [
{ path:'', redirectTo:'admin-login-main', pathMatch:'full' },
{ path: 'admin-login', ponent: AdminLoginComponent, pathMatch: 'full' },
{ path: 'admin-login-main', ponent: AuthAdminComponent, pathMatch: 'full' },
{ path: 'admin-register', ponent: AdminRegisterComponent, pathMatch: 'full' },
{ path: 'admin-data', ponent: AdminDataComponent, pathMatch: 'full' }
];
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forChild(routes)
],
declarations: [AdminLoginComponent, AdminRegisterComponent,
AdminDataComponent, AdminHeaderComponent,
AdminFooterComponent, AdminHeaderComponent, AdminFooterComponent,
AuthAdminComponent, AdminRegisterFormComponent]
})
export class AuthAdminModule { }
The BrowserModule should be imported once within the AppModule. You don't need to import it again in a child module, and should be referenced like
import { BrowserModule } from '@angular/platform-browser';
Also, the ngClass directive forms part of the CommonModule, which does not seem to be imported in your AuthAdminModule
@NgModule({
imports: [
...
CommonModule
],
declarations: [ ... ]
})
export class AuthAdminModule { }
You have wrongly imported BrowserModule in your auth-admin.module.ts
import { BrowserModule } from '@angular/platform-browser';
Further, for feature modules, you can import CommonModule module instead. BrowserModule is only required in the app.module.ts.
import { CommonModule } from '@angular/mon';
@NgModule({
declarations: [
...
],
imports: [
CommonModule,
...
]
})
export class AuthAdminModule {}