question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't Import in Angular 5

See original GitHub issue

Hey Guys

I’m trying to import this libary in my angluar 5 Project. I installed it with Yarn (yarn add ng2-archwizard -s) and imported the archwizardmodule in my AppModule:

`import { BrowserModule } from ‘@angular/platform-browser’; import { NgModule } from ‘@angular/core’; import { ArchwizardModule } from ‘ng2-archwizard’; import { AppComponent } from ‘./app.component’;

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ArchwizardModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }`

In HTML, i used the basic-template-code: <aw-wizard> <aw-wizard-step stepTitle="Title of step 1"> Content of Step 1 <button type="button" awNextStep>Next Step</button> <button type="button" awGoToStep="2">Go directly to third Step</button> </aw-wizard-step> <aw-wizard-step stepTitle="Title of step 2" awOptionalStep> Content of Step 2 <button type="button" awPreviousStep>Go to previous step</button> <button type="button" awNextStep>Go to next step</button> </aw-wizard-step> <aw-wizard-step stepTitle="Title of step 3"> Content of Step 3 <button type="button" awPreviousStep>Previous Step</button> <button type="button" (click)="finishFunction()">Finish</button> </aw-wizard-step> </aw-wizard>

This error occurs: ‘aw-wizard-step’ is not a known element:

  1. If ‘aw-wizard-step’ is an Angular component, then verify that it is part of this module.
  2. If ‘aw-wizard-step’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. ("<aw-wizard> [ERROR ->]<aw-wizard-step stepTitle="Title of step 1">

Thanks for help

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:16 (6 by maintainers)

github_iconTop GitHub Comments

3reactions
madoarcommented, Jan 29, 2018

The problem is, that you’re using ng2-archwizard version 2.1.0, while the syntax you’re using is for version 3.0.0, which is currently in development.

About version 2.1.0:

This is the current stable version, which you can download via npm and yarn. To get the correct documentation for this version please take a look at the README file located at yarn or npm. Please be aware, that version 2.1.0 has been created for and with angular 4, so it is possible that it may not work as expected with angular 5.

About version 3.0.0:

This is the version currently located on the github master branch. This version has been written to be compatible with angular 5. It currently can’t be downloaded from npm, yarn or other package managers, because it is still in development. To get version 3.0.0 you currently need to build it yourself.

The advantage of version 3.0.0 is not only that it is compatible with angular 5. It also introduces some new features, that were wished for by the community, like the ability to style the wizard from inside your application, and the ability to insert and remove steps after initialization.

1reaction
madoarcommented, Mar 23, 2018

I’ve just release version 3.0.0, which is compatible with angular 5. Version 3.0.0 is released under a new package name, named angular-archwizard.

If you have some issues with the new version please open a new github issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can't import local json file in angular 5 - Stack Overflow
I have tried the require method and the import method. Neither seems to work. I'm using Angular 5 and Typescript 2.9.2.
Read more >
NgModule FAQ - Angular
Import NgModules whose public (exported) declarable classes you need to reference in this module's component templates. This always means importing CommonModule ...
Read more >
Usage of Angular libraries published to npm
If a legacy JavaScript library is not imported into an application, you may add it to the runtime global scope and load it...
Read more >
Creating libraries - Angular
Anything exported from this file is made public when your library is imported into an application. Use an NgModule to expose services and...
Read more >
NG8003: No directive found with export - Angular
Angular can't find a directive with {{ PLACEHOLDER }} export name. This is common with a missing import or a missing exportAs on...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found