Help needed: A "solved" problem with end tags


#1

Hi everyone :slight_smile:

I’m new to Ionic, so I started out by following the Ionic Crash Course (2.x or above) on YT. Up until now I have never used HTML or Java, just C++ and Python.
While following it, you have to implement a list with buttons (around 17:20-ish).
I verbatim copied the code and the next code of the follwing minutes which creates the necessary references (until 19:00).

The code looks like this:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
      {{ item }}
    </button>
  <ion-list>
</ion-content>

But instead of showing me the list it gave me the following error:
“Runtime Error
Template parse errors: Unexpected closing tag “ion-content”. It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (” [Error ->] “): ng:///AppModule/Homepage.html@19:0”

After reading this, following the given link and searching this forum I came up with the solution that must soomehow imply an and just deleted the in the code above (last line) which worked. I felt like this was a pretty ugly solution, since the is missing, messing up the scope checks in my editor etc.

My questions are: Why does this work? Are there more beautiful solutions for this?

Background info:
Below the Stack in the Error it says:
“syntaxError@http://localhost:8101/build/main.js:76640:34 DirectiveNormalizer.prototype.normalizeLoadedTemplate@http://localhost:8101/build/main.js:88457:19 DirectiveNormalizer.prototype.normalizeTemplateSync@http://localhost:8101/build/main.js:88433:16 DirectiveNormalizer.prototype.normalizeTemplate@http://localhost:8101/build/main.js:88407:38 CompileMetadataResolver.prototype._loadDirectiveMetadata@http://localhost:8101/build/main.js:89345:49 CompileMetadataResolver.prototype.loadNgModuleDirectiveAndPipeMetadata/<@http://localhost:8101/build/main.js:89541:48 CompileMetadataResolver.prototype.loadNgModuleDirectiveAndPipeMetadata@http://localhost:8101/build/main.js:89540:13 JitCompiler.prototype._loadModules/<@http://localhost:8101/build/main.js:100736:34 JitCompiler.prototype._loadModules@http://localhost:8101/build/main.js:100735:9 JitCompiler.prototype.compileModuleAndComponents@http://localhost:8101/build/main.js:100689:47 JitCompiler.prototype.compileModuleAsync@http://localhost:8101/build/main.js:100651:18 PlatformRef.prototype.bootstrapModuleWithZone@http://localhost:8101/build/main.js:5089:16 PlatformRef.prototype.bootstrapModule@http://localhost:8101/build/main.js:5075:16 @http://localhost:8101/build/main.js:74909:1 webpack_require@http://localhost:8101/build/main.js:20:12 @http://localhost:8101/build/main.js:66:18 @http://localhost:8101/build/main.js:1:11

And

Ionic Framework: 3.5.0
Ionic App Scripts: 1.3.12
Angular Core 4.1.3.
Angular Compiler CLI: 4.1.3.
Node: 6.11.0
Os Platform: macOS Sierra
Navigator Platform: MacIntel


#2

How to post code.


#3

Thank you for the help! I edited the post.


#4

The problem is in the second-to-last line, which should be </ion-list>, not <ion-list>.


#5

Thank you very much for pointing out this mistake! I was blind and didn’t see it.