CODEWITHSUNDEEP
javascriptangularprimeng
jonathanverner
jonathanverner

Reputation: 313

Trouble using PrimeNG components (No directive annotation found)

I am having trouble using the PrimeNG components (beta5) with angular2 (rc.1). When trying to use any component, e.g. the menubar, I always get the error

No Directive annotation found on Menubar

I have just started learning angular and PrimeNG so I am probably doing something wrong. But after much googling I could not find any help.

What is the reason that there seem to be no annotations on the Menubar component? What am I doing wrong?

Note that I am trying to use plain javascript, i.e. not TypeScript. (Well, in fact, I am using Python [via Brython], but that is another matter entirely.)

My index.html starts like this:

<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/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/@angular/core/core.umd.js"></script>
<script src="node_modules/@angular/common/common.umd.js"></script>
<script src="node_modules/@angular/compiler/compiler.umd.js"></script>
<script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>

<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="app/systemjs.config.js"></script>

<!-- PRIME NG-->
<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="assets/font-awesome-4.6.2/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />

 <script src='app/main.js'></script>

My app/main.js is simple:

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    System.import("primeng/primeng").then(function(primeng) {
        app.AppComponent =
            ng.core.Component({
                selector: 'my-app',
                template: '<h1>My First Angular 2 App</h1>',
                directives: [primeng.Menubar]
            })
            .Class({
                constructor: function() {}
            });
        ng.platformBrowserDynamic.bootstrap(app.AppComponent);
    });
  });
})(window.app || (window.app = {}));

The app/system.config.js script contains:

(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 = {
//         'app':                        { main: 'boot.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    'primeng':                    { 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);

Upvotes: 0

Views: 1451

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71911

You should take a look at the installation of PrimeNG. This is a beta version which enables you to use components in Angular2. It is similar to PrimeUI.

For installation instructions check this link http://www.primefaces.org/primeng/#/setup

There is a quickstart and a good explanation on how to get it up and running. Unfortunately the AppComponent is written in TypeScript, but it should give you great pointers as to how to continue.

Besides that, it is not necessary to add the @angular js files inside your index.html. They get loaded through SystemJS

Upvotes: 1

Related Questions