Angular-cli: beta.11-webpack fails to load file for templateUrl

Created on 3 Aug 2016 · 4Comments · Source: angular/angular-cli

Hey all,

MacOS 10.12 Sierra Public Beta
Versions.
angular-cli: 1.0.0-beta.11-webpack
node: 5.7.1
os: darwin x64
After running the following command:

ng new foo2 --style=less --mobile
cd foo2
sudo ng link angular-cli
ng genererate component home
#modify app.component.ts to use <app-home></app-home>, changes appended below
ng serve

The file src/app/app.component.ts has a component definition that uses a template rather than using a templateUrl for the generated app.component.html

After running ng serve it hangs saying: wait until bundle finished: /home.component.html
After a short period of time the following is output to console:

EXCEPTION: Failed to load home.component.html
ngOnInit Error: Failed to load home.component.html
Unhandled Promise rejection: Failed to load home.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load home.component.html
{ [Error: Uncaught (in promise): Failed to load home.component.html]
  rejection: 'Failed to load home.component.html',
  promise:
   ZoneAwarePromise {
     __zone_symbol__state: 0,
     __zone_symbol__value: 'Failed to load home.component.html' },
  zone:
   Zone {
     _properties: {},
     _parent: null,
     _name: '<root>',
     _zoneDelegate:
      ZoneDelegate {
        _taskCounts: [Object],
        zone: [Circular],
        _parentDelegate: null,
        _forkZS: null,
        _forkDlgt: null,
        _interceptZS: null,
        _interceptDlgt: null,
        _invokeZS: null,
        _invokeDlgt: null,
        _handleErrorZS: null,
        _handleErrorDlgt: null,
        _scheduleTaskZS: null,
        _scheduleTaskDlgt: null,
        _invokeTaskZS: null,
        _invokeTaskDlgt: null,
        _cancelTaskZS: null,
        _cancelTaskDlgt: null,
        _hasTaskZS: null,
        _hasTaskDlgt: null } },
  task:
   ZoneTask {
     runCount: 1,
     type: 'microTask',
     zone:
      Zone {
        _properties: {},
        _parent: null,
        _name: '<root>',
        _zoneDelegate: [Object] },
     source: 'Promise.then',
     data: undefined,
     scheduleFn: undefined,
     cancelFn: null,
     callback: [Function],
     invoke: [Function] } }

Tested without using the --mobile flag and it works as expected (except app.component.html is modified instead.. see #1534), the app is served correctly

app.component.ts

import { Component } from '@angular/core';
import { APP_SHELL_DIRECTIVES } from '@angular/app-shell';
import {HomeComponent} from './home';

@Component({
  selector: 'app-root',
  template: `
  <h1>
    {{title}}
  </h1>
  <app-home></app-home>
  `,
  styles: [],
  directives: [APP_SHELL_DIRECTIVES, HomeComponent]
})
export class AppComponent {
  title = 'app works!';
}

Source