块 {main} main.js, main.js.map (main) 2.1 kB [初始] [呈现] 无法读取属性 'map' 的未定义 angular

Question

以上是我遇到的错误。我无法解决它，因为我不知道它发生在哪个文件中。

以下是我的component.ts文件：

<div class="loginBody">
    <div class="login-page">
        <img src="./assets/logo.png" id="logo">
        <form [formGroup]="signin">

            <mat-form-field id="email">

                <input matInput placeholder="@meltwater.com" formControlName="emailFormControl">
                <mat-hint>Enter your email</mat-hint>
                <mat-error *ngIf="emailInput.hasError('email') && !emailInput.hasError('required')">
                    Please enter a valid email address
                </mat-error>

            </mat-form-field>
            <br>
            <mat-form-field id="password">
                <input matInput placeholder="password" [type]="hide ? 'password' : 'text'" formControlName="passwordFormControl" required>
                <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
                <mat-hint *ngIf="!passwordInput.value">Enter your password</mat-hint>
            </mat-form-field>
            <br>
            <mat-checkbox>Remember me</mat-checkbox>
            <br>
            <button id="loginButton" mat-raised-button routerLink='/login' routerLinkActive='active'>LOG IN</button>
            <br>
            <p class="message">Using company credentials? <a href="#"> Log in with SSO</a></p>
            <a href="#">Forgot password?</a>

        </form>

    </div>

</div>

这是图片插入错误。我没有在我的任何文件中添加任何地图元素。

以下是我的app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这是我的index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>AppliedInsightFrontend</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
    <app-root></app-root>
</body>

</html>

这将是我的 main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

以下是完整的错误：

0% compiling
Compiling @angular/core : es2015 as esm2015
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 2.1 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 127 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 177 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 340 kB [initial] [rendered]
Date: 2020-03-25T14:38:50.300Z - Hash: 5926a3d885deed4ad147 - Time: 3212ms

ERROR in Cannot read property 'map' of undefined
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Failed to compile.

Answer 1

很多时候，依赖组件不会导入它们需要的一切。

从这个开始：ng update @angular/material

如果这不起作用... 删除项目中的 npm 缓存（或文件夹本身），然后从 package.json 的文件夹位置输入 npm install。

如果这不起作用，那么您可以尝试将 ng 更新到最新版本（8 或 9）。

如果这不起作用，那么您可以尝试 npm 更新 @angular/material@^X.Y.Y

Answer 2

在您的 chrome 或浏览器的调试器上，select 在捕获异常时暂停。它将在您收到此错误的地方停止。

更好的方法是启用源地图。我很确定您使用的捆绑器会支持生成 javascript 源映射。对于 angular，我认为您可以在网上找到如何启用源地图，可能只是一个小的配置更改。启用它，构建您的应用程序，运行它在 chrome 和 select 捕获异常时暂停。它将停在确切的行，并显示发生此错误的文件。

不要忘记为生产环境禁用源映射

Answer 3

我解决了：

正在寻找来自 http 的任何回复并获得一些已知的 angular 示例

this.registerService.onRegister(data).subscribe(resp => {
            if (resp.header.httpStatus !== 200) {
                this.showErrors(resp.object);
                return;
            } 
            console.log(this.register);
        });

在这种情况下 header 和 httpStatus 不为人知 angular 我只是在上面添加了 // @ts-ignore 。

成为

 this.registerService.onRegister(data).subscribe(resp => {
              // @ts-ignore
                if (resp.header.httpStatus !== 200) {
                    this.showErrors(resp.object);
                    return;
                } 
                console.log(this.register);
            });

对我有用

块 {main} main.js, main.js.map (main) 2.1 kB [初始] [呈现] 无法读取属性 'map' 的未定义 angular

chunk {main} main.js, main.js.map (main) 2.1 kB [initial] [rendered] Cannot read property 'map' of undefined for angular

typescript

mean-stack

angular

块 {main} main.js, main.js.map (main) 2.1 kB [初始] [呈现] 无法读取 属性 'map' 的未定义 angular

chunk {main} main.js, main.js.map (main) 2.1 kB [initial] [rendered] Cannot read property 'map' of undefined for angular

typescript

mean-stack

angular

块 {main} main.js, main.js.map (main) 2.1 kB [初始] [呈现] 无法读取属性 'map' 的未定义 angular