angular 5：錯誤：無法解析“ @ angular / platform-b​​rowser / src / browser”

Question

我試圖在Angular 5下創建一個注冊表單。這樣做時，出現錯誤：

./src/app/pages/auth-admin/auth-admin.module.ts找不到模塊：錯誤：無法解析'@ angular / platform-b​​rowser / src / browser'

我該如何解決這個問題？

TIA

這是我在角下運行的東西

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

目錄設置如下：

錯誤信息

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

來自JavaScript端的錯誤消息

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 (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 (<anonymous>)
    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 (<anonymous>)
    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 <anonymous>
defaultErrorLogger @ core.js:1427

[... snip ...]

admin-register-form.component.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.component.ts

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" }

  }
}

auth-admin.module.ts

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 { }

Answer 1

應在AppModule中一次導入BrowserModule 。 您不需要在子模塊中再次導入它，應該像這樣引用

import { BrowserModule } from '@angular/platform-browser';

此外， ngClass指令構成的一部分CommonModule ，這似乎不是在你要導入AuthAdminModule

@NgModule({
  imports: [
    ...
    CommonModule
  ],
  declarations: [ ... ] 
})
export class AuthAdminModule { }

Answer 2

您在auth-admin.module.ts中錯誤地導入了BrowserModule

import { BrowserModule } from '@angular/platform-browser';

此外，對於功能模塊，可以改為導入CommonModule模塊。 僅在app.module.ts中需要BrowserModule 。

import { CommonModule } from '@angular/common';
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    CommonModule,
    ...
  ]
})
export class AuthAdminModule {}