Incomplete generation of home.compoonent.html via ABP CLI #8138

burkay created 2 months ago

Hello.

I used ABP CLI 8.3.2 to generate a new project. Below is the command I used and its output:

abp new Acme.BookStore -u angular -dbms PostgreSQL -m none --theme leptonx-lite -csf ABP CLI 8.3.2 Creating your project... Project name: Acme.BookStore DBMS: PostgreSQL UI Framework: Angular Output folder: d:\Source\Acme.BookStore Using cached template: app, version: 8.3.2 Theme: LeptonXLite Check out the documents at https://abp.io/docslatest/solution-templates/layered-web-application 'Acme.BookStore' has been successfully created to 'd:\Source\Acme.BookStore' Creating initial migrations... Initial migrations are created. Installing client-side packages... Found 2 projects. d:\Source\Acme.BookStore\angular d:\Source\Acme.BookStore\aspnet-core\src\Acme.BookStore.HttpApi.Host Running Yarn on d:\Source\Acme.BookStore\angular yarn install v1.22.22 info No lockfile found. [1/4] Resolving packages... warning eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options. warning eslint > @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead warning eslint > @humanwhocodes/config-array > @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead warning eslint > file-entry-cache > flat-cache > rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported warning eslint > file-entry-cache > flat-cache > rimraf > glob@7.2.3: Glob versions prior to v9 are no longer supported warning eslint > file-entry-cache > flat-cache > rimraf > glob > inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. warning karma > glob@7.2.3: Glob versions prior to v9 are no longer supported warning karma > rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported [2/4] Fetching packages... [3/4] Linking dependencies... warning "@abp/ng.account > @abp/ng.theme.shared > @ng-bootstrap/ng-bootstrap@16.0.0" has incorrect peer dependency "@angular/common@^17.0.0". warning "@abp/ng.account > @abp/ng.theme.shared > @ng-bootstrap/ng-bootstrap@16.0.0" has incorrect peer dependency "@angular/core@^17.0.0". warning "@abp/ng.account > @abp/ng.theme.shared > @ng-bootstrap/ng-bootstrap@16.0.0" has incorrect peer dependency "@angular/forms@^17.0.0". warning "@abp/ng.account > @abp/ng.theme.shared > @ng-bootstrap/ng-bootstrap@16.0.0" has incorrect peer dependency "@angular/localize@^17.0.0". warning "@abp/ng.components > ng-zorro-antd@17.4.1" has incorrect peer dependency "@angular/animations@^17.0.0". warning "@abp/ng.components > ng-zorro-antd@17.4.1" has incorrect peer dependency "@angular/common@^17.0.0". warning "@abp/ng.components > ng-zorro-antd@17.4.1" has incorrect peer dependency "@angular/forms@^17.0.0". warning "@abp/ng.components > ng-zorro-antd@17.4.1" has incorrect peer dependency "@angular/core@^17.0.0". warning "@abp/ng.components > ng-zorro-antd@17.4.1" has incorrect peer dependency "@angular/platform-browser@^17.0.0". warning "@abp/ng.components > ng-zorro-antd@17.4.1" has incorrect peer dependency "@angular/router@^17.0.0". warning "@abp/ng.components > ng-zorro-antd > @ant-design/icons-angular@17.0.0" has incorrect peer dependency "@angular/common@^17.0.1". warning "@abp/ng.components > ng-zorro-antd > @ant-design/icons-angular@17.0.0" has incorrect peer dependency "@angular/core@^17.0.1". warning "@abp/ng.components > ng-zorro-antd > @ant-design/icons-angular@17.0.0" has incorrect peer dependency "@angular/platform-browser@^17.0.1". warning " > @abp/ng.theme.lepton-x@3.3.2" has unmet peer dependency "@abp/ng.account.core@~8.3.2". warning " > @angular-eslint/eslint-plugin@18.1.0" has unmet peer dependency "@typescript-eslint/utils@^7.11.0 || ^8.0.0-alpha.37". warning "@angular-eslint/eslint-plugin > @angular-eslint/utils@18.1.0" has unmet peer dependency "@typescript-eslint/utils@^7.11.0 || ^8.0.0-alpha.37". warning " > @angular-eslint/eslint-plugin-template@18.1.0" has unmet peer dependency "@typescript-eslint/utils@^7.11.0 || ^8.0.0-alpha.37". warning " > @angular-eslint/schematics@18.1.0" has unmet peer dependency "@angular-devkit/core@>= 18.0.0 < 19.0.0". warning " > @angular-eslint/schematics@18.1.0" has unmet peer dependency "@angular-devkit/schematics@>= 18.0.0 < 19.0.0". [4/4] Building fresh packages... success Saved lockfile. Done in 85.25s. Running Yarn on d:\Source\Acme.BookStore\aspnet-core\src\Acme.BookStore.HttpApi.Host yarn install v1.22.22 info No lockfile found. [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... warning "@abp/aspnetcore.mvc.ui.theme.leptonxlite > @abp/aspnetcore.mvc.ui.theme.shared > @abp/bootstrap > bootstrap@5.3.3" has unmet peer dependency "@popperjs/core@^2.11.8". [4/4] Building fresh packages... success Saved lockfile. Done in 16.34s. UPDATE angular.json (6635 bytes) UPDATE src/app/app.module.ts (2092 bytes)

