title: angular 5 : Error: Can't resolve '@angular/platform-browser/src/browser'
body: <p>I am trying to create a Registration form under Angular 5. When doing so, I get an error:</p>
  
  <blockquote>
    <p>./src/app/pages/auth-admin/auth-admin.module.ts Module not found:
    Error: Can't resolve '@angular/platform-browser/src/browser'</p>
  </blockquote>
  
  <p>How can I resolve this problem?</p>
  
  <p>TIA</p>
  
  <p><strong>this is what I am running with under angular</strong></p>
  
  <pre><code>Angular CLI: 1.6.1
  Node: 8.9.4
  OS: win32 x64
  Angular: 5.1.1
  ... animations, common, compiler, compiler-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
  </code></pre>
  
  <p>The directory setup is as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/qLqBy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qLqBy.png" alt="enter image description here"></a></p>
  
  <p><strong>error message</strong></p>
  
  <pre><code>Failed to compile.
  
  ./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
  </code></pre>
  
  <p><strong>error message from javascript side</strong></p>
  
  <pre><code>ERROR Error: Uncaught (in promise): Error: Template parse errors:
  Can't bind to 'ngClass' since it isn't a known property of 'input'. ("            &lt;input type="text"  [(ngModel)]="firstname" #userFirstname="ngModel"   
                  [ERROR -&gt;][ngClass]="{'is-invalid' : userFirstname.errors &amp;&amp; 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'. ("            &lt;input type="text"  [(ngModel)]="firstname" #userFirstname="ngModel"   
                  [ERROR -&gt;][ngClass]="{'is-invalid' : userFirstname.errors &amp;&amp; userFirstname.touched }" 
                  id="firs"): ng:///AuthAdminModule/AdminRegisterFormComponent.html@19:16
      at syntaxError (compiler.js:485)
      at TemplateParser.parse (compiler.js:24631)
      at JitCompiler._parseTemplate (compiler.js:34442)
      at JitCompiler._compileTemplate (compiler.js:34417)
      at eval (compiler.js:34318)
      at Set.forEach (&lt;anonymous&gt;)
      at JitCompiler._compileComponents (compiler.js:34318)
      at eval (compiler.js:34188)
      at Object.then (compiler.js:474)
      at JitCompiler._compileModuleAndComponents (compiler.js:34187)
      at syntaxError (compiler.js:485)
      at TemplateParser.parse (compiler.js:24631)
      at JitCompiler._parseTemplate (compiler.js:34442)
      at JitCompiler._compileTemplate (compiler.js:34417)
      at eval (compiler.js:34318)
      at Set.forEach (&lt;anonymous&gt;)
      at JitCompiler._compileComponents (compiler.js:34318)
      at eval (compiler.js:34188)
      at Object.then (compiler.js:474)
      at JitCompiler._compileModuleAndComponents (compiler.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 &lt;anonymous&gt;
  defaultErrorLogger @ core.js:1427
  
  [... snip ...]
  </code></pre>
  
  <p><strong>admin-register-form.component.html</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col"&gt;&lt;/div&gt;
      &lt;div class="col-md-8 "&gt;
        &lt;form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)"&gt;
          &lt;!-- &lt;form (submit)="onSubmit($event)" [formGroup]="form"&gt; --&gt;
          &lt;!-- &lt;form (ngSubmit)="onSubmit()" &gt; --&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-xs-12 col-sm-6 col-md-6"&gt;
  
              &lt;!-- set up first name --&gt;
              &lt;div class="form-group"&gt;
                &lt;div class="input"&gt;
                  &lt;label&gt;First Name&lt;/label&gt;
                  &lt;input type="text"  [(ngModel)]="firstname" #userFirstname="ngModel"   
                  [ngClass]="{'is-invalid' : userFirstname.errors &amp;&amp; userFirstname.touched }" 
                  id="firstname" class="form-control input-lg"  name="firstname"  required minlength="2" tabindex="1"&gt;
                &lt;/div&gt;
  
                &lt;div class="invalid-feedback"&gt;
                  Please enter your First Name
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
  [... snip ...]
  </code></pre>
  
  <p><strong>admin-register-form.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, ViewEncapsulation } from '@angular/core';
  import { HttpErrorResponse } from '@angular/common/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.component.html',
    styleUrls: ['./admin-register-form.component.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":"jwoo@kickboxing.com",  "password":"123456", "firstname":"jason", "lastname":"wu" }
  
    }
  }
  </code></pre>
  
  <p><strong>auth-admin.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { AdminLoginComponent } from './admin-login/admin-login.component';
  import { AdminRegisterComponent } from './admin-register/admin-register.component';
  import { AdminDataComponent } from './admin-data/admin-data.component';
  import { RouterModule } from '@angular/router';
  import { AdminHeaderComponent } from './admin-header/admin-header.component';
  import { AdminFooterComponent } from './admin-footer/admin-footer.component';
  import { AuthAdminComponent } from 'app/pages/auth-admin/auth-admin.component';
  import { AdminRegisterFormComponent } from './admin-register-form/admin-register-form.component';
  
  import { FormsModule }   from '@angular/forms';
  import { NgClass } from '@angular/common';
  import { BrowserModule } from '@angular/platform-browser/src/browser';
  
  
  
  export const routes = [
    { path:'', redirectTo:'admin-login-main', pathMatch:'full' },
    { path: 'admin-login', component: AdminLoginComponent, pathMatch: 'full' },
    { path: 'admin-login-main', component: AuthAdminComponent, pathMatch: 'full' },
    { path: 'admin-register', component: AdminRegisterComponent, pathMatch: 'full' },
    { path: 'admin-data', component: AdminDataComponent, pathMatch: 'full' }
  ];
  
  
  @NgModule({
    imports: [
      BrowserModule,
      FormsModule,
      RouterModule.forChild(routes)
    ],
    declarations: [AdminLoginComponent, AdminRegisterComponent, 
      AdminDataComponent, AdminHeaderComponent, 
      AdminFooterComponent, AdminHeaderComponent, AdminFooterComponent, 
      AuthAdminComponent, AdminRegisterFormComponent]
  })
  export class AuthAdminModule { }
  </code></pre>