Instructions for generator-angular-fullstack?

[mzmousa]

Has anyone added this into their web app using generator-angular-fullstack? I'm struggling to get it working. A few things I tried:

Adding these lines in client/app/app.js:

import angularpdf from '../../node_modules/angular-pdf/dist/angular-pdf';
import pdf from '../../node_modules/pdfjs-dist/pdf';
angular.module('documentClassifierApp', [ngCookies, ngResource, ngSanitize, uiRouter, uiBootstrap,
  _Auth, account, admin, 'validation.match', navbar, footer, main, constants, util, 
  angularpdf, pdf, 'pdf'
])

Creating a new component pdfViewer in client/components/ Here's client/components/pdfViewer.component.js

import angular from 'angular';
export class PdfViewerComponent {
	/*@ngInject*/
	constructor($log, $scope) {
		'ngInject';
		let vm = this;
		vm.$scope = $scope;
		vm.pdfName = 'pdfName';
		vm.pdfUrl = 'pdf.pdf';
		vm.pdfPassword = 'test';
		vm.scroll = 0;
		vm.loading = 'loading';

		vm.getNavStyle = function(scroll) {
			if(scroll > 100) return 'pdf-controls fixed';
			else return 'pdf-controls';
		};

		vm.onError = function(error) {
			console.log(error);
		};

		vm.onLoad = function() {
			vm.loading = '';
		};

		vm.onProgress = function (progressData) {
			console.log(progressData);
		};

		vm.onPassword = function (updatePasswordFn, passwordResponse) {
			if (passwordResponse === PDFJS.PasswordResponses.NEED_PASSWORD) {
			    updatePasswordFn(vm.pdfPassword);
			} else if (passwordResponse === PDFJS.PasswordResponses.INCORRECT_PASSWORD) {
			    console.log('Incorrect password')
			}
		};
	}
}

export default angular.module('directives.pdfViewer', [])
  .component('pdfViewer', {
    template: require('./pdfViewer.html'),
    controller: PdfViewerComponent
  })
  .name;

Here's client/components/pdfViewer.html:

<div class="wrapper" ng-controller="PdfViewerComponent">
  <h1>{{pdfName}}</h1>
  <ng-pdf template-url="viewer.html" scale="page-fit" page=13></ng-pdf>
</div>

Then finally in main.html, I added

<pdfViewer-component></pdfViewer-component>

I get errors such as:

Error: [$injector:modulerr] Failed to instantiate module documentClassifierApp due to:
[$injector:modulerr] Failed to instantiate module {"PDFJS":{"compatibilityChecked":true,"version":"1.8.550","build":"afb1cd73","pdfBug":false,"verbosity":1,"VERBOSITY_LEVELS":{"errors":0,"warnings":1,"infos":5},"OPS":{"dependency":1,"setLineWidth":2,"setLineCap":3,"setLineJoin":4,"setMiterLimit":5,"setDash":6,"setRenderingIntent":7,"setFlatness":8,"setGState":9,"save":10,"restore":11,"transform":12,"moveTo":13,"lineTo":14,"curveTo":15,"curveTo2":16,"curveTo3":17,"closePath":18,"rectangle":19,"stroke":20,"closeStroke":21,"fill":22,"eoFill":23,"fillStroke":24,"eoFillStroke":25,"closeFillStroke":26,"closeEOFillStroke":27,"endPath":28,"clip":29,"eoClip":30,"beginText":31,"endText":32,"setCharSpacing":33,"setWordSpacing":34,"setHScale":35,"setLeading":36,"setFont":37,"setTextRenderingMode":38,"setTextRise":39,"moveText":40,"setLeadingMoveText":41,"setTextMatrix":42,"nextLine":43,"showText":44,"showSpacedT

as well as a number of other errors - I'm just looking for some help on my approach. Thanks!

[dennybiasiolli]

Hi @mzmousa, I think you can't import 'pdf' in an angular module because it's not an angular module. Simply include it in your html page with <script src="path/to/your/pdf.js/lib". Hope this helps!

[dennybiasiolli]

@mzmousa did you resolve this issue?

[mzmousa]

@dennybiasiolli Yes, I will update this issue shortly