Mike
Mike

Reputation: 972

Angular 4+ 3rd party module import 404 error with base tag

I am putting an angular portion into my MVC app. As such, I have added a tag to my layout view to find the Angular source code, and this is working great.

My issue arises in trying to add a 3rd party module to my project. I added it through the package.json with no problem, and added the module to my app.module.ts as follows:

import { FileUploadModule } from 'primeng/fileupload';

The reference is found, Visual Studio is happy, everything is fine. However, when I run the project locally, I get the following 404 error:

GET http://localhost:59911/src/primeng/fileupload 404 (Not Found)

It seems to me likely that the tag is causing the issue, but I can't remove it without killing the rest of the Angular functionality. Any hints? Can I add an override to the imports call?

Thanks, Mike

Upvotes: 2

Views: 162

Answers (2)

Mike
Mike

Reputation: 972

The issue was that primeng was not in the mapping, so it was looking for it in src.

I added the following to systemjs.config.js:

  • in maps:

    'primeng': 'npm:primeng',

  • in packages:

    primeng: { defaultExtension: 'js' }

Thanks for the help everyone!

Upvotes: 1

Haifeng Zhang
Haifeng Zhang

Reputation: 31915

On PrimeNG's official website they suggested using import { FileUploadModule } from 'primeng/fileupload'; but it doesn't work any more. I guess they didn't update the docs.

You need { FileUploadModule } from 'primeng/primeng';

The structure is enter image description here

In the primeng.d.ts file PrimeNG re-exported all modules.

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

For now, no matter which PrimeNG module is used, it is all from primeng/primeng. Here's the imported modules in my project:

import {
  ButtonModule,
  CodeHighlighterModule,
  ConfirmDialogModule,
  FieldsetModule,
  FileUploadModule,
  GrowlModule,
  MessagesModule
} from 'primeng/primeng';

The version I use is "primeng": "^4.2.1"

Upvotes: 1

Related Questions