Can't Import in Angular 5

[SSchindi]

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. ("
   [ERROR ->]

Thanks for help

[madoar]

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.

[SSchindi]

Now, i builded the package by myself and imported it to my project --> still the same problem.
Do you know when this package finaly comes out for Angular 5?

[madoar]

How did you import the built library in your project?

About the release date:
I can't tell yet. I believe it will still take two to three weeks.

[SSchindi]

How did you import the built library in your project?

I cloned the master branch, installed node packages and build de project. In my final project, i copied the dist folder and imported the main module. --> Still not working

Okay, i temporary programmed my own wizard based on routes and guards.

[madoar]

Can you give me a small sample project, producing the error, so that I can debug it?

[SSchindi]

i tryed it in a new, clean Angular 5 project with modules and submodules

[Ahmadburghol]

I have the same problem, I just did the followings:

• npm install --save ng2-archwizard
• import {ArchwizardModule} from 'ng2-archwizard';
• add imports: [ArchwizardModule]
• put the html snippet into my empty html
• package.json -> "ng2-archwizard": "^2.1.0"

[madoar]

@SSchindi I've planned to write a short documentation how to build ng2-archwizard and how to correctly include it inside your project.
@Ahmadburghol The root of your problem is the same as the initial problem of @SSchindi, i.e the used syntax is for version 3.0.0, while the used library version is 2.1.0.

[Ahmadburghol]

So, what do you suggest ?

[madoar]

@Ahmadburghol The same solution I suggested @SSchindi, i.e. building version 3.0.0 yourself and test if it works for you.

When importing the library I suggest to use npm install --save path/to/ng2-archwizard/dist.
Afterwards you should make sure that npm doesn't create a symlink to the dist folder, because angular seems to have some problems with symlinks.

In addition I would like to hear if version 3.0.0. works for you.
If not, I would like to know what error you received and in addition it would be useful to receive your project, that led to the error.

[martinobordin]

Error using angular/cli "^1.7.0":

Error: D:\MPS\MpsWeb\node_modules\ng2-archwizard\index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package
the library using the Angular Package Format (https://goo.gl/jB3GVv).

[felipealbrecht]

How I am using with angular 5:

Clone the project:
git clone https://github.com/madoar/ng2-archwizard.git

In my project directory:
npm install --save /home/albrecht/development/ng2-archwizard

Pay attention that is ng2-archwizard, not ng-archwizard/dist.
Also, change /home/albrecht/development to the directory where you cloned the ng-archwizard repository.

Another option, is to build the package, and manual copy to node_modules/ng2-archwizard

In your project, open your package.js file and include '--preserve-symlinks' in your ng serve command. For example, mine is:

"scripts": {
    "ng": "ng",
    "start": "ng serve --preserve-symlinks"
}

The --preserve-symlinks is an issue with the ng-packagr (ng-packagr/ng-packagr#304)

[rbperegrino]

Same error here. Build from master and copy folder to my project, in VSCode doesnt show any error but in browsers (Chrome and Firefox) the error appears.

Uncaught Error: Template parse errors:
'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. ("

[ERROR ->] Content of Step 1 Go directly to third Step [ERROR ->] Content of Step 2 Go to next step [ERROR ->] Content of Step 3

[ERROR ->]

Content of Step 1
"): ng:///SharedModule/DynamicFormComponent.html@18:0
at syntaxError (compiler.js:485)
at TemplateParser.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.TemplateParser.parse (compiler.js:24631)
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._parseTemplate (compiler.js:34442)
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34417)
at compiler.js:34318
at Set.forEach ()
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34318)
at compiler.js:34188
at Object.then (compiler.js:474)
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:34187)

[roblawford]

any update on the angular 5 release?

[zolakt]

A little confused here. If it's mostly working for Angular5, why not just build a npm preview version from that branch instead of making everyone import everything manually?

[madoar]

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.