4

Any help in understanding why I'm getting this error below installing and then referencing npm Angular2-wizard in my Stackblitz.

I have this Stackblitz and I installed angular2-wizard. After I installed it I referenced it in my test.module.ts file like this (according to the docs):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StripeComponent } from './stripe/stripe.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgxStripeModule } from 'ngx-stripe';
import { FormWizardModule } from 'angular2-wizard';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    FormWizardModule
  ],
  declarations: [StripeComponent],
  exports: [
    StripeComponent
  ]
})
export class TestModule { }

I see this error on the screen:

enter image description here

chuckd
  • 13,460
  • 29
  • 152
  • 331
  • Did you do the bit noted in the development section? https://github.com/maiyaporn/angular2-wizard#development –  Mar 04 '23 at 01:56
  • How would I do this in my Stackblitz? – chuckd Mar 04 '23 at 02:18
  • no idea. But I presume you did the stackblitz for question asking purposes and are really working locally. Maybe not true? –  Mar 04 '23 at 15:55
  • I did the Stackblitz question because I have a bigger problem with this package that I'd like to post on Stackoverflow, but in order to post it, I have to get the damn Angular2-wizard working first. I'm not sure what you mean by "working locally", I guess you mean that I have a project on my machine that is using it? – chuckd Mar 04 '23 at 17:16
  • the missing files are components of `angular2-wizard`. i think the dependencies are not installed yet, try to restart the server. – Tobok Sitanggang Mar 06 '23 at 04:33
  • How do I restart the server? – chuckd Mar 06 '23 at 05:24
  • The error you are getting is likely related to the fact that Angular2-wizard is not compatible with Angular 12 or later. Angular2-wizard was last updated in 2017 and I assume it was designed to work with Angular 2 and Angular 4. –  Mar 10 '23 at 15:35
  • It works at home with my Angular 15 project. – chuckd Mar 10 '23 at 18:05

2 Answers2

1

I have a hunch that this is caused by the the manner in which angular2-wizard are exporting these components from their library in index.ts:

export * from './src/wizard.component';
export * from './src/wizard-step.component';

https://github.com/maiyaporn/angular2-wizard/blob/master/index.ts

When Stackblitz initializes it encapsulates/sandboxes the code into a webcontainer environment. When it tries to resolve the './src/wizard.component' routes it is most likely looking at the root src directory that is defined in your project instead of the correct node_modules/angular2-wizard/src directory. This may explain why this works for you locally but not here.

I figured that the fix for this would be to rename the src directory to something else, however it appears that there may be a bug in Stackblitz for Angular projects because it always tries to reference /~/src/main.ts regardless of the name of the directory main.ts is in:

Cannot read file '/~/src/main.ts': Error: ENOENT: No such file or directory., '/~/src/main.ts'. The file is in the program because: Root file specified for compilation

I am going to raise a bug for this against Stackblitz (will link to this question when I have), but for now it looks like you are out of luck.

https://github.com/stackblitz/core/issues/2456
https://github.com/stackblitz/core/issues/2455

Zze
  • 18,229
  • 13
  • 85
  • 118
-1

Rather than using npm to install angular2-wizard

Try downloading the source of the latest release and copying the files in the src/ directory (contains the files wizard.component.ts, wizard-step.component.ts, wizard.component.spec.ts, wizard-step.component.spec.ts) to your src/ directory.

Instead of installing angular2-wizard as a package, you're just adding the components to your project.

OneLoneTurnip
  • 1