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

UI Components for Angular
Post Reply
Tom2016
Posts: 1
Joined: 25 May 2016, 16:18

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>


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

]
}

jp_2011
Posts: 35
Joined: 14 Feb 2011, 16:47

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
PrimeFaces 5.0, Glassfish 4, Wildfly 8.1, Java 8, Java EE 7
Ubuntu 13.10

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests