ERROR in CodemirrorModule is not an NgModule

[sguiheux]

Seems not compatible with angular-cli >=beta-22.

Seems to be link to an incompatibility with angular 2.2* and previous version.
Maybe just need to regenerate js with a recent version of angular2.

[atmanikumar]

Any solution for that?

[sguiheux]

Workaround: "ng2-codemirror-typescript": "1.0.2", I rewrite in Typescript, no more problem for me.

[atmanikumar]

After I followed "ng2-codemirror-typescript" documentation I'm getting an error .. CodemirrorModule is not an NgModule.. When i tried to run ng build in angular cli

I'm using angular-cli beta 22 with typescript

[sguiheux]

Can you write your package.json file? I'm using angular-cli too and i don"t have problem

[atmanikumar]

package.json file

{ "name": "dfp-project", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "start": "ng serve", "lint": "tslint \"src/*/.ts\"", "test": "ng test", "pree2e": "webdriver-manager update", "e2e": "protractor" }, "private": true, "dependencies": { "@angular/common": "2.2.3", "@angular/compiler": "2.2.3", "@angular/core": "2.2.3", "@angular/flex-layout": "^2.0.0-beta.1", "@angular/forms": "2.2.3", "@angular/http": "2.2.3", "@angular/material": "^2.0.0-beta.1", "@angular/platform-browser": "2.2.3", "@angular/platform-browser-dynamic": "2.2.3", "@angular/router": "3.2.3", "@types/lodash": "4.14.42", "angular2-flex": "^1.0.3", "codemirror": "^5.22.2", "core-js": "2.4.1", "express": "4.14.0", "firebase": "3.6.4", "material-design-icons": "^3.0.1", "ng2-codemirror": "^1.0.1", "ng2-codemirror-typescript": "^1.0.2", "ng2-cookies": "1.0.3", "ng2-toastr": "^1.3.2", "rxjs": "5.0.0-beta.12", "ts-helpers": "1.1.1", "zone.js": "0.6.23" }, "devDependencies": { "@angular/compiler-cli": "2.2.3", "@types/jasmine": "2.5.38", "@types/node": "6.0.42", "angular-cli": "1.0.0-beta.22-1", "codelyzer": "~2.0.0-beta.1", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "2.0.0", "karma-cli": "1.0.1", "karma-jasmine": "1.0.2", "karma-remap-istanbul": "0.2.1", "protractor": "4.0.9", "ts-node": "1.2.1", "tslint": "4.0.2", "typescript": "~2.0.3", "webdriver-manager": "10.2.5" } }

[atmanikumar]

App module.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FlexLayoutModule } from "@angular/flex-layout"; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { MaterialModule } from '@angular/material'; import { AppComponent } from './app.component'; import { DfpRouting } from './app.routing'; import { HomeComponent } from './home/home.component'; import { LoginComponent } from './auth/login/login.component'; import { EmailVerificationComponent } from './auth/email-onboarding/email_onboarding.component'; import { SetupPasswordComponent } from './auth/setup-password/setup_password.component'; import { CreateProjectComponent } from './project/create-project/create-project.component'; import { RegistrationComponent } from './auth/registration/registration.component'; import { ResetPwdComponent } from './auth/reset-password/reset-password.component'; import { HeaderMenuComponent } from './menu/header-menu/header-menu.component'; import { SideMenuComponent } from './menu/side-menu/side-menu.component'; import { EditProfileComponent } from './profile/edit-profile/edit-profile.component'; import { ProjectLandingComponent } from './project/project-landing/project-landing.component'; import { CodeComponent } from './code/repository/repository.component'; import { ToastModule } from 'ng2-toastr/ng2-toastr'; //import { Angular2FlexModule } from 'angular2-flex'; import { LinkRepositoryComponent } from './code/link-repository/link-repository.component'; import { BundlesAndStackComponent } from './code/bundles-stacks/bundles-stacks.component'; import { CreateRepositoryComponent } from './code/create-repository/create-repository.component'; import { BuildTestComponent } from './code/build-test/build-test.component'; import { CloudManageComponent } from './cloud/cloud-manage.component'; import { CloudServiceComponent } from './cloud/services/cloud-services.component'; import { CloudAccountComponent } from './cloud/cloud-account/cloud-account.component'; import { CloudManageDetailComponent } from './cloud/manage/cloud-manage-detail.component'; import { UserManagementComponent } from './user-management/user-management.component'; import { ActivitiesComponent } from './activities/activities.component'; import { InputFilter } from './services/query.service'; import { SortPipe } from './services/sort.pipe'; import {CodemirrorModule} from 'ng2-codemirror-typescript';

