Production build

[biancaU]

I generated a new project using angular-cli 1.0.0 and then I added the angular-prism library.
It works great in development, just as expected. It also works if I do a development build with

ng build

But I get an error when I try to make a production build using

ng build --prod 

ERROR in Unexpected value 'PrismComponent' in [my-path]/testApp/node_modules/angular-prism/dist/angular-prism.js' declared by the module 'AppModule in src/app/app.module.ts. Please ass a @Pipe/@Directive/@component annotation

It seems to be a problem when compiling with AOT .

[rjdkolb]

I have the same issue, I've created a sample project to demo this : https://github.com/rjdkolb/coreui-angular-prism-brokenaot

[demiro]

Having the same issue.... any solutions?

[rjdkolb]

I could not figure it out. I removed the library and directly copied the component into my project. Real hacky, but worked like a charm.

[demiro]

@rjdkolb : thanks, was looking for alternatives, but are not many.... so will probably ending doing the same as you! cheers!

@rjdkolb I'm still fairly new to web-dev, but I too have the same issue, ng serve and ng build runs fine, but then with --aot it generates the same error as in @biancaU . could you please elaborate on how you removed the library and copied the component into your project?

[vortechs2000]

I'm seeing the same thing - has anyone figured out why the production build doesn't work? I'm trying to use this with Angular 5 now...

[bluecaret]

+1 Same issue here as well. I was able to copy the plugin directly to my app as well to get around it however.

@makoja I know you posted a while ago, but how I did it was just go into the node_modules folder, copied the angular-prism folder into my app folder. Then everything except the dist/ folder, src/ folder and angular-prism.ts file I deleted. From there I changed my reference to it from:

import { PrismComponent } from 'angular-prism'; to import { PrismComponent } from './lib/angular-prism/angular-prism';

EDIT: Also make sure you still have 'prismjs' installed via NPM! When I uninstalled angular-prism, it uninstalled that. Just manually reinstall it and should be good to go.

[durbonas]

The instructions assume we are using a system.js file to map things out. I have no system.js file, but I think importing something from angualr-prsim into the .angular-cli.json file would correct the issues during the build. So how can we use the .angualr-cli.json file to correct file paths/imports for angular-prism? Thoughts?

[DmytriE]

I have discovered a solution to the problem which works here.

The error that I was encountering was that a Pipe/Directive/Component decorator needed to added. Therefore, I did so.

1. Navigate to /node_modules/angular-prism/dist/src
2. Add the following to prism.component.d.ts

@Directive({
    selector: 'prism-block' // The name does not appear to be important
})

3. OPTIONAL: If you are using elements that have dashes in them then also add:
   schemas: [CUSTOM_ELEMENT_SCHEMA] to the module file that has the component's declaration.