my error:
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (traceur, line 0)
Error: invoke#http://localhost:3000/node_modules/zone.js/dist/zone.js:323:34
runGuarded#http://localhost:3000/node_modules/zone.js/dist/zone.js:230:54
http://localhost:3000/node_modules/zone.js/dist/zone.js:206:40
Error loading http://localhost:3000/traceur
Error loading http://localhost:3000/ts/app.js
my folder structure is like this:
index.htmn
package.json
systemjs.config.js
typings.json
->ts/app.js
->node_modules/*
->typings/*
I tried changing destination path of my source app file but did not have any luck.
index.html
<html>
<head>
<title>First App - Hello world</title>
<script src="node_modules/es6-shim/es6-shim.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>
<script src="systemjs.config.js"></script>
<script>
System.import('app').then(null, console.error.bind(console));
</script>
<body>
<gs-test></gs-test>
</body>
</html>
in systemjs.config file i tried changing map part for my app but still the same.
I also tried with changing different version of libraries but did not help.
systemjs.config.js
// See also: https://angular.io/docs/ts/latest/quickstart.html
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'ts',
'rxjs': 'node_modules/rxjs',
'#angular': 'node_modules/#angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'app.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
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
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"
]
}
could be something with typings but i guess then td file would be missing. I did "typing install" before starting first time app.
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"
}
}
Please let me know what could be wrong with my setup.
tnx!
miha
Related
Update:
I have fixed the vague error that crashed the app upon launch. This was not related to the TypeScript not compiling. In the main.ts file in the Git repo I just needed to change the line:
platformBrowserDynamic().platform.bootstrapModule(AppModule);
To:
platformBrowserDynamic().bootstrapModule(AppModule);
Now when the app does launch, it can run without any errors.
However, the TypeScript still does not compile — I get the following errors:
node_modules/firebase/firebase.d.ts(391,3): error TS2300: Duplicate identifier 'export='.
typings/globals/firebase/index.d.ts(323,2): error TS2300: Duplicate identifier 'export='.
My tsconfig.json file looks like:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"typeRoots": [ "../node_modules/#types" ],
"listFiles": true
},
"files": [ "typings/index.d.ts" ],
"include": [ "app/**/*" ]
}
I have an Angular app that uses Firebase (AngularFire2) for it's auth and database.
Everything worked fine while I was just using the AngularFire2 library but I need to use Firebase's ServerValue.TIMESTAMP which from what I've read requires Firebase to be imported as well as AngularFire2.
From various sources on the Web, including answers here on SO I believe I am now importing Firebase into my app properly.
This required adding "files": [ "typings/index.d.ts" ] to my tsconfig.json file e.g.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"typeRoots": [ "../node_modules/#types" ],
"listFiles": true
},
"include": [ "../app/**/*.ts" ],
"exclude": [ "../node_modules" ],
"files": [ "typings/index.d.ts" ]
}
And a referencing Firebase in my systems.config.js file as per this question.
This fixed a LOT of duplication errors that the TypeScript compiler was complaining about, but...
The app now crashes upon launch with just the vague error:
[Error] Error:
eval code
eval#[native code]
run#http://localhost:3000/node_modules/zone.js/dist/zone.js:96:49
http://localhost:3000/node_modules/zone.js/dist/zone.js:462:60
invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:236:42
runTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:136:57
drainMicroTaskQueue#http://localhost:3000/node_modules/zone.js/dist/zone.js:368:42
invoke#http://localhost:3000/node_modules/zone.js/dist/zone.js:308:44
Evaluating http://localhost:3000/app/main.js
Error loading http://localhost:3000/app/main.js — system.src.js:123:88
(anonymous function) (localhost:16)
run (zone.js:96)
(anonymous function) (zone.js:462)
invokeTask (zone.js:236)
runTask (zone.js:136)
drainMicroTaskQueue (zone.js:368)
invoke (zone.js:308)
I also think that my TypeScript files in the app dir are not compiling. When I log which files compile I get the following in the Terminal:
[0] /Users/jonathonoates/Sites/my-app/node_modules/typescript/lib/lib.d.ts
[0] /Users/jonathonoates/Sites/my-app/typings/globals/core-js/index.d.ts
[0] /Users/jonathonoates/Sites/my-app/typings/globals/firebase/index.d.ts
[0] /Users/jonathonoates/Sites/my-app/typings/globals/jasmine/index.d.ts
[0] /Users/jonathonoates/Sites/my-app/typings/globals/node/index.d.ts
[0] /Users/jonathonoates/Sites/my-app/typings/index.d.ts
I have set up a branch of my Git repo for you to examine here.
Hopefully someone is familiar with the problem and can help!
So, as per the update the vague error was solved.
I still had a error TS2300: Duplicate identifier issue.
I uninstalled the Firebase global typings so my typings.jsonfile looks like:
{
"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"
}
}
I adjusted my systemjs.config.js to reference the Firebase within AngularFire2 like:
(function (global) {
System.config({
map: {
app: 'app',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.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/router': 'npm:#angular/router/bundles/router.umd.js',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
angularfire2: 'npm:angularfire2',
firebase: 'npm:angularfire2/node_modules/firebase',
rxjs: 'npm:rxjs'
},
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
angularfire2: {
main: './bundles/angularFire2.umd.js',
defaultExtension: 'js'
},
firebase: {
main: './firebase.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
},
paths: { 'npm:': './node_modules/' }
});
})(this);
Pay attention to the Firebase reference in the map.
Then I added import * as firebase from 'firebase'; to the component where I wanted to use it [as per this logged issue] AND importantly added it to the top of the angularfire2.d.ts file. 1.
The complete fixed code can be found in this Git branch.
I am trying to build an angular 2 application using typescript in visual studio 2015 application. I am using angular release candidate 1.
I am getting the following error message in the console of my browser while running the application.
index.html:24 Error: Error: XHR error (404 Not Found) loading http://localhost:3622/app.js(…)
I cannot understand why it is trying to look for app.js file. I have set index.html as the start page.
As seen in the code below , I am trying to display data in the datatable. Is there any issue with how I have setup the systemjs.js file or with the system.import statement in index.html file
Please find my folder structure
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/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>
<script src="node_modules/primeui/primeui-ng-all.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
</head>
<body>
<my-app>Loading..</my-app>
</body>
</html>
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',
'primeng': 'node_modules/primeng'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'.': { 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/testing',
'#angular/upgrade',
'#angular/router-deprecated'
];
// 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
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
main.ts
import { bootstrap } from '#angular/platform-browser-dynamic';
// Our main component
import { AppComponent } from './app/app.component';
bootstrap(AppComponent, []).catch(err => console.error(err));
app.component.ts
import { Component } from '#angular/core';
import { RiskListComponent } from './components/risks/risk-list.component';
import { DataTable, Column } from 'primeng/primeng';
#Component({
selector: 'my-app',
providers: [],
template: `
<div>
<h1>{{pageTitle}}</h1>
<rm-risks> </rm-risks>
</div>
` ,
directives: [RiskListComponent, DataTable, Column]
})
export class AppComponent {
pageTitle: string = 'Test UK Trader';
}
risk-list.component.ts
import { Component } from '#angular/core'
import { DataTable, Column } from 'primeng/primeng';
#Component({
selector: 'rm-risks',
directives: [DataTable, Column],
templateUrl: '/app/risks/risk-list.component.html'
})
export class RiskListComponent {
pageTitle: string = 'Risk List';
risks: any[] = [
{
"riskId": 1,
"reference": "HISC9308336",
"insuredName": "SA 84161",
"inceptionDate": "March 19, 2016",
"riskType": "Quote",
"status": "Indication",
"grossPremium": "100",
"allocatedTo": "Broker User",
"allocatedCompany": "Broker"
},
{
"riskId": 2,
"reference": "HISC9308340",
"insuredName": "Upper Loi",
"inceptionDate": "April 25, 2016",
"riskType": "Quote",
"status": "Indication",
"grossPremium": "312.22",
"allocatedTo": "Andy Marples",
"allocatedCompany": "Broker"
}
];
}
risk-list.component.html
<h3 class="first">{{pageTitle}}</h3>
<p-dataTable [value]="risks" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]">
<p-column field="reference" header="Reference"></p-column>
<p-column field="insuredName" header="Insured Name"></p-column>
<p-column field="inceptionDate" header="Inception Date"></p-column>
<p-column field="riskType" header="Risk Type"></p-column>
<p-column field="status" header="Status"></p-column>
<p-column field="grossPremium" header="Gross Premium"></p-column>
<p-column field="allocatedTo" header="Allocated To"></p-column>
<p-column field="allocatedCompany" header="Allocated Company"></p-column>
</p-dataTable>
tsconfig.js
{
"compileOnSave": false,
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "../dist/",
"rootDir": ".",
"sourceMap": true,
"target": "es6",
"inlineSources": true
},
"exclude": [
"node_modules",
"typings",
"typings/main",
"typings/main.d.ts"
]
}
I would move the main.ts file under the app folder and import it this way:
<script>
System.import('app/main').catch(function (err) { console.error(err); });
</script>
You also need to have this configuration for SystemJS:
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
Hi I am new to angular 2. I am trying to inject d3 library to angular 2 using angular cli. I installed d3 using npm install d3. I followed the link
https://github.com/angular/angular-cli/wiki/3rd-party-libs
I followed the steps
`my angular-cli-build.js.
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(js|js.map)',
'rxjs/**/*.+(js|js.map)',
'#angular/**/*.+(js|js.map)',
'#angular2-material/**/*.+(js|css)',
'd3/**/*.js',
'ng2-material/**/*.+(js|css)'
]
});
};
my index.html
System.config({
map:{
"d3Lib":"vendor/d3"
},
packages:{
'd3Lib':{
defaultExtension:'js',
map:{
'./d3':'./d3.js'
}
}
}
});
and i included in my component.
When i tried to run ng server it throws d3. module not found. It would be great if some body could help
Never tried it with angular2 but I installed my d3js to my ionic2 project like this:
npm install #types/d3 --save
then you can immediately use it in your components:
import * as d3 from 'd3';
My system.config
System.config({
map:{
'#angular2-material':'vendor/#angular2-material'
},
packages:{
'#angular2-material':{
map:{
'./button':'./button/button.js',
'./card':'./card/card.js',
'./checkbox':'./checkbox/checkbox.js',
'./input':'./input/input.js',
'./progress-circle':'./progress-circle/progress-circle.js',
'./sidenav':'./sidenav/sidenav.js',
'./toolbar':'./toolbar/toolbar.js'
}
}
}
});
System.config({
map:{
"d3Lib":"vendor/d3"
},
packages:{
'd3Lib':{
defaultExtension:'js',
map:{
'./d3':'./d3.js'
}
}
}
});
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
Steps for adding third party library that worked for me in angular-cli
download the d3 typing from typing and paste it in main and browser folder with in typing folder.
Add reference in corresponding index.ts files.
Add the map in the system.config (My system.config file).
<script>
System.config({
map:{
'#angular2-material' : 'vendor/#angular2-material',
"d3" : "vendor/d3/d3.js",
"lodash" : "vendor/lodash/lodash.js",
"#angular/platform-browser": "vendor/#angular/platform-browser",
'#angular/core/src/facade': 'vendor/#angular/core/src/facade',
//'#angular/platform-browser-dynamic': 'vendor/#angular/platform-browser-dynamic/platform-browser-dynamic.umd.js',
'angular2-modal': 'vendor/angular2-modal',
'angular2-modal/platform-browser': 'vendor/angular2-modal/platform-browser'
},
packages:{
'#angular2-material':{
map:{
'./button':'./button/button.js',
'./card':'./card/card.js',
'./checkbox':'./checkbox/checkbox.js',
'./input':'./input/input.js',
'./progress-circle':'./progress-circle/progress-circle.js',
'./sidenav':'./sidenav/sidenav.js',
'./toolbar':'./toolbar/toolbar.js',
'./icon':'./icon/icon.js'
}
},
"d3": {
"defaultExtension": "js"
},
"lodash": {
"defaultExtension": "js"
},
'#angular2-material/core': {
defaultExtension: 'js',
format: 'cjs',
main: 'core'
},
'#angular2-material/checkbox': {
defaultExtension: 'js',
format: 'cjs',
main: 'checkbox'
},
'#angular2-material/button': {
defaultExtension: 'js',
format: 'cjs',
main: 'button'
},
'#angular2-material/icon': {
defaultExtension: 'js',
format: 'cjs',
main: 'icon'
},
'#angular2-material/sidenav': {
defaultExtension: 'js',
format: 'cjs',
main: 'sidenav'
},
'vendor/angular2-modal': {main: 'index.js', defaultExtension: 'js'},
'vendor/angular2-modal/platform-browser': {main: 'index.js', defaultExtension: 'js'},
'vendor/angular2-modal/plugins/bootstrap': {main: 'index.js', defaultExtension: 'js'},
'vendor/angular2-modal/plugins/vex': {main: 'index.js', defaultExtension: 'js'},
'vendor/angular2-modal/plugins/js-native': {main: 'index.js', defaultExtension: 'js'},
'#angular/core/src/facade': {defaultExtension: 'js'}
}
});
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
</script>
import it in the corresponding components
import * as d3 from 'd3';
following the same steps worked for lodash well. Thanks
Here is how to correctly add d3 to a project with angular-cli:
npm install d3 --save
angular-cli-build.js
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
...,
'd3/build/*.js'
]
});
};
system-config.js
map['d3'] = 'vendor/d3/build';
packages['d3'] = {
main: 'd3',
format: 'global'
};
app.component.ts
import * as d3 from 'd3';
See several full working imports at https://github.com/benshope/focus
Basically I have created a sample application by referring to Angular2 quickstart tutorial. For further digging I've created ./services/dataService.ts service file like below.
import {Injectable} from 'angular2/core';
#Injectable()
export class DataService {
items: Array<number>;
constructor() {
this.items = [1, 2, 3, 4];
}
getItems() {
return this.items;
}
}
I had "outDir": "../wwwroot/app", option mentioned in tsconfig which transpile app.ts & dataService.ts to below path.
--wwwroot
|app
|--app.js
|--services
|-- dataService.js
MyAppComponent
import {Component, View, Inject, forwardRef} from 'angular2/core';
import {NgFor} from 'angular2/common';
import {bootstrap} from 'angular2/platform/browser';
import {DataService} from './services/dataService';
#Component({
'selector': 'my-app',
template: `
<div *ngFor="#item of items">
{{item}}
</div>
`,
directives: [NgFor],
providers: [DataService]
})
export class MyAppComponent {
items: Array<number>;
constructor(service: DataService) {
this.items = service.getItems();
}
}
bootstrap(MyAppComponent)
Code gets compiled with no-error, but after application Ran I got
below error, http://localhost:8413/app/services/dataService.
Failed to load resource: the server responded with a status of 404 (Not Found)
I used below code from index.html to load app files on page.
System.config({ packages: { src: { defaultExtension: 'js' } } });
System.import('app/app.js').then(null, console.error.bind(console));
My question is how could I import the dataService.js, why does is give 404 error still its there in a place? I Researched alot on this problem, but didn't find anything helpful. Any help would appreciated.
Edit
Added .tsconfig to directly get rectify when there is issue
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"module": "commonjs",
"removeComments": false,
"sourceMap": true,
"target": "es5",
"outDir": "../wwwroot/app",
"experimentalDecorators": true,
"emitDecoratorMetadata": true
},
"exclude": [
"node_modules",
"wwwroot"
]
}
The problem was with configuration of System, previously I was having below code to load component.
System.config({ packages: { src: { defaultExtension: 'js' } } });
System.import('app/app.js').then(null, console.error.bind(console));
Basically System.config settings tells that packages would be belongs to src folder and the files defaultExtension is js. So I changed my packages's src to app as I was having app folder, not src.
Other than that I changed System.import('app/app.js') to System.import('app/app') as default extensions of files is js, so I don't need to bother about it. So my component loading script changed to below.
System.config({ packages: { app: { defaultExtension: 'js' } } });
System.import('app/app').then(null, console.error.bind(console));
I am working on nodejs application in typescript with angular which is also in typescript. i have use gulp to transpile the files to js. but when i run command to transile my angular file it gives me error TS2300: Duplicate identifier
here is my gulp.config.js
module.exports = function () {
var config = {
allTs:'./src/**/*.ts',
typeings:'./typings/**/*.ts',
server:'./server.ts',
tsOutPutPath:'./app',
allNgTs:'./client/**/*.ts',
ngOut:'./public/scripts/src'
};
return config;
}
here is my gulp task
gulp.task('compile-ng', function () {
var sourceTsFiles = [
config.typeings,
config.allNgTs
]
del(['public/scripts/**/*.js','public/scripts/**/*.html']).then(paths => {
console.log('Deleted files and folders:\n', paths.join('\n'));
});
var tsResult = gulp
.src(sourceTsFiles)
.pipe(sourcemaps.init())
.pipe(tsc(tsProject));
return tsResult.js
.pipe(sourcemaps.write('../map'))
.pipe(gulp.dest(config.ngOut));
});
Your tsconfig.json file should exclude node_modules and any d.ts files that may conflict with angular d.ts i.e:
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude":[
"fonts",
"images",
"img",
"libs",
"navigation",
"node_modules",
"pagehtmls",
"typings"
]
}
Add ngTypeings:'./node_modules/angular2/typings/**/*.ts', to gulp.config.json file and use this angular2 typing in task instead of typeings
var sourceTsFiles = [
config.ngTypeings,
config.allNgTs
]