404s after upgrade to systemjs-angular-loader.js

I am updating my Angular project and decided to delete all instances moduleId: module.id

as the docs pointed out to me: https://angular.io/docs/ts/latest/guide/change-log.html

All references to moduleId have been removed. Cookbook "Component Comparison Paths" removed (2017-03-13)

We have added a new SystemJS plugin (systemjs-angular-loader.js) to our Recommended SystemJS config. This plugin will dynamically convert "component-relative" paths in templatesUrl and styleUrls to "absolute paths" for you.

We strongly recommend that you only write component-specific paths. Which is the only form of URL discussed in these documents. You no longer need to write @Component ({moduleId: module.id}), nor should you.

Before deleting moduleId: module.id

, I followed these steps:

• Downloaded systemjs-angular-loader.js file and put it in my src folder (same level as systemjs.config.js)
• Added loader: 'systemjs-angular-loader.js'
  
  to my systemjs.config.js file (tried to paste more code but it didn't format for some reason)
• Updated systemjs version in package.json file: "systemjs": "0.20.12",
  
  

After following these steps and removing moduleId: module.id

from my component, as is evident from the docs, I got the following error:

GET http: // localhost: 3000 / checklists.component.html 404 (not found)

This is what this component code looks like:

@Component({    
    selector: 'checklists',
    templateUrl: 'checklists.component.html'    
})

      

        
        
        
      

    

Why am I getting 404 in my html file? Did I miss a step?