primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.37k stars 4.59k forks source link

New import system fails under AOT #4841

Closed MedinaGitHub closed 6 years ago

MedinaGitHub commented 6 years ago

I want to use the new turboTable but my import doesn't work

sebaiona commented 6 years ago

Same thing for me.

In fact, when I take this example I have the same problem too : import {ButtonModule} from 'primeng/button';

When I updated the package I had UNMET PEER DEPENDENCY primeng@5.2.0-rc.1...

Is there a particular dependy that I would need ?

PS : everything works fine If I don't import with primeng/table.

PS2: @cagataycivici I don't have any .d.ts file except primeng.d.ts in the package folder... (all .js files importing components are present though) If I put one manually which imports the TurboTable component I can use it...

jbgarr commented 6 years ago

@MedinaGitHub Can you share whatever errors you're getting? That would help the debugging process I'm sure. Also what version of Angular are you using? I suspect there may be an issue when trying to use the latest version of PrimeNG with an older version of Angular (below v5.0).

cfarver commented 6 years ago

I'm seeing similar issues after upgrading. I'm using primeng 5.2.0-rc.1 and Angular 5.2.1.

I imported the new TableModule into my app.module file as described in the documentation, but the IDE (Visual Studio Code) isn't recognizing it as a component. That being said, it is working in my app, so it seems like a false negative... The error message I'm getting is:

[Angular] 'p-table' is not a known element:

  1. If 'p-table' is an Angular component, then verify that it is part of this module.
  2. If 'p-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
cagataycivici commented 6 years ago

It works for me at primeng-quickstart-cli, please compare;

https://github.com/primefaces/primeng-quickstart-cli

I'm unable to replicate.

patriknil90 commented 6 years ago

@cagataycivici : With ng build --watch, everything works. When trying to ng build --prod:

Unexpected value 'TableModule in C:/www/struktur/protected/views/hyperion/node_modules/primeng/table.js' imported by the module 'ProjectModule in C:/www/struktur/protected/views/hyperion/src/app/project/project.module.ts'. Please add a @NgModule annotation

import { TableModule } from 'primeng/table';

@NgModule({
  imports: [
    ...
    TableModule
  ]
})

-----------
package.json

"dependencies": {
    "@angular/animations": "^5.1.1",
    "@angular/cdk": "^5.0.1",
    "@angular/common": "^5.1.1",
    "@angular/compiler": "^5.1.1",
    "@angular/compiler-cli": "^5.1.1",
    "@angular/core": "^5.1.1",
    "@angular/forms": "^5.1.1",
    "@angular/http": "^5.1.1",
    "@angular/material": "^5.0.1",
    "@angular/platform-browser": "^5.1.1",
    "@angular/platform-browser-dynamic": "^5.1.1",
    "@angular/platform-server": "^5.1.1",
    "@angular/router": "^5.1.1",

    "primeng": "^5.2.0-rc.1",
}
patriknil90 commented 6 years ago

update: Seems like this isn't only for the TableModule for me. Tried to change import { CalendarModule } from "primeng/primeng" to be imported from "primeng/calendar" instead and got the same error there.

The problem is that I can't seem to import TableModule from "primeng/primeng" which in the Calendar case seems to fix it.

PoTato-C commented 6 years ago

We've got the exact same issue in a project too, with the build --prod and it happens for the Table but also if we try to import an element with the new import style 'primeng/element'

patriknil90 commented 6 years ago

tried adding export * from './components/table/table'; to node_modules/primeng/primeng.d.ts but get the following intellisence error:

[ts] Module './components/datatable/datatable' has already exported a member named 'ScrollableView'. Consider explicitly re-exporting to resolve the ambiguity. [ts] Module './components/datatable/datatable' has already exported a member named 'TableBody'. Consider explicitly re-exporting to resolve the ambiguity.

patriknil90 commented 6 years ago

Okay, took another approach.

Adding the file table.d.ts in node_modules/primeng with the code

export * from './components/table/table';

made it work. Every other module than table needs to be imported from "primeng/primeng" when building with --prod.

bias-keenly commented 6 years ago

Having same issue. Seems to be AOT related. Building without AOT or prod flag builds ok with new 'primeng/[component_name]' pathing. With AOT need to use old pathing 'primeng/primeng' or the full path to component

david-lee commented 6 years ago

@bias-keenly You are right. It looks AOT issue. When I run by ng serve --aot then I got an error like Please add a @NgModule annotation. But it worked fine without '--aot' option. I tested with import { InputTextModule } from 'primeng/inputtext';

cagataycivici commented 6 years ago

I've replicated the situation, thank you for the feedback. For my case it only happens on AOT build with prod. Adding d.ts files fixes this, so we'll do an 5.2.RC2 on 22nd with these changes.

cagataycivici commented 6 years ago

d.ts files of single modules will also be published to npm now which fixes the issue.

scurk1415 commented 6 years ago

When will RC2 be available?

adama357 commented 6 years ago

It just became available, and it works! Thanks! :)

ozturki commented 6 years ago

It does not seem to be fixed.

ozturki commented 6 years ago

import { TableModule } from 'primeng/table'; does not work import { TableModule } from 'primeng/components/table/table'; works

cagataycivici commented 6 years ago

Sorry, we can't replicate and many users reported that issue is fixed.

MarvinZ commented 6 years ago

I had the same issue, and also with MultiSelectModule

so I had to do this:

//other prime components import { TabViewModule } from 'primeng/primeng'; import { FieldsetModule } from 'primeng/primeng'; import { InplaceModule } from 'primeng/primeng'; import { GrowlModule } from 'primeng/primeng';

// components that caused building for prod errors... import { TableModule } from 'primeng/components/table/table'; import { MultiSelectModule } from 'primeng/components/multiselect/multiselect';

and now it works

In Dev mode, everything works fine

mikeplacko commented 6 years ago

Why is it that primeng.js (and prime.d.ts) at the root of the project does not contain an export for the new Table component? It's the only module missing and perhaps is causing some of the odd behavior. It doesn't appear to be needed in my code, but its still odd that no export exists here.

ivijan commented 6 years ago

it is weird that in order to import TableModule I need to use import { TableModule } from 'primeng/table'; it should be listed in main primeng importer { * } from 'primeng/primeng';

slmmm commented 6 years ago

This is still an issue experiencing with primeng@5.2.7. Is there a fix or workaround?

Is generic import from 'primeng/primeng' the solution moving forward too?