Compatibility with Angular 4.0.0

[dacofr]

Hi,

I'm new in the world JS with Angular + Typescript + Webpack :)

I've tried to implement your module to use KC

My package.json looks like

  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/router": "4.0.0",
    "@ebondu/angular2-keycloak": "^0.6.0",
    "angular2-text-mask": "8.0.0",
    "core-js": "^2.4.1",
    "moment": "2.18.1",
    "ng2-bootstrap": "1.6.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.0.1",
    "ts-promise": "^0.3.4",
    "zone.js": "^0.8.5"
  },

I've modified my main module (named BopModule) and my component to implement OnInit like the usage https://github.com/ebondu/angular2-keycloak#usage

When i run my start my application (npm start), i obtain the error in my JS console

Uncaught Error: Unexpected value 'Ng2KeycloakModule' imported by the module 'BopModule'. Please add a @NgModule annotation.
    at syntaxError (eval at <anonymous> (http://localhost:8080/js/vendor.js:1020:1), <anonymous>:1682:34) [<root>]
    at eval (eval at <anonymous> (http://localhost:8080/js/vendor.js:1020:1), <anonymous>:14137:44) [<root>]
    at Array.forEach (native) [<root>]
    at CompileMetadataResolver.getNgModuleMetadata (eval at <anonymous> (http://localhost:8080/js/vendor.js:1020:1), <anonymous>:14120:49) [<root>]
    at JitCompiler._loadModules (eval at <anonymous> (http://localhost:8080/js/vendor.js:1020:1), <anonymous>:25222:64) [<root>]
    at JitCompiler._compileModuleAndComponents (eval at <anonymous> (http://localhost:8080/js/vendor.js:1020:1), <anonymous>:25181:52) [<root>]
    at JitCompiler.compileModuleAsync (eval at <anonymous> (http://localhost:8080/js/vendor.js:1020:1), <anonymous>:25143:21) [<root>]
    at PlatformRef_._bootstrapModuleWithZone (eval at <anonymous> (http://localhost:8080/js/vendor.js:14:1), <anonymous>:5014:25) [<root>]
    at PlatformRef_.bootstrapModule (eval at <anonymous> (http://localhost:8080/js/vendor.js:14:1), <anonymous>:4999:21) [<root>]
    at HTMLDocument.main (eval at <anonymous> (http://localhost:8080/js/app.js:2216:1), <anonymous>:11:64) [<root>]
    at Zone.runTask (eval at 898 (http://localhost:8080/js/polyfills.js:838:1), <anonymous>:165:47) [<root> => <root>]
    at HTMLDocument.ZoneTask.invoke (eval at 898 (http://localhost:8080/js/polyfills.js:838:1), <anonymous>:460:38) [<root>]

My BopModule look like

import { Ng2KeycloakModule } from '@ebondu/angular2-keycloak';

@NgModule({
    imports: [
        ModalModule.forRoot(),
        BopRoutingModule,
        BrowserModule,
        FormsModule,
        StyleguideModule,
        HttpModule,
        Ng2KeycloakModule
    ],
    providers: [
        routingProviders
    ],
    declarations: [
        BopComponent,
        StyleguideComponent,
    ],
    bootstrap: [BopComponent]
})
export class BopModule {
}

Do you think i've made a mistake ? Or do you think that your library could be incompatible with Angular4 ?

Thanks for yout help

[ebondu]

Hi, Your configuration looks fine but there are other configurations files (webpack). I just tested the lib with a fresh project based on https://github.com/AngularClass/angular-starter (it runs under angular 4.1.2). I just added the lib dependency in the package.json, updated the app.module.ts to declare the module and compilation is OK. I added a login button on the home page + a valid keycloak.json and I am able to view the login page. To me It seems to be more a app configuration issue rather than a lib issue.

[ebondu]

You can try with version 0.8.1, I tried with a fresh angular 4 project (4.2.5) + angular-cli 1.2.0. Have a look to the exemple for the module import.