@NgModule({ declarations: [ AppComponent, HomeComponent, LoginComponent, EmailVerificationComponent, SetupPasswordComponent, CreateProjectComponent, RegistrationComponent, ResetPwdComponent, HeaderMenuComponent, SideMenuComponent, EditProfileComponent, CodeComponent, ProjectLandingComponent, BundlesAndStackComponent, LinkRepositoryComponent, CreateRepositoryComponent, BuildTestComponent, InputFilter, CloudManageComponent, CloudServiceComponent, CloudAccountComponent, CloudManageDetailComponent, UserManagementComponent, ActivitiesComponent, SortPipe ], imports: [ BrowserModule, FormsModule, HttpModule, ToastModule, MaterialModule.forRoot(), DfpRouting, ReactiveFormsModule, CodemirrorModule, ToastModule, FlexLayoutModule.forRoot() ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

[sguiheux]

Diff with me: import {CodemirrorModule} from 'ng2-codemirror-typescript/Codemirror';

[atmanikumar]

Tried this also

[atmanikumar]

Same Error

[sguiheux]

My package .json

"dependencies": { "@angular/common": "2.4.3", "@angular/compiler": "2.4.3", "@angular/core": "2.4.3", "@angular/forms": "2.4.3", "@angular/http": "2.4.3", "@angular/platform-browser": "2.4.3", "@angular/platform-browser-dynamic": "2.4.3", "@angular/router": "3.4.3", "angular2-markdown": "https://github.com/sguiheux/angular2-markdown/tarball/fix", "angular2-moment": "^1.0.0", "angular2-prettyjson": "https://github.com/matiboy/angular2-prettyjson/tarball/master", "angular2-toaster": "^2.0.0", "codemirror": "^5.22.0", "core-js": "^2.4.1", "dragula": "^3.7.2", "font-awesome": "^4.6.3", "immutable": "^3.8.1", "lodash": "~4.17.2", "moment": "^2.17.1", "ng-semantic": "https://github.com/vladotesanovic/ngSemantic/tarball/master", "ng2-codemirror-typescript": "1.0.2", "ng2-dragula": "^1.2.1", "ng2-translate": "^4.2.0", "rxjs": "5.0.1", "semantic-ui": "^2.2.4", "ts-helpers": "^1.1.1", "zone.js": "^0.7.2" }, "devDependencies": { "@angular/compiler-cli": "2.4.3", "@types/jasmine": "2.5.38", "@types/node": "^6.0.42", "@types/sharedworker": "0.0.27", "angular-cli": "1.0.0-beta.25.5", "codelyzer": "~2.0.0-beta.1", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.7.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-junit-reporter": "^1.1.0", "karma-phantomjs-launcher": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "node-sass": "4.1.1", "protractor": "~4.0.13", "ts-node": "1.2.1", "tslint": "^4.3.0", "typescript": "~2.0.3", "webdriver-manager": "10.2.5" }

[cpa-level-it]

I have the same problem.

I tried with 'ng2-codemirror-typescript' using import {CodemirrorModule} from 'ng2-codemirror-typescript/Codemirror'; but like for manikumaar it doesn't work.

What should I give you to help you debug ?

[sguiheux]

If your code is on Github, your github repo :)

[sguiheux]

@cpa-level-it typescript must be v.2.0.x

[cpa-level-it]

@sguiheux I'm sorry, but I can't publicly share my repo.

I'm using "typescript": "2.0.10". I have in my "app.module.ts" :+1:

` ... import { CodemirrorModule } from 'ng2-codemirror-typescript/Codemirror'; import 'codemirror/mode/python/python';

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

Then in some of my template I try to use Codemirror with <codemirror class="editor" [(ngModel)]="code" [config]="editorOptions"> </codemirror>

But I have the following error at runtime (so the error at the build is gone)

Error in ./HistoryLogComponent class HistoryLogComponent - inline template:10:0 caused by: CodeMirror is not defined

[sguiheux]

So it's not the same error :) Could you write your package.json?

[cpa-level-it]

Here it is.

"dependencies": { "@angular/common": "2.4.1", "@angular/compiler": "2.4.1", "@angular/compiler-cli": "2.4.1", "@angular/core": "2.4.1", "@angular/forms": "2.4.1", "@angular/http": "2.4.1", "@angular/platform-browser": "2.4.1", "@angular/platform-browser-dynamic": "2.4.1", "@angular/platform-server": "2.4.1", "@angular/router": "3.4.1", "@types/socket.io-client": "^1.4.29", "angular2-hotkeys": "0.4.0", "angular2-mdl": "2.11.0", "angular2-select": "^1.0.0-beta.2", "codemirror": "^5.22.2", "core-js": "^2.4.1", "moment": "^2.17.1", "ng2-codemirror-typescript": "^1.0.2", "rxjs": "5.0.2", "socket.io-client": "^1.7.2", "ts-helpers": "^1.1.1", "zone.js": "^0.7.4" }, "devDependencies": { "@angular/compiler-cli": "2.4.1", "@types/jasmine": "2.5.39", "@types/node": "^6.0.54", "angular-cli": "1.0.0-beta.24", "codelyzer": "2.0.0-beta.4", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.7.0", "karma": "1.3.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-firefox-launcher": "^1.0.0", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.4.0", "protractor": "4.0.14", "ts-node": "1.7.3", "tslint": "4.2.0", "typescript": "2.0.10" }

[sguiheux]

do you have import codemirror js file in angularcli .json?

[sguiheux]

https://github.com/angular/angular-cli#global-library-installation

[atmanikumar]

angular-cli.json

{ "project": { "version": "1.0.0-beta.22-1", "name": "dfp-project" }, "apps": [ { "root": "src", "outDir": "dist", "assets": [ "images", "favicon.ico" ], "index": "index.html", "main": "main.ts", "test": "test.ts", "tsconfig": "tsconfig.json", "prefix": "app", "mobile": false, "styles": [ "unicorn-app-theme.scss", "styles.css", "lib/codemirror.css" ], "scripts": [ "lib/codemirror.js" ], "environments": { "source": "environments/environment.ts", "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ], "addons": [], "packages": [], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "css", "prefixInterfaces": false, "inline": { "style": false, "template": false }, "spec": { "class": false, "component": true, "directive": true, "module": false, "pipe": true, "service": true } } }

[cpa-level-it]

@sguiheux, it works, thanks !

I also had to import the mode there, so I removed import 'codemirror/mode/python/python; from the app.module.ts file. Otherwise I would have an error.

Here is my scripts section of angular-cli.json in case it helps somebody :

"scripts": [ "../node_modules/codemirror/lib/codemirror.js", "../node_modules/codemirror/mode/python/python.js" ],

[sguiheux]

@manikumaar, i just created a new angular cli project with your package.json. To make it work: use latest version of angular cli 25.5 and 2.4.2 of angular. Remove ng2-codemirror from package.json

[atmanikumar]

@sguiheux It works! Thank you very much for your help..

[yabab-dev]

I've published new version, this one fix this problem.

Thanks to @sguiheux for you workaround :)

[sharath1608]

@sguiheux Worked flawlessy! Thanks! @chymz I don't like to comment on closed issues but Is there a way to get around not importing codemirror? Looks like just including the script in .angular-cli.json is not enough.