Primeng: 'p-calendar' is not a known element

[skendrot]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

No plunker. Using ASP.NET MVC application

Current behavior

Unable to get PrimeNg components. I'm adding PrimeNg to my Angular2 website built on top of ASP.NET MVC

Expected behavior

PrimeNg components should render without issue

Minimal reproduction of the problem with instructions

Tried submitting this to the forums but they were not able to accept the post
I'm trying to add PrimeNG to my ASP.NET MVC website. I have added the following:
package.json

"dependencies": {
    ...
    "primeng": "1.0.1",
    ...
}

systemjs.config.js

map: {
    ...
    'primeng': 'npm:primeng'
    .
},
packages: {
    primeng: {
        defaultExtension: 'js'
    }
}

app.module.ts

import { CalendarModule } from 'primeng/primeng';
@NgModule({
    imports: [..., CalendarModule],
})

index.cshtml

<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />

When running I can see the primeng.js and calendar.js files downloaded fine. They are initiated by zone.js
Console gives the following error:

zone.js:388 Unhandled Promise rejection: Template parse errors:
'p-calendar' is not a known element:

1. If 'p-calendar' is an Angular component, then verify that it is part of this module.
2. If 'p-calendar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("r="DateRequested">Date Requested
   
   
   [ERROR ->]CreateComponent@14:20 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
   'p-calendar' is not a known element:[/code]

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

ASP.NET MVC

• Angular version: 2.2.0
  

• PrimeNG version: 1.0.1
  

• Browser: [ Only tested Chrome ]
  

• Language: [TypeScript]

[skendrot]

Added a plunker that is similar, but not exact. The plunker will fail as is. If you load the CalendarModule from primeng directly instead of from primeng/components/calendar/calendar it will work.

Fails:
import { CalendarModule } from 'primeng/components/calendar/calendar';

Works:
import { CalendarModule } from 'primeng';

I noticed the plunker defines map within systemjs.config.js as such:
'primeng': 'npm:[email protected]/primeng.js'

Yet on the setup doc it defines the map as such:
'primeng': 'npm:primeng'

I tried changing the definition to include the js file, but still no luck

[cagataycivici]

You have an issue with your system.js configuration somehow when importing calendar, there is no bug or a change we can do from our side.

[skendrot]

Let's please not dismiss this with "Not my problem" when I did provide a plunker that has an issue and that plunker is forked from yours with no changes made to the systemjs.config file.

[skendrot]

Oddly enough, the issue I am seeing is the opposite of the plunker I sent. It works fine when importing from the calendar folder but fails when importing from primeng

[Mandersen21]

Hey, *
I'm currently also seeing this problem. We do also have our angular2 application inside a .NET app.
How did you import the module? Did you managed to solve the problem?

Have tried with:

import { CalendarModule } from 'primeng/components/calendar/calendar' -- Fails
import { CalendarModule } from 'primeng/primeng; -- Fails

Any workaround? It works fine in a normal angular2 application.

[skendrot]

I did get mine to work. Not sure what fixed it. Here's my config (only relevant parts)

Module file

import { CalendarModule } from 'primeng/components/calendar/calendar';
..
    imports: [CalendarModule ],

package.json

{
  "dependencies": {
    "typescript": "~2.0.10",
    "primeng": "1.0.1",
  },
}

systemjs.config.js

    System.config({
        paths: {
            'npm:': 'node_modules/'
        },
        map: {
            'primeng': 'npm:primeng'
        },
        packages: {
            primeng: {
                defaultExtension: 'js'
            }
        }
    });

[skendrot]

This might have also been solved by changing the version of TypeScript. I had to change it to get the Angular aot compiler functional.

[Halynsky]

I have same error:

ng: 'p-calendar' is not a known element: 1. If 'p-calendar' is an Angular component, then verify that it is part of this module. 2. If 'p-calendar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message

CalendarModule is imported to the current module

"primeng": "4.2.2",
"typescript": "2.5.3",
"@angular/cli": "1.4.9",

[NapsterSerna]

modifying app.module.ts:

import { CalendarModule } from 'primeng/components/calendar/calendar';
..
imports: [CalendarModule ],

Works for me!
thanks!

[amine-jabir]

I just found the Calendar Module in app.module.ts extending from another library
just check the list of imports you have in app.module.ts.

I was using another library of calendar that using the same CalendarModule