Error with "ng build && ng serve" following "Installation and Setup" guide #461
Description
I followed the steps from the installation guide but I receive the below errors:
Build error
The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
SyntaxError: Unexpected token ]
at Object.parse (native)
at BroccoliTypeScriptCompiler._loadTsConfig (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:128:25)
at BroccoliTypeScriptCompiler._createServiceHost (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:163:25)
at BroccoliTypeScriptCompiler.build (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:41:12)
at C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:152:21
at lib$rsvp$$internal$$tryCatch (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
at lib$rsvp$asap$$flush (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9)
at nextTickCallbackWith0Args (node.js:420:9)
at process._tickCallback (node.js:349:13)
The broccoli plugin was instantiated at:
at BroccoliTypeScriptCompiler.Plugin (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\broccoli-plugin\index.js:10:31)
at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:21:10)
at BroccoliTypeScriptCompiler (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:27:10)
at Angular2App._getTsTree (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\lib\broccoli\angular2-app.js:331:18)
at Angular2App._buildTree (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\lib\broccoli\angular2-app.js:124:23)
at new Angular2App (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\lib\broccoli\angular2-app.js:53:23)
at module.exports (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\angular-cli-build.js:10:10)
at Class.module.exports.Task.extend.setupBroccoliBuilder (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\ember-cli\lib\models\builder.js:55:19)
at Class.module.exports.Task.extend.init (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\ember-cli\lib\models\builder.js:89:10)
at new Class (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\core-object\core-object.js:18:12)
at Class.module.exports.Task.extend.run (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\ember-cli\lib\tasks\serve.js:15:19)
at C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\ember-cli\lib\commands\serve.js:64:24
at lib$rsvp$$internal$$tryCatch (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
at lib$rsvp$asap$$flush (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9)
Files:
src\main.ts
import { BrowserModule } from '@angular/platform-browser';
import { enableProdMode, NgModule } from '@angular/core';
import { <MyApp>, environment } from './app/';
import { AngularFireModule } from '/angularfire2';
const firebaseConfig = {
apiKey: "AIzaSyBofqdUZR8WLKdPsqryQtF1lFxNAdk6JEI",
authDomain: "vital-contact-116013.firebaseapp.com",
databaseURL: "https://vital-contact-116013.firebaseio.com",
storageBucket: "<your-storage-bucket>"
}
@NgModule({
imports: [
BrowserModule,
AngularFireModule.initializeApp(firebaseConfig)
],
declarations: [ MyComponent ],
Bootstrap: [ MyComponent ]
})
export class MyAppModule {}
src\app\app.component.ts
import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
@Component({
moduleId: module.id,
selector: '<my-app>-app',
templateUrl: '<my-app>.component.html',
styleUrls: ['<my-app>.component.css']
})
export class <MyApp>Component {
items: FirebaseListObservable<any[]>;
constructor(af: AngularFire) {
this.items = af.database.list('items');
}
}
src\tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"mapRoot": "/",
"module": "commonjs",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "../dist/",
"rootDir": ".",
"sourceMap": true,
"target": "es5",
"inlineSources": true
},
"files": [
"main.ts",
"typings.d.ts",
"node_modules/angularfire2/firebase3.d.ts",
]
}
typings.json
{
"globalDevDependencies": {
"angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
},
"globalDependencies": {
"es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504",
"firebase3": "file:node_modules/angularfire2/firebase3.d.ts"
},
"dependencies": {
"es6-promise": "registry:npm/es6-promise#3.0.0+20160723033700"
}
}
I also tried the path shown here: https://www.youtube.com/watch?v=8E-dueHCd2o but without success