Below is the content of home.component.html right after above command returns:

&lt;div class=&quot;my-3 text-center&quot;&gt;
  &lt;h3&gt;Let's improve your application!&lt;/h3&gt;
  &lt;p&gt;Here are some links to help you get started:&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;card mt-4 mb-5&quot;&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;div class=&quot;row text-center justify-content-md-center&quot;&gt;
      &lt;ng-container
        *ngTemplateOutlet=&quot;
          starterLinkTemplate;
          context: {
            $implicit: {
              title: &#39;Learn the ABP Framework&#39;,
              description:
                &#39;Explore the comprehensive documentation to learn how to build a modern web application.&#39;,
              links: [
                {
                  href: &#39;https://abp.io/docs/latest?ref=tmpl&#39;,
                  label: &#39;See Documents&#39;
                }
              ]
            }
          }
        &quot;
      &gt;&lt;/ng-container&gt;

      &lt;ng-container
        *ngTemplateOutlet=&quot;
          starterLinkTemplate;
          context: {
            $implicit: {
              title: &#39;Samples&#39;,
              description: &#39;See the example projects built with the ABP Framework.&#39;,
              links: [
                {
                  href: &#39;https://abp.io/docs/latest/samples?ref=tmpl&#39;,
                  label: &#39;All samples&#39;
                }
              ]
            }
          }
        &quot;
      &gt;&lt;/ng-container&gt;

      &lt;ng-container
        *ngTemplateOutlet=&quot;
          starterLinkTemplate;
          context: {
            $implicit: {
              title: &#39;ABP Community&#39;,
              description: &#39;Get involved with a vibrant community and become a contributor.&#39;,
              links: [
                {
                  href: &#39;https://abp.io/community/&#39;,
                  label: &#39;Community&#39;
                },
                {
                  href: &#39;https://abp.io/docs/latest/contribution?ref=tmpl&#39;,
                  label: &#39;Contribute&#39;
                }
              ]
            }
          }
        &quot;
      &gt;&lt;/ng-container&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row text-center mt-lg-3 justify-content-md-center&quot;&gt;
      &lt;ng-container
        *ngTemplateOutlet=&quot;
          starterLinkTemplate;
          context: {
            $implicit: {
              title: &#39;ABP Blog&#39;,
              description: &#39;Take a look at our recently published articles.&#39;,
              links: [
                {
                  href: &#39;https://abp.io/blog?ref=tmpl&#39;,
                  label: &#39;See Blog&#39;
                }
              ]
            }
          }
        &quot;
      &gt;&lt;/ng-container&gt;
      
      &lt;ng-template #githubButtonsTemplate&gt;
        &lt;p class=&quot;mb-1&quot;&gt;
          &lt;iframe
            scrolling=&quot;no&quot;
            src=&quot;https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp&amp;amp;title=&amp;amp;aria-label=Star%20tabalinas%2Fjsgrid%20on%20GitHub&amp;amp;data-icon=octicon-star&amp;amp;data-text=Star&amp;amp;data-size=large&amp;amp;data-show-count=true&quot;
            style=&quot;
              width: 122px;
              height: 28px;
              border: none;
              display: inline-block;
              margin-right: 4px;
            &quot;
          &gt;&lt;/iframe&gt;
          &lt;iframe
            scrolling=&quot;no&quot;
            src=&quot;https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp%2Fissues&amp;amp;title=&amp;amp;aria-label=Issue%20tabalinas%2Fjsgrid%20on%20GitHub&amp;amp;data-icon=octicon-issue-opened&amp;amp;data-text=Issue&amp;amp;data-size=large&quot;
            style=&quot;
              width: 72px;
              height: 28px;
              border: none;
              display: inline-block;
              margin-right: 4px;
            &quot;
          &gt;&lt;/iframe&gt;

          &lt;iframe
            scrolling=&quot;no&quot;
            src=&quot;https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp%2Ffork&amp;amp;title=&amp;amp;aria-label=Fork%20tabalinas%2Fjsgrid%20on%20GitHub&amp;amp;data-icon=octicon-repo-forked&amp;amp;data-text=Fork&amp;amp;data-size=large&amp;amp;&quot;
            style=&quot;width: 72px; height: 28px; border: none; display: inline-block&quot;
          &gt;&lt;/iframe&gt;
        &lt;/p&gt;
      &lt;/ng-template&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

This file is missing some parts such as welcome message, login button and template definitions. Welcome message and login button is not critical, but the lack of template definitions causes angular compilation error.

4 Answer(s)