Angular serve fails because of Unexpected character '#' which is not in my source code

user_11090439 0
Viewed 961

When I try to build by angular app I get this error :

ERROR in ./node_modules/blocking-proxy/built/lib/bin.js 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> #!/usr/bin/env node
| "use strict";
| Object.defineProperty(exports, "__esModule", { value: true });

Is there a way to fix it? I already deleted my node_modules folder but it didn't help.

There seems to be a problem with this component:

tree.component.ts :

import { Component, Input, Output } from '@angular/core';
import { EventEmitter } from 'protractor';

@Component({
    selector: 'app-tree',
    templateUrl: './tree.component.html',
    styleUrls: ['./tree.component.css']
})
/** wkz component*/
export class TreeComponent {
  @Input() wkz;
  @Output() notify = new EventEmitter();
    /** wkz ctor */
    constructor() {

    }
}

tree.component.html

<div> test</div>

tree.component.css

a{
    color:black;
}

This component is used nowhere, only referenced in my app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { TreeComponent } from './tree/tree.component';
@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
angular
3 Answers

You have imported EventEmitter from protactor which throws error while building.

import { Component,EventEmitter,OnInit, Input, Output} from '@angular/core';

This usually happens when you try to use the dependencies without importing. Your code Editor tries to add the imports which it finds for quick fix.

@Viswanatha Swamy answer is also same. Just I have imported all the dependencies in one line

user_85161550

@J Doe, Good morning. Could you please display your Folder Structure. Also what html files exist? Many thanks.

PS: As I have less than 50 points, I cannot directly add the comment to your query.

Sample Code

import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';
import { Output, EventEmitter } from '@angular/core';
import { ProductDto } from '../interfaces/ProductDto';

@Component({
  selector: 'app-product-alerts',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
export class ProductAlertsComponent implements OnInit {

  @Input() product: ProductDto;
  @Output() notifyUser = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }

}
user_36561140

Your import statement is wrong.

Your import:

import {EventEmitter} from 'protractor';

The right import:

import {EventEmitter} from '@angular/core';
user_141772710
Related