Traceur 404 (Not Found) Unable to load transpiler to transpile angularfire2.js http://localhost:3000/node_modules/angularfire2/angularfire2.js
I have an angular-seed app to which I'm trying to add angularfire2. It does seems I'm missing something in the config or version.
All configs below.
package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "~2.1.0",
"@angular/compiler": "~2.1.0",
"@angular/core": "~2.1.0",
"@angular/forms": "~2.1.0",
"@angular/http": "~2.1.0",
"@angular/platform-browser": "~2.1.0",
"@angular/platform-browser-dynamic": "~2.1.0",
"@angular/router": "~3.1.0",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "~2.1.0",
"angular-in-memory-web-api": "~0.1.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25",
"gulp": "~3.9.1",
"gulp-uglify":"~2.0.0",
"sw-precache":"~4.1.0",
"angularfire2":"~2.0.0-beta.5",
"firebase":"3.4.0",
"@types/firebase":"~2.4.30",
"@types/request":"0.0.31"
},
"devDependencies": {
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3",
"typings":"^1.4.0"
}
}
systemjs.config.js
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
'firebase' : 'npm:firebase',
'angularfire2' : 'npm:angularfire2'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
'angularfire2': {
main: 'angularfire2.js',
defaultExtension: 'js'
},
'firebase': {
main: 'firebase.js',
defaultExtension: 'js'
}
}
});
})(this);
typings.json
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160909174046"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"typeRoots": [
"./node_modules/@types"
],
"types": [
"firebase"
]
},
"files":[
"app/main.ts",
"node_modules/angularfire2/node_modules/firebase/firebase.d.ts"
]
}
Finally figured out after doing a lot of online digging and trying out a variety of settings. Below is the config that finally worked.
Package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "~2.1.0",
"@angular/compiler": "~2.1.0",
"@angular/core": "~2.1.0",
"@angular/forms": "~2.1.0",
"@angular/http": "~2.1.0",
"@angular/platform-browser": "~2.1.0",
"@angular/platform-browser-dynamic": "~2.1.0",
"@angular/router": "~3.1.0",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "~2.1.0",
"@types/firebase": "~2.4.30",
"@types/request": "0.0.31",
"angular-in-memory-web-api": "~0.1.5",
"angularfire2": "^2.0.0-beta.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"firebase": "3.4.0",
"gulp": "~3.9.1",
"gulp-uglify": "~2.0.0",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"sw-precache": "~4.1.0",
"systemjs": "0.19.39",
"zone.js": "^0.6.25",
"traceur": "^0.0.96"
},
"devDependencies": {
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3",
"typings": "^1.4.0"
}
}Systemjs
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
'firebase' : 'npm:firebase',
'angularfire2' : 'npm:angularfire2',
'traceur':'npm:traceur/bin'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
angularfire2: {
main: 'index.js',
format: 'esm',
defaultExtension: 'js'
},
firebase: {
main: 'firebase.js',
defaultExtension: 'js'
},
traceur:{
main: 'traceur'
}
}
});
})(this);typings.json
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"firebase": "registry:dt/firebase#2.4.1+20160412125105",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160909174046"
},
"dependencies": {
"index": "file:node_modules/angularfire2/auth/index.d.ts"
}
}tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"typeRoots": [
"./node_modules/@types"
],
"types": [
"firebase",
"angularfire2"
]
}
}Additions to package.json
"@types/firebase": "~2.4.30",
"@types/request": "0.0.31",
"angularfire2": "^2.0.0-beta.5",
"firebase": "3.4.0",
"traceur": "^0.0.96"Additions to systemjs 'firebase' : 'npm:firebase',
'angularfire2' : 'npm:angularfire2',
'traceur':'npm:traceur/bin'
angularfire2: {
main: 'index.js',
format: 'esm',
defaultExtension: 'js'
},
firebase: {
main: 'firebase.js',
defaultExtension: 'js'
},
traceur:{
main: 'traceur'
}
additions to tsconfig.json
"typeRoots": [
"./node_modules/@types"
],
"types": [
"firebase",
"angularfire2"
] additions to typings.json
"firebase": "registry:dt/firebase#2.4.1+20160412125105",
"dependencies": {
"index": "file:node_modules/angularfire2/auth/index.d.ts"
}