NgPdfRoughWork

This project was generated with Angular CLI version 15.1.1.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Troubleshooting

If PDF not displayed at local, please run the below line

npm run copy-pdf-assets

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Source

• How to Animate a SVG with border-image
• All You Need to Know About Angular Proxy Configuration
• Angular PDFJS viewer with Mozilla's ViewerJS.
• getting cors error trying to use pdf url links - CORS opened pdf link
• HTTP in a standalone Angular application with provideHttpClient
• Angular Inject Function: A New Way To Work With DI
• Using the Inject Function in Angular 15
• Why Angular 14’s new inject() function is so amazing?
• Angular Providers: UseClass, UseValue, UseFactory & UseExisting
• How to use PDF.js in Angular 2/4/5? - stackoverflow
• Custom PDF Rendering in JavaScript with Mozilla’s PDF.Js
• pdf.js with text selection - stackoverflow
• How to Create a JavaScript PDF Viewer

What is the inject() function

The inject() function takes an InjectionToken as a parameter and returns the value for that InjectionToken from the currently active injector. Basically, it’s another way to get a hold of a dependency other than using constructor injection.

In practice the inject() calls are allowed in a constructor, a constructor parameter and a field initializer.

export class AppComponent implements OnInit {
  changeDetectorRef = inject(ChangeDetectorRef); // it works

  constructor() {
    const changeDetectorRef = inject(ChangeDetectorRef); // it works
  }

  ngOnInit() {
    const changeDetectorRef = inject(ChangeDetectorRef); // it throws an error
  }
}

providers: [
  {
    provide: GREETINGS,
    useFactory: () => {
      const userInfo = inject(UserInfo); // works
      return `Hello, ${userInfo.name}!`;
    },
  },
];

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Angular compatibility list

  npx ngvm compat

1. Is there a compatibility list for Angular / Angular-CLI and Node.js? - stackoverflow
2. Version compatibility - Angular official
3. Angular version node compatibility - gist