Posts

Showing posts with the label Webpack

Fixing the "Please add a @Pipe/@Directive/@Component annotation" Error In An Angular App After Upgrading to webpack 4

I'm currently in the process of upgrading an Angular application which does not  use the Angular CLI from webpack 2 to webpack 4. The incremental upgrade from webpack 2 to 3 was easy, but once I made the jump from 3 to 4, I encountered a lot of problems. I went through them one by one, but the one that had me stumped was the following: Unhandled Promise rejection: Unexpected value 'MakePositivePipe' declared by the module 'SharedModule'. Please add a @Pipe/@Directive/@Component annotation. ; Zone: <root> ; Task: null ; Value: Error: Unexpected value 'MakePositivePipe' declared by the module 'SharedModule'. Please add a @Pipe/@Directive/@Component annotation. The code was transpiling/compiling fine, but this error was occurring when I'd navigate to a page containing this pipe. This code has worked fine under webpack 2 and 3. I made sure that the pipe was being set up as a declaration , which it was. What finally  corrected the issue for me w...

Using Webpack to Bundle CSS with Images and Fonts

One of my teams at work is currently developing in Angular 2, and we use Webpack for all of our TypeScript transpilation, module loading, and bundling. Yesterday we ran into an issue where one of the developers had made references to CSS files located in the node_modules directory of one of the 3rd party libraries we're using. This presented a problem because we don't distribute the node_modules folder as part of our build and deployment process -- we use JavaScript bundles created by Webpack. To correct the problem, I leveraged Webpack again, this time to bundle the required CSS files. The first step was to create a SASS file (.scss) which would be used as the entry point by Webpack. The reasoning behind using SASS was to allow us to do more than just reference the other stylesheets. But for the time being, it would do just that, and act as our entry point for Webpack to build its dependancy graph of our styles. Here's what the SASS file looked like at the start: @im...