Allow newer versions of Angular as dependencies

[ArjanKw]

To prevent dependency on an old Angular version, which causes Node warnings, as it requires an older version of Node.

[alvarotrigo]

I think this is meant to be using version 12 to be able to be fully compatible from version 12 of Angular onwards.
See #134

@alidihaw what do you think?

[ArjanKw]

The demos in #134 use the generated output in the dist folder. This approach works for me as well. When I copy the dist folder of the output that was earlier generated in a Angular 12 project, then I can reference that. But when I just add the npm package to a Angular 19 project, then it fails, as this package is dependent on Angular 12 and Angular 12 isn't compatible with the current version of Node.

npm warn EBADENGINE Unsupported engine {
npm warn EBADENGINE   package: '@angular/[email protected]',
npm warn EBADENGINE   required: { node: '^12.14.1 || ^14.0.0' },
npm warn EBADENGINE   current: { node: 'v22.14.0', npm: '10.9.2' }
npm warn EBADENGINE }

[alvarotrigo]

@ArjanKw alright, so you suggest adding > 12 on package.json just to prevent issues with people installing the package in modern Angular version right?

But do we have to modify the tsconfig.json file too?

[alidihaw]

@alvarotrigo not really all from version 12 of Angular onwards, because sometime new version will have different configuration also,
But last time angular 12 - angular 17 its works with last version,

Warn Npm install for package is not stopping when install package.json
i still can install node_modules even have that warn

We not need update package.json
because on src/package.json
when build is using

"peerDependencies": {
"@angular/common": ">12.0.0",
"@angular/core": ">12.0.0"
},
"dependencies": {
"fullpage.js": "4.0.35",
"tslib": "^2.1.0"
},

when change to ES2022 will effect to oldest version,

I will try update Angular 18 and Angular 19 Demos, is like need update like deprecated config browserTarget > buildTarget, etc

[ArjanKw]

I was about to send a comment that confirms what you just posted. When I create a new Angular 19 project and follow the installation instruction (which has one step: npm install @fullpage/angular-fullpage), then import { AngularFullpageModule } from '@fullpage/angular-fullpage'; fails with Cannot find module '@fullpage/angular-fullpage' or its corresponding type declarations.. Which is indeed because of the extra folders inside node_modules.

Apart from that, the demo's are indeed not using the npm package, as this is in the package.json of the Angular 19 demo:

"dependencies": {
    "@angular/animations": "19.0.0",
    "@angular/common": "19.0.0",
    "@angular/compiler": "19.0.0",
    "@angular/core": "19.0.0",
    "@angular/forms": "19.0.0",
    "@angular/platform-browser": "19.0.0",
    "@angular/platform-browser-dynamic": "19.0.0",
    "@angular/router": "19.0.0",
    "fullpage.js": "4.0.35",
    "rxjs": "~7.8.0",
    "zone.js": "~0.15.0"
  }

It uses the compiled output, which has been put into the dist folder by the post-build step in angular-fullpage/package.json:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "post-build": "cpx README.md dist/@fullpage/angular-fullpage",
    "build": "ng build angular-fullpage && npm run post-build",
    "lint": "ng lint"
  },

The demo ties this dist folder to '@fullpage/angular-fullpage' by linking it in the tsconfig.json (see demo/angular19/tsconfig.json):

"paths": {
      "@fullpage": [
        "../../dist/@fullpage"
      ],
      "@fullpage/*": [
        "../../dist/@fullpage/*"
      ]
    }

So in my opinion the demo doesn't give a demo on how to use the npm package, it shows that the compiled Angular 12 output can be copied into a Angular 12 - 19 project and be referenced/used with an extra step. When I do use the npm package (as the installation instruction suggests that is the way to use this package), npm install gives the long list of warnings and the import fails.

It would indeed be nice if the demo's are updated to showcase how to use the npm package.

[alvarotrigo]

Ok I see, so basically I published the wrong content to npm and now the package folded structure is wrong:

It should be fixed on the latest version 0.1.6

[alvarotrigo]

Apart from that, the demo's are indeed not using the npm package, as this is in the package.json of the Angular 19 demo:

That's a good point.
We should update the demos to provide a real use case on how to use the angular package for fullpage.js instead of pointing to the compiled file.

What do you think @alidihaw ?
Can we do this too?

[alidihaw]

@alvarotrigo
I has try angular12-angular19 is still works
#145

[ArjanKw]

Thank you both, the new version works. With the correct folder structure the right package.json is loaded. This one is compatible with newer Angular versions:

"peerDependencies": {
    "@angular/common": ">12.0.0",
    "@angular/core": ">12.0.0"
  },

The import works again and the NPM node compatibility warnings dissapear. As #145 was opened for this, I think we can close this #143 PR and merge #145? Thank you for your swift action, which allow me to finish the upgrade to Angular 19.