Whenever I use directives of this error SyntaxError: Unexpected token

0

car-master.component.ts

import{Component}from'@angular/core';import{Car}from'./car';import{CarDetailComponent}from'./car-detail.Component';@Component({selector:'my-car',templateUrl:'app/view/car-master.html',directives:[CarDetailComponent]})exportclassCarComponent{publictitle:string="Cadastro de veiculos";
  public cars: Car[] = Cars;
  public selectedCar: Car;
  public onSelect(car:Car):void{
    this.selectedCar = car;
  }
}
var Cars: Car[] = [
  {id: 1, brand: "BMW", model: "x6"},
  {id: 2, brand: "BMW", model: "x1"},
  {id: 3, brand: "Volkswagen", model: "Golf GTI"},
  {id: 4, brand: "Chevrolet", model: "Croze"},
  {id: 5, brand: "Ford", model: "Fusion"},
  {id: 6, brand: "Fiat", model: "Bravo"},
  {id: 7, brand: "Mercedes", model: "C180"}
]

car-detail.component.ts

import {Component, Input} from '@angular/Core';
import {Car} from './car';

@Component({
  selector: 'car-detail',
  templateUrl: 'app/view/car-datail.html'
})

export class CarDetailComponent{
  @Input()
  public car: Car;
}

carts

export interface Car{
  id: number;
  brand: string;
  model: string;
}

boot.ts

import {bootstrap} from '@angular/platform-browser-dynamic';
import {CarComponent} from "./car-master.component";

bootstrap(CarComponent);

car-datail.html

<section *ngIf="car" >
  <section class="col-md-6">
    <section class="form-group">
      <label>Marca</label>
      <input type="text" class="form-control" [(ngModel)]="car.brand" placeholder="Marca do veiculo" />
    </section>
  </section>
  <!-- Fim da ngIf -->
  <section class="col-md-6">
    <section class="form-group">
      <label>Marca</label>
      <input type="text" class="form-control" [(ngModel)]="car.model" placeholder="modelo do veiculo" />
    </section>
  </section>
  <!-- Fim da ngIf -->

car-master.html

<h1>{{title}}</h1>
<hr>
<section class="col-md-6">
  <ul class="list-group">
    <li *ngFor="#car of cars" (click)="onSelect(car)" class="list-group-item">
      <span [class.selected]= "car === selectedCar" class="badge">{{car.id}}</span>
      <a href="#"> {{car.brand}} {{car.model}}</a>
    </li>
  </ul>
</section>
<car-detail [car]="selectedCar" ></car-detail>

index.html

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>index</title>
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="app/css/style.css">
  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="systemjs.config.js"></script>
  <script>
    System.import('app').catch(function(err){ console.error(err);  });
  </script>
</head>

<body>
  <header id="header">
    <section class="container">
      <p>Angula Car</p>
    </section>
  </header>
  <section class="container">
    <my-car>
      <h1>Carregando...</h1>
    </my-car>
  </section>

</body>

</html>

systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'js/boot.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

package.json

{
  "name": "angular-car",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.3",
    "@angular/compiler":  "2.0.0-rc.3",
    "@angular/core":  "2.0.0-rc.3",
    "@angular/forms": "0.1.1",
    "@angular/http":  "2.0.0-rc.3",
    "@angular/platform-browser":  "2.0.0-rc.3",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.3",
    "@angular/router":  "3.0.0-alpha.7",
    "@angular/router-deprecated":  "2.0.0-rc.2",
    "@angular/upgrade":  "2.0.0-rc.3",

    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",

    "angular2-in-memory-web-api": "0.0.12",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4",

    "canonical-path": "0.0.2",
    "http-server": "^0.9.0",
    "tslint": "^3.7.4",
    "lodash": "^4.11.1",
    "jasmine-core": "~2.4.1",
    "karma": "^0.13.22",
    "karma-chrome-launcher": "^0.2.3",
    "karma-cli": "^0.1.2",
    "karma-htmlfile-reporter": "^0.2.2",
    "karma-jasmine": "^0.3.8",
    "protractor": "^3.3.0",
    "rimraf": "^2.5.2"
  },
  "repository": {}
}
    
asked by anonymous 02.07.2016 / 20:10

1 answer

0

Everything indicates that it is a mere syntax problem. But since you have a lot of code there, it's a bit difficult to identify. I could only see that in the car-detail.component.ts file you import @ angular / Core , with a capital 'C'. See if this is really the problem.

    
04.07.2016 / 15:38