Skip to content

beta.11-webpack fails to load file for templateUrl #1535

@FraserKillip

Description

@FraserKillip

Hey all,

  1. MacOS 10.12 Sierra Public Beta
  2. Versions.
    angular-cli: 1.0.0-beta.11-webpack
    node: 5.7.1
    os: darwin x64
  3. 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

  1. 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] } }
  1. Tested without using the --mobile flag and it works as expected (except app.component.html is modified instead.. see Beta.11-webpack mobile mode generates incorrect app.component.ts #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!';
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions