Closed Eraldo closed 7 years ago
doxiaodong
commented
7 years ago Sorry for late. How Ionic Native use css
And if you do not use bundles/ng2-simplemde.umd.min.js, you should have a rule with https://github.com/doxiaodong/ng2-simplemde/blob/master/src/simplemde.component.ts#L23
Eraldo
commented
7 years ago Better late than never. ;)
Are you sure it has something to do with ionic? I am not using any of the ionic native features in my app as of yet. I am using it my ionic components which are just angular components afaik.
What do you mean with "should have a rule with {{url}}" ? What kind of rule? And where can I put it?
Thanks!
doxiaodong
commented
7 years ago For webpack:
test: /\.css$/, use: ['style-loader', 'css-loader']https://github.com/webpack-contrib/css-loader
btw, how do you use style in you repo?
doxiaodong
commented
7 years ago I have a look at ionic, it's not a completely use of angular. if you cannot find any way to resolve it. I can release a new version with no-style import. for example:
import { NgModule } from '@angular/core'
import { SimplemdeModule, SIMPLEMDE_CONFIG } from 'ng2-simplemde/no-style'
@NgModule({
imports: [
SimplemdeModule.forRoot({
provide: SIMPLEMDE_CONFIG,
// config options 1
useValue: $options1
})
],
bootstrap: [AppComponent]
})
export class AppModule { }And you can add style in index.html
<link href="simplemde/dist/simplemde.min.css" rel="stylesheet">Let me know if you need.
doxiaodong
commented
7 years ago I release 1.1.0 for this https://github.com/doxiaodong/ng2-simplemde#style
Eraldo
commented
7 years ago Unfortunately I will only get to testing in in about 2 weeks. I hope it will work. Thank you @doxiaodong ! :)
doxiaodong
commented
7 years ago mv to close
Eraldo
commented
7 years ago Sorry for the long wait Doxiadong. :)
Eraldo
commented
7 years ago Hello @doxiaodong,
I focused on other features for the time being. Now I am back to this library and giving it another try. :)
I am using lazy loading.
I tried to use your fix and imported the library without styles: import { SimplemdeModule, SIMPLEMDE_CONFIG } from 'ng2-simplemde/no-style' into the root module and configures it as you suggested. I also added the CDN.
However I get this error:
Uncaught (in promise): Error: Template parse errors: 'simplemde' is not a known element: 1. If 'simplemde' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <div class="journal" padding *ngIf="entry$ | async as entry" Markdown> {{ entry.content }} [ERROR ->]<simplemde [(ngModel)]="text"></simplemde> </div> </ion-content> "): ng:///JournalPageModule/JournalPage.html@35:4 Error: Template parse errors: 'simplemde' is not a known element: 1. If 'simplemde' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <div class="journal" padding *ngIf="entry$ | async as entry" Markdown> {{ entry.content }} [ERROR ->]<simplemde [(ngModel)]="text"></simplemde> </div> </ion-content> "): ng:///JournalPageModule/JournalPage.html@35:4 at syntaxError (http://localhost:8100/build/vendor.js:146983:34) at TemplateParser.parse (http://localhost:8100/build/vendor.js:158096:19) at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:172146:39) at http://localhost:8100/build/vendor.js:172066:62 at Set.forEach (native) at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:172066:19) at http://localhost:8100/build/vendor.js:171953:19 at Object.then (http://localhost:8100/build/vendor.js:146973:125) at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:171952:26) at JitCompiler.compileModuleAsync (http://localhost:8100/build/vendor.js:171881:37)This is not surprising for me, since I cannot use the .forRoot when using lazy loading I need to import them as feature modules as far as I understood.
Anyway.. I tried again importing only SimplemdeModule from import {SimplemdeModule} from "ng2-simplemde/no-style"; inside my module.
In that case I get no error cheer.
This is the Component code:
@IonicPage()
@Component({
selector: 'page-journal',
templateUrl: 'journal.html',
})
export class JournalPage implements OnInit {
text = '# Foo Bar/nBlub **bold**. Is it working?.';
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad JournalPage');
}
}And this is the template code: <simplemde [(ngModel)]="text"></simplemde>
As you see, when I try to use the simplemde component, I get this:
It is empty and there is not text displayed. I cannot click inside of it. And as you might guess I cannot change my text. :|
If I inspect the component, I see:
<simplemde ng-reflect-model="# Foo Bar/nBlub **bold**. Is it working?." class="ng-untouched ng-pristine ng-valid">
But it does not show. :|
I also tried:
<form [formGroup]="form" (ngSubmit)="save()">
<simplemde formControlName="content"></simplemde>
</form>with
ngOnInit(): void {
this.form = this.formBuilder.group({
content: ['Test.'],
});
}But that does not work either. I get TypeError: Cannot read property 'value' of undefined at Simplemde.writeValue (simplemde.component.js:55)
Any ideas? I'd really love to get this to work! :)
Eraldo
commented
7 years ago Concerning the css error, I found this: https://stackoverflow.com/questions/40071845/how-to-import-css-from-node-modules-in-webpack-angular2-app The problem seems to be this: https://github.com/doxiaodong/ng2-simplemde/blob/master/src/index.ts#L1
And importing the style inside the simplemde component should solve it!
I gave it a try: https://github.com/doxiaodong/ng2-simplemde/pull/3
Maybe it also makes sense to add encapsulation: ViewEncapsulation.None, to the component as stated in the stackoverflow post.
Eraldo
commented
7 years ago Can you please also share your perspective on why I don't get to see any text?
Eraldo
commented
7 years ago Can you please help me solve this?
doxiaodong
commented
7 years ago ng2-simplemde/no-style doesn't work?
Eraldo
commented
7 years ago I did get the no-style version to work now.
The issue was that I tried to use it as a formControl, which does not seem to work yet.
I created a new issue for that: https://github.com/doxiaodong/ng2-simplemde/issues/6
doxiaodong
commented
7 years ago get it
Do you know what I did wrong here? :)
All I did was install:
npm i ng2-simplemde --saveAnd configure the import imapp.module.ts:Stack trace:
Version context: