ERROR in CodemirrorModule is not an NgModule
sguiheux opened this issue · 24 comments
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.
Any solution for that?
Workaround: "ng2-codemirror-typescript": "1.0.2",
I rewrite in Typescript, no more problem for me.
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
Can you write your package.json file?
I'm using angular-cli too and i don"t have problem
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"
}
}
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 { }
Diff with me:
import {CodemirrorModule} from 'ng2-codemirror-typescript/Codemirror';
Tried this also
Same Error
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"
}
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 ?
If your code is on Github, your github repo :)
@cpa-level-it typescript must be v.2.0.x
@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" 👍
`
...
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
So it's not the same error :)
Could you write your package.json?
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"
}
do you have import codemirror js file in angularcli .json?
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
}
}
}
@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" ],
@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
@sguiheux It works! Thank you very much for your help..
I've published new version, this one fix this problem.
Thanks to @sguiheux for you workaround :)
@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.