2

I’m having template parse errors in Monaca debugger. When using monaca preview, it is running in the browser without any problem, but when I use monaca debug, I see “Error: Template parse errors: Can't bind to 'ngif' since it isn't a known property of 'span'.” in the Applog. I have carefully checked, the error is caused by “*ngif” directive.

I've also checked - all Angular directives also cause the same issue.

I attached screenshots of the Applog.

1_1476975967061_Screenshot_2016-10-20-16-03-47.png

0_1476975967059_Screenshot_2016-10-20-15-19-11.png

I have cross posted this here.

halfer
  • 19,824
  • 17
  • 99
  • 186
Ema4rl
  • 577
  • 1
  • 6
  • 17
  • I'm pretty sure that the error is caused because a post-processor in monaca lowercases the HTML directives. Eg: from `*ngIf` to `*ngif`. _Notice the lowercase 'i'_; check this [answer](http://stackoverflow.com/a/38533535/1937344) – Ema4rl Oct 21 '16 at 21:33
  • I'm currently tracing the issue. The `HtmlWebpackPlugin` seems to be the issue... – Ema4rl Oct 21 '16 at 21:45
  • Now using a temporary/hacky solution: I wrap the html containing a case-sensitive directive with `` so that it can be skipped during minification. See the [documentation](https://github.com/kangax/html-minifier#ignoring-chunks-of-markup). Still expecting a final solution though. – Ema4rl Oct 22 '16 at 12:03
  • Have this ever been solved? if not can you give an example code with ignore part – pHoutved Dec 14 '16 at 17:21
  • @Skipper, simply wrap the HTML section that contains the directive with `` _(as opening and closing tags)_ and re-run your project. I think you can also disable minification of HTML files (but I advise against it) – Ema4rl Dec 15 '16 at 18:22

2 Answers2

0

You should have 2 webpack config files, development and production. webpack.prod.config.js is using HTMLWebpackPlugin for minifying the HTML. Simply add caseSentisive: true option to the minify configuration (around line 120). All the options for HTMLWebpackPlugin here and its minifier here.

I just added this option to the default template. Hope it helps!

Fran Dios
  • 3,482
  • 2
  • 15
  • 26
  • Nice point but it still ain't working. Please take a spin for yourself. You can use Onsen UI's default templates as the base. – Ema4rl Nov 07 '16 at 22:33
-1

Set useAsDefault: true in the child routing of application.route.ts.

I.e. we have to specify which route is to be open by default.

Scott Weldon
  • 9,673
  • 6
  • 48
  • 67
Shodipo Ayomide
  • 1,329
  • 13
  • 20
  • This is an Onsen UI mobile application. I think that routing is handled internally by `OnsenModule`. – Ema4rl Oct 21 '16 at 21:20