块 {main} main.js, main.js.map (main) 2.1 kB [initial] [rendered] 无法读取角度未定义的属性“map" [英] chunk {main} main.js, main.js.map (main) 2.1 kB [initial] [rendered] Cannot read property 'map' of undefined for angular

查看：66
本文介绍了块 {main} main.js, main.js.map (main) 2.1 kB [initial] [rendered] 无法读取角度未定义的属性“map"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

以上是我得到的错误.我无法解决它，因为我没有进入它发生的文件.

以下是我的component.ts文件:

<div class="登录页面"><img src="./assets/logo.png" id="logo"><form [formGroup]="登录"><mat-form-field id="email"><input matInput placeholder="@meltwater.com" formControlName="emailFormControl"><mat-h​​int>输入您的电子邮件</mat-h​​int><mat-error *ngIf="emailInput.hasError('email') && !emailInput.hasError('required')">请输入有效的电子邮件地址</mat-error></mat-form-field><br><mat-form-field id="密码"><input matInput placeholder="password" [type]="hide ? 'password' : 'text'" formControlName="passwordFormControl" required><mat-icon matSuffix (click)="hide = !hide">{{hide ?'visibility_off' : 'visibility'}}</mat-icon><mat-h​​int *ngIf="!passwordInput.value">输入您的密码</mat-h​​int></mat-form-field><br><mat-checkbox>记住我</mat-checkbox><br><button id="loginButton" mat-raised-button routerLink='/login' routerLinkActive='active'>登录</button><br><p class="message">使用公司凭据?<a href="#">使用 SSO</a></p> 登录<a href="#">忘记密码?</a></表单>

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

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

import { NgModule } from '@angular/core';从'@angular/router' 导入 { Routes, RouterModule };const 路由:路由 = [];@NgModule({进口:[RouterModule.forRoot(routes)]，出口:[路由器模块]})导出类 AppRoutingModule { }

这是我的 index.html

<html lang="zh-cn"><头><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"><身体><app-root></app-root></html>

这将是我的 main.ts 

import { enableProdMode } from '@angular/core';从'@angular/platform-b​​rowser-dynamic'导入{platformBrowserDynamic}；从 './app/app.module' 导入 { AppModule };从'./environments/environment'导入{环境}；如果(环境.生产){enableProdMode();}platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

以下是完整的错误:

0% 编译编译@angular/core : es2015 作为 esm201510% 构建 3/3 模块 0 活动ℹwds":项目运行在 http://localhost:4200/webpack-dev-server/ℹ 「wds」:webpack 输出来自/ℹ 「wds」:404s 将回退到//index.htmlchunk {main} main.js, main.js.map (main) 2.1 kB [initial] [rendered]块 {polyfills} polyfills.js, polyfills.js.map (polyfills) 127 kB [initial] [rendered]块 {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]块{styles}styles.js，styles.js.map(样式)177 kB [initial] [rendered]块 {vendor} vendor.js, vendor.js.map (vendor) 340 kB [initial] [rendered]日期:2020-03-25T14:38:50.300Z - 哈希:5926a3d885deed4ad147 - 时间:3212ms无法读取未定义的属性地图"中的错误** Angular Live Development Server 正在侦听 localhost:4200，在 http://localhost:4200/上打开浏览器 **ℹ 「wdm」:编译失败.

解决方案

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

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

不要忘记禁用 prod 环境的源映射

The above is the error I am getting. I am not able to resolve it because I am not getting in which file it is happening.

The following is my component.ts file:

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

This is picture inserted is the error. I have not added any map element to any of my files.

The following is my 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 { }

This is my 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>

This will be my 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));

Following is the full error:

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.

解决方案

On your chrome or your browser's debugger , select pause on caught exceptions. It will stop at this place where you are getting this error.

Better way to do it would be to enable source maps. I am pretty sure the bundler that you are using would have support to generate javascript source maps. For angular I think you can find out how to enable source maps on the net, might be just a small config change. Enable it , build your application , run it on chrome and select pause on caught exceptions. It will stop at the exact line and it will show the file where this error has occured.

Don't forget to disable source maps for prod environments

这篇关于块 {main} main.js, main.js.map (main) 2.1 kB [initial] [rendered] 无法读取角度未定义的属性“map"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