Error: Cannot find http://localhost/node_modules/primeng/

Tom2016 · 25 May 2016, 16:26

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.

I don't understand why I am getting this error as I have primeng installed in my application folder which is under node_modules

Please see the screenshot of the folder structure below

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>



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


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

]
}

jp_2011 · 26 May 2016, 19:30

I hit this as well starting my first project the other week. The location was changed in RC1 from the beta and you need to update the files appropriately.

Namely your scripts are now in vendor directory not node_modules
<script src="vendor/es6-shim/es6-shim.js"></script>
<script src="vendor/systemjs/dist/system-polyfills.js"></script>

Have a look a fully working integration with PrimeNG with a new project created from the CLI here:
https://github.com/jpicklyk/angular-cli-primeng

Cheers,

Jeff

Error: Cannot find http://localhost/node_modules/primeng/

Who is online