Joshua Szuslik Joshua Szuslik - 3 months ago 5
TypeScript Question

Angular2 Working in Chrome but not Firefox

FIREFOX ERRORS:

ReferenceError: reference to undefined property G.search es6-shim.min.js:10:7752
ReferenceError: reference to undefined property G[e] es6-shim.min.js:10:1
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create es6-shim.min.js:10:23659
ReferenceError: reference to undefined property S.setImmediate es6-shim.min.js:11:1066
TypeError: variable load redeclares argument system.src.js:685:12
TypeError: variable load redeclares argument system.src.js:741:10
SyntaxError: test for equality (==) mistyped as assignment (=)? system.src.js:1393:64
SyntaxError: test for equality (==) mistyped as assignment (=)? system.src.js:3838:45
SyntaxError: test for equality (==) mistyped as assignment (=)? system.src.js:3841:46
SyntaxError: test for equality (==) mistyped as assignment (=)? system.src.js:3848:47
SyntaxError: test for equality (==) mistyped as assignment (=)? system.src.js:4024:46
ReferenceError: assignment to undeclared variable $__curScript system.src.js:5006:3
ReferenceError: reference to undefined property cfg.transpilerRuntime system.src.js:1870:1
ReferenceError: reference to undefined property value.then zone.js:502:10
ReferenceError: reference to undefined property load.metadata.format system.src.js:2763:1
ReferenceError: reference to undefined property load.metadata.authorization system.src.js:1739:7
ReferenceError: reference to undefined property load.metadata[metaName] system.src.js:4838:1
ReferenceError: reference to undefined property load.metadata.format system.src.js:1773:1
ReferenceError: reference to undefined property load.metadata.format system.src.js:3348:1
ReferenceError: reference to undefined property load.metadata.format system.src.js:3464:1
ReferenceError: reference to undefined property load.metadata.format system.src.js:4236:1
ReferenceError: reference to undefined property load.metadata.cjsRequireDetection system.src.js:3877:13
ReferenceError: reference to undefined property load.metadata.esmExports system.src.js:3416:7
SyntaxError: test for equality (==) mistyped as assignment (=)? browser-sync-client.2.12.8.js:3:978
TypeError: variable loc redeclares argument browser-sync-client.2.12.8.js:3:7667
SyntaxError: 'use strict' statement won't be enforced as a directive because it isn't in directive prologue position browser-sync-client.2.12.8.js:10:0
ReferenceError: reference to undefined property freeGlobal.global browser-sync-client.2.12.8.js:3:19111
ReferenceError: reference to undefined property has[name] browser-sync-client.2.12.8.js:3:1
ReferenceError: reference to undefined property freeGlobal.global browser-sync-client.2.12.8.js:2:21756
ReferenceError: reference to undefined property opts.reconnection browser-sync-client.2.12.8.js:2:27861
ReferenceError: reference to undefined property freeGlobal.global browser-sync-client.2.12.8.js:1:3315
ReferenceError: reference to undefined property packet.options browser-sync-client.2.12.8.js:3:602
ReferenceError: reference to undefined property self.pingIntervalTimer browser-sync-client.2.12.8.js:1:9391
ReferenceError: reference to undefined property this.pingTimeoutTimer browser-sync-client.2.12.8.js:1:9135
ReferenceError: reference to undefined property packet.data browser-sync-client.2.12.8.js:1:8193
ReferenceError: reference to undefined property cb.fn browser-sync-client.2.12.8.js:2:3388
ReferenceError: reference to undefined property load.metadata.globals system.src.js:3629:16
ReferenceError: reference to undefined property linkSet.loader.loaderObj.execute system.src.js:682:1
ReferenceError: reference to undefined property freeGlobal.global system.src.js line 1510 > eval:15:1
SyntaxError: test for equality (==) mistyped as assignment (=)? system.src.js:5:79
ReferenceError: reference to undefined property obj.provide system.src.js line 1510 > eval:4:19
ReferenceError: reference to undefined property typeOrFunc.parameters system.src.js line 1510 > eval:117:1
ReferenceError: reference to undefined property ctorParam.decorators system.src.js line 1510 > eval:124:80
ReferenceError: reference to undefined property typeOrFunc.annotations system.src.js line 1510 > eval:142:1
ReferenceError: reference to undefined property typeOrFunc.propMetadata system.src.js line 1510 > eval:163:1
ReferenceError: reference to undefined property this.requiredParents system.src.js line 1510 > eval:288:1
ReferenceError: reference to undefined property value["name"] system.src.js line 1510 > eval:377:12


PACKAGE.JSON

{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && 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.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.7",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^0.8.1"
}
}


TSCONFIG.JSON

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}


TYPINGS.JSON

{
"ambientDependencies": {
"es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
"node": "registry:dt/node#4.0.0+20160509154515"
}
}


SYSTEMJS.CONFIG.JS

(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
System.config(config);
})(this);


INDEX.HTML

<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">

<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>

<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>

<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>

<!-- 3. Display the application -->
<body>
<checkout-app>Loading...</checkout-app>
</body>
</html>


MAIN.TS

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);


APP.COMPONENT.TS

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


@Component({
selector: 'checkout-app',
template: `
<h1>Test</h1>
`
})
export class AppComponent {}


I have searched everywhere and have tried all the fixes I could find but cannot come up with a solution on how to get the errors in FireFox to go away.

Answer

I found that FireFox was caching my outdated files. I also had to add this to any post and get headers when trying to retrieve data from a server in JSON becuase the default way FireFox gets data does not work with Angular 2

headers.append('Accept', 'q=0.8;application/json;q=0.9');