Angular代码运行报错求助：Unexpected token等语法错误排查

Hey there! It looks like you’re mixing up AngularJS (1.x) syntax with modern Angular (2+) component structure, which is why you’re hitting all those frustrating errors. Let’s break down what’s wrong and fix your code step by step.

Why You’re Seeing Those Errors #

Let’s unpack each error message to understand the root issues:

• Unexpected token / Declaration or statement expected: You’re using var inside an Angular component class, which isn’t allowed. Plus, ('app', ['ngAnimate']) uses the comma operator incorrectly—this doesn’t declare an Angular module like you intended, and it’s invalid syntax here.
• A constructor, method, accessor, or property was expected: Angular component classes can only contain constructors, methods, properties, or accessors. You can’t directly run code like app.controller(...) inside the class body.
• Left side of comma operator is unused and has no side effects: The ('app', ['ngAnimate']) line evaluates the string 'app' (which does nothing) and returns ['ngAnimate']—this is a useless expression that throws an error.

Corrected Modern Angular (2+) Code #

If you’re learning modern Angular, here’s how to rewrite your component properly using Angular’s native component structure:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <!-- Template for displaying boxes -->
    <div *ngFor="let box of boxes; let i = index" 
         (click)="selectBox(box, i)"
         class="box-container">
      <h3>{{ box.name }}</h3>
      <img [src]="box.image" alt="{{ box.name }}">
    </div>

    <button (click)="clearSelection()" class="clear-btn">Clear Selection</button>

    <!-- Display selected item -->
    <div *ngIf="selected.length > 0" class="selected-info">
      Selected: {{ selected[0].item.name }} (Position {{ selected[0].position }})
    </div>
  `,
  styles: [`
    .box-container { 
      display: inline-block; 
      margin: 10px; 
      cursor: pointer; 
      border: 2px solid transparent;
    }
    .box-container:hover { border-color: #007bff; }
    .box-container img { 
      width: 150px; 
      height: 150px; 
      object-fit: cover; 
    }
    .clear-btn { 
      margin: 20px 0; 
      padding: 8px 16px; 
      background: #dc3545;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .selected-info { 
      padding: 10px; 
      background: #f8f9fa; 
      border-radius: 4px;
    }
  `]
})
export class AppComponent {
  // Define your boxes as a class property
  boxes = [
    { name: 'Friends', image: 'https://source.unsplash.com/uAgLGG1WBd4/900x900' },
    { name: 'Free', image: 'https://source.unsplash.com/Cp-LUHPRpWM/900x900' },
    { name: 'Explore', image: 'https://source.unsplash.com/7BjmDICVloE/900x900' },
    { name: 'Vast', image: 'https://source.unsplash.com/WLUHO9A_xik/900x900' },
    { name: 'Playful', image: 'https://source.unsplash.com/b2-fBVrfx0o/900x900' },
    { name: 'Grand', image: 'https://source.unsplash.com/Ixp4YhCKZkI/900x900' },
    { name: 'Mist', image: 'https://source.unsplash.com/8BmNurlVR6M/900x900' },
    { name: 'Sea', image: 'https://source.unsplash.com/6YqpFWWQsno/900x900' },
    { name: 'Reach', image: 'https://source.unsplash.com/zFnk_bTLApo/900x900' },
    { name: 'Awe', image: 'https://source.unsplash.com/j4PaE7E2_Ws/900x900' },
    { name: 'Surf', image: 'https://source.unsplash.com/uohGiEVhWiQ/900x900' },
    { name: 'Thrill', image: 'https://source.unsplash.com/ssrbaKvxaos/900x900' },
  ];

  // Track selected items as a class property
  selected: Array<{ item: typeof this.boxes[0], position: number }> = [];

  // Method to handle box selection
  selectBox(item: typeof this.boxes[0], position: number): void {
    this.selected = [{ item, position }];
    // No need for $apply() in Angular—change detection updates the view automatically
  }

  // Method to clear selection
  clearSelection(): void {
    this.selected = [];
  }
}

Key Improvements & Fixes #

• Removed AngularJS-style module/controller code—modern Angular uses components as the core building block.
• Moved all data and logic into the AppComponent class as properties and methods (the only valid code inside an Angular component class).
• Added a complete template and inline styles directly in the component using the @Component decorator.
• Got rid of the unnecessary $scope.$apply() call—Angular’s built-in change detection handles view updates automatically when component properties change.

内容的提问来源于stack exchange，提问作者Bimm