Angular执行ng generate component仅生成.ts文件问题求助

Hey there! I totally get your confusion—when you're new to Angular and working with a third-party theme like Metronic, unexpected CLI behavior can really throw you off. Let's break down why ng generate component test is only spitting out the .ts file and how to fix it.

1. Check your project's angular.json configuration #

Angular CLI's component generation behavior is controlled by settings in your project's angular.json file, and Metronic might have modified these defaults to align with its own structure.

Open up angular.json, locate your project under the projects section, then look for the schematics block. It might look something like this:

"schematics": {
  "@schematics/angular:component": {
    "template": false,
    "style": "none"
  }
}

If you see template: false or style: "none", that's exactly why your HTML and CSS files aren't being created. Adjust these values to match your needs—for example:

"schematics": {
  "@schematics/angular:component": {
    "template": true,
    "style": "css"
  }
}

Save the file and try generating the component again.

2. Verify if Metronic uses custom schematics #

Premium themes like Metronic often provide their own custom schematics to generate components that fit their design system perfectly. If this is the case, the default Angular CLI schematic might be overridden.

Check Metronic's documentation for any specific commands they recommend for generating components. You might need to use a custom schematic flag, like:

ng generate component test --schematics=@metronic/schematics

Or there could be a dedicated command provided by the theme. If you can't find docs, look for any schematics folders or Metronic-related npm packages in your project.

3. Check your global Angular CLI configuration #

It's possible your global CLI settings are affecting component generation across all your projects. Run this command to check the global schematic defaults:

ng config --global schematics.@schematics/angular:component

If you see template: false or style: "none" here, update them with these commands:

ng config --global schematics.@schematics/angular:component.template true
ng config --global schematics.@schematics/angular:component.style css

4. Force file generation with CLI flags #

As a quick test (and temporary fix), you can explicitly tell the CLI to generate the HTML and CSS files when creating the component:

ng generate component test --inline-template false --style css

This bypasses any default configurations and should create all three files. If this works, it confirms the issue is with your schematic settings.

Give these steps a try—one of them should get your component generation working as expected!

内容的提问来源于stack exchange，提问作者Pierre-Olivier Morin