Angular 6.1.10组件Selector、templateUrl、styleUrls异常求助

Hey there, I see you've been stuck on this for two days—let's break down the issues and get your styles working:

1. Fix the TypeScript Property Name Typos (Root Cause of the TS Error) #

The error message you're seeing is directly from typos in your @Component decorator properties:

• You wrote tmplateUrl (missing an e) instead of the correct templateUrl
• You wrote styleUrl (missing an s) instead of styleUrls

Here's the corrected code for your component decorator:

@Component({
  selector: 'app-entity-registration',
  templateUrl: './entity-registration.component.html',
  styleUrls: ['./entity-registration.component.css']
})

This will resolve the Argument of type ... is not assignable to parameter of type 'Component' error immediately.

2. Verify CSS File Path & Existence #

Double-check that entity-registration.component.css is located in the same directory as your .ts and .html files. The ./ prefix means "current directory"—if your CSS is in a subfolder (like styles/), update the path to match, e.g.:

styleUrls: ['./styles/entity-registration.component.css']

3. Check Angular View Encapsulation #

By default, Angular uses ViewEncapsulation.Emulated which scopes component styles to only the component's template. If your styles aren't applying:

• Make sure your CSS selectors match the elements in your HTML template exactly
• If you need to style child components or global elements, you can use ::ng-deep (note: this is deprecated but still works in Angular 6) or disable encapsulation entirely (use sparingly):

  import { Component, ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'app-entity-registration',
    templateUrl: './entity-registration.component.html',
    styleUrls: ['./entity-registration.component.css'],
    encapsulation: ViewEncapsulation.None
  })
  

4. Clear Cache & Restart the Dev Server #

Angular CLI sometimes caches old assets, which can prevent new styles from loading. Try these steps:

• Stop your dev server (Ctrl+C in the terminal)
• Run ng clean to clear build artifacts
• Delete the .angular cache folder (located in your project root)
• Restart the server with ng serve

5. Fix Version Mismatch (Potential Hidden Issue) #

Your Angular core version is 6.1.10, but @angular/material and @angular/cdk are on 7.3.1—these versions are incompatible. Mismatched library versions can cause unexpected behavior (including style issues). Downgrade your material/cdk packages to match Angular 6:

npm install @angular/material@6.4.7 @angular/cdk@6.4.7 --save

Start with fixing the typos first—this will resolve the TypeScript error, and then work through the other steps if your styles still don't load.

内容的提问来源于stack exchange，提问作者Prathish