1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OS X (Yosemite? El Capitan?)

OS X El Capitan

1. Versions. Please run ng --version.

angular-cli: 1.0.0-beta.6
node: 4.4.3
os: darwin x64

1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

Created with beta.5 CLI with --mobile and then upgraded with ng init --mobile for beta.6.
Only changes were to merge my existing app back into the files overwritten by the CLI.

Also able to reproduce this in a brand new beta.6 project by doing:

ng new testApp --mobile
ng build

1. The log given by the failure. Normally this include a stack trace and some
   more information.

$ ng build
Built project successfully. Stored in "dist/".

1. Mention any other details that might be useful.

Unfortunately there is no error output at all.

Contents of dist/index.html:

undefined

ng build --prod on a new project seems to give an error that might be helpful:

ng build --prod
⠸ BuildingEXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: The selector "app-root" did not match any elements
ORIGINAL STACKTRACE:
Error: The selector "app-root" did not match any elements
    at new BaseException (/Users/splaktar/Git/tf/testApp/node_modules/@angular/platform-browser/src/facade/exceptions.js:17:23)
    at NodeDomRenderer.DomRenderer.selectRootElement (/Users/splaktar/Git/tf/testApp/node_modules/@angular/platform-browser/src/dom/dom_renderer.js:79:23)
    at DebugDomRenderer.selectRootElement (/Users/splaktar/Git/tf/testApp/node_modules/@angular/core/src/debug/debug_renderer.js:19:39)
    at DebugAppView.AppView.selectOrCreateHostElement (/Users/splaktar/Git/tf/testApp/node_modules/@angular/core/src/linker/view.js:88:41)
    at DebugAppView._View_AppComponent_Host0.createInternal (AppComponent_Host.template.js:12:21)
    at DebugAppView.AppView.create (/Users/splaktar/Git/tf/testApp/node_modules/@angular/core/src/linker/view.js:66:21)
    at DebugAppView.create (/Users/splaktar/Git/tf/testApp/node_modules/@angular/core/src/linker/view.js:259:44)
    at ComponentFactory.create (/Users/splaktar/Git/tf/testApp/node_modules/@angular/core/src/linker/component_factory.js:143:36)
    at /Users/splaktar/Git/tf/testApp/node_modules/@angular/core/src/application_ref.js:314:44
    at /Users/splaktar/Git/tf/testApp/node_modules/@angular/core/src/application_ref.js:292:26
    at ZoneDelegate.invoke (/Users/splaktar/Git/tf/testApp/node_modules/zone.js/dist/zone-node.js:281:29)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (/Users/splaktar/Git/tf/testApp/node_modules/@angular/core/src/zone/ng_zone_impl.js:45:41)
    at ZoneDelegate.invoke (/Users/splaktar/Git/tf/testApp/node_modules/zone.js/dist/zone-node.js:280:35)
    at Zone.run (/Users/splaktar/Git/tf/testApp/node_modules/zone.js/dist/zone-node.js:174:44)
    at NgZoneImpl.runInner (/Users/splaktar/Git/tf/testApp/node_modules/@angular/core/src/zone/ng_zone_impl.js:76:71)
    at NgZone.run (/Users/splaktar/Git/tf/testApp/node_modules/@angular/core/src/zone/ng_zone.js:223:66)
ERROR CONTEXT:
DebugContext {
  _view: 
   DebugAppView {
     clazz: [Function: _View_AppComponent_Host0],
     componentType: 
      RenderComponentType {
        id: 'gms-0',
        templateUrl: '',
        slotCount: 0,
        encapsulation: 0,
        styles: [] },
     type: 0,
     viewUtils: 
      ViewUtils {
        _renderer: [Object],
        _appId: 'gms',
        _nextCompTypeId: 1,
        sanitizer: DomSanitizationServiceImpl {} },
     parentInjector: 
      ReflectiveInjector_ {
        _debugContext: null,
        _constructionCounter: 40,
        _proto: [Object],
        _parent: [Object],
        _strategy: [Object] },
     declarationAppElement: null,
     cdMode: 2,
     contentChildren: [],
     viewChildren: [],
     viewContainerElement: null,
     cdState: 2,
     destroyed: false,
     ref: ViewRef_ { _view: [Circular] },
     renderer: DebugDomRenderer { _delegate: [Object] },
     staticNodeDebugInfos: [ [Object] ],
     _currentDebugContext: [Circular],
     context: {},
     _hasExternalHostElement: true,
     projectableNodes: [] },
  _nodeIndex: 0,
  _tplRow: 0,
  _tplCol: 0 }

Build error

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:

Error: EPERM: operation not permitted, symlink '<path>\hello-mobile\tmp\broccoli_type_script_compiler-cache_path-FFrpJN1M.tmp\src\app\environment.js.map' -> '<path>\hello-mobile\tmp\broccoli_type_script_compiler-output_path-jdW6uW78.tmp\src\app\environment.js.map'
    at Error (native)
    at Object.fs.symlinkSync (fs.js:1048:18)
    at BroccoliTypeScriptCompiler._outputFile (<path>\hello-mobile\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:206:8)
    at output.outputFiles.forEach.o (<path>\hello-mobile\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:108:18)
    at Array.forEach (native)
    at pathsToEmit.forEach.tsFilePath (<path>\hello-mobile\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:107:30)
    at Array.forEach (native)
    at BroccoliTypeScriptCompiler._doIncrementalBuild (<path>\hello-mobile\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:93:19)
    at BroccoliTypeScriptCompiler.build (<path>\hello-mobile\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:43:10)
    at <path>\hello-mobile\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:152:21
    at lib$rsvp$$internal$$tryCatch (<path>\hello-mobile\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (<path>\hello-mobile\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (<path>\hello-mobile\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (<path>\hello-mobile\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

The broccoli plugin was instantiated at: 
    at BroccoliTypeScriptCompiler.Plugin (<path>\hello-mobile\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\broccoli-plugin\index.js:10:31)
    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (<path>\hello-mobile\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:21:10)
    at BroccoliTypeScriptCompiler (<path>\hello-mobile\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:27:5)
    at Angular2App._getTsTree (<path>\hello-mobile\node_modules\angular-cli\lib\broccoli\angular2-app.js:280:18)
    at Angular2App._buildTree (<path>\hello-mobile\node_modules\angular-cli\lib\broccoli\angular2-app.js:101:23)
    at new Angular2App (<path>\hello-mobile\node_modules\angular-cli\lib\broccoli\angular2-app.js:42:23)
    at module.exports (<path>\hello-mobile\angular-cli-build.js:6:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (<path>\hello-mobile\node_modules\angular-cli\node_modules\ember-cli\lib\models\builder.js:55:19)
    at Class.module.exports.Task.extend.init (<path>\hello-mobile\node_modules\angular-cli\node_modules\ember-cli\lib\models\builder.js:89:10)
    at new Class (<path>\hello-mobile\node_modules\angular-cli\node_modules\ember-cli\node_modules\core-object\core-object.js:18:12)
    at Class.module.exports.Task.extend.run (<path>\hello-mobile\node_modules\angular-cli\node_modules\ember-cli\lib\tasks\serve.js:15:19)
    at <path>\hello-mobile\node_modules\angular-cli\node_modules\ember-cli\lib\commands\serve.js:64:24
    at lib$rsvp$$internal$$tryCatch (<path>\hello-mobile\node_modules\angular-cli\node_modules\ember-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (<path>\hello-mobile\node_modules\angular-cli\node_modules\ember-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (<path>\hello-mobile\node_modules\angular-cli\node_modules\ember-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (<path>\hello-mobile\node_modules\angular-cli\node_modules\ember-cli\node_modules\rsvp\dist\rsvp.js:1198:9)

OS: Windows 7 64bit

Ideally, the guide would be continuation of the guides at mobile.angular.io.

Following Sharing the Root Component, after doing ng serve and pointing the browser to http://localhost:4200/hello this is the traceback I get:

Error: Command failed: /bin/sh -c node /home/msaelices/src/hello-mobile/node_modules/angular2-broccoli-prerender/dist/child_proc.js  --sourceHtml=/home/msaelices/src/hello-mobile/tmp/app_shell_plugin-input_base_path-AnDBdsfB.tmp/0/index.html --optionsPath=/home/msaelices/src/hello-mobile/tmp/app_shell_plugin-input_base_path-AnDBdsfB.tmp/0/main-app-shell --outputIndexPath=/home/msaelices/src/hello-mobile/tmp/app_shell_plugin-output_path-si91VoBm.tmp/index.html
EXCEPTION: Error in package:/home/msaelices/src/hello-mobile/tmp/broccoli_type_script_compiler-cache_path-wQpEd0nk.tmp/src/app/hello-mobile.component.js class HelloMobileAppComponent - inline template:4:2
ORIGINAL EXCEPTION: ReferenceError: requestAnimationFrame is not defined
ORIGINAL STACKTRACE:
ReferenceError: requestAnimationFrame is not defined
    at MdSpinner.MdProgressCircle._animateCircle (/home/msaelices/src/hello-mobile/node_modules/@angular2-material/progress-circle/progress-circle.js:123:13)
    at animate (/home/msaelices/src/hello-mobile/node_modules/@angular2-material/progress-circle/progress-circle.js:136:19)
    at MdSpinner.MdProgressCircle._startIndeterminateAnimation (/home/msaelices/src/hello-mobile/node_modules/@angular2-material/progress-circle/progress-circle.js:145:13)
    at MdSpinner.Object.defineProperty.set [as mode] (/home/msaelices/src/hello-mobile/node_modules/@angular2-material/progress-circle/progress-circle.js:84:22)
    at new MdSpinner (/home/msaelices/src/hello-mobile/node_modules/@angular2-material/progress-circle/progress-circle.js:195:19)
    at DebugAppView._View_HelloMobileAppComponent1.createInternal (HelloMobileAppComponent.template.js:90:25)
    at DebugAppView.AppView.create (/home/msaelices/src/hello-mobile/node_modules/@angular/core/src/linker/view.js:66:21)
    at DebugAppView.create (/home/msaelices/src/hello-mobile/node_modules/@angular/core/src/linker/view.js:259:44)
    at TemplateRef_.createEmbeddedView (/home/msaelices/src/hello-mobile/node_modules/@angular/core/src/linker/template_ref.js:56:14)
    at ViewContainerRef_.createEmbeddedView (/home/msaelices/src/hello-mobile/node_modules/@angular/core/src/linker/view_container_ref.js:98:35)

• Set up build system
  • Publish to npm and install in angular/answers-app

• Design doc for the service worker
• Write docs for API reference in the code (especially companion library)

Hi i don't know why it do this !
i simply followed :

• npm install -g angular-cli
• ng new hello-mobile --mobile
• cd hello-mobile
• ng serve

result :

Scope

This issue is concerned with a runtime library to instrument an Angular component to be used to generate an App Shell.

Goal

make it easy to turn any component into a component that can be compiled into an "App Shell", i.e. an html page with inlined html, JS, styles, and images, which can be rendered as soon as the document is served, without waiting for any additional resources to load from network or disk.

Problems to solve:

• Child components and directives of the App Shell component's template that should not be pre-compiled into an app shell (either hidden completely, or replaced with another directive).
• Inversely, child components and directives of the App Shell component's template that should only be included in the app shell.
• Imperative JS logic within an App Shell that should not be run during pre-compilation
• The ability for a runtime library to parse an app shell from a rendered page, such as when the document has been pre-rendered with specific content on the server, but the app shell should be cached without the content to serve from Service Worker on subsequent requests.

Design

For the sake of this doc, let's assume developers would like to take their existing "App" component and turn it into an App Shell. The developer might start by using one of the prerender build tools from universal: gulp, grunt, webpack. The developer would incorporate these tools into their build process, providing the component, its providers, and the base html document to the prerender tool, and would generate an index.html in their final output that would contain the inlined component and CSS, and whatever scripts the base html file already contained to load the rest of the application.

For simple app components, this would work out of the box without any problems. But most components depend on some third-party library, or some code which might not be designed to be run in a nodejs build context. Additionally, the developer probably doesn't want any child routes to be included in the App Shell.

Consider this component which depends on AngularFire, and has child routes.

@Component({
  styles: [`
    navBar {
      height: 40px;
      background: #999;
      color: #111;
    }
  `],
  template: `
    <navbar>
      My App
      <button *ngIf="!(af.auth | async)">Log In</button>
      <button *ngIf="af.auth | async">Log Out</button>
    </navbar>
    <router-outlet></router-outlet>`
})
@RouteConfig([
  {path: '/login', component: Login},
  {path: '/issues', useAsDefault: true, component: Issues}
])
export class AppComponent {
  constructor(public af:AngularFire) {
    af.auth.do(loginState => {
      if (!loginState) {
        router.navigate(['/issues']);
      }
    });
  }
}

There are things in the template that don't belong in an application-wide app shell:

• A router outlet (the shell will be the same regardless of route)
• The login button (app shell should have minimum interactivity)

And in the component constructor, I don't want to actually execute any logic to change the route, or to try to access AngularFire data which doesn't (yet) support running in nodejs.

Proposal

npm install @angular/app-shell

IS_PRERENDER Provider

This provider will be a simple boolean value to use with
imperative code inside of component's to modify behavior if
App is being pre-rendered.

import {IS_PRERENDER} from '@angular/app-shell';

@Component({...})
export class AppComponent {
  constructor(@Inject(IS_PRERENDER) isPrerender:boolean) {
    // Do nothing if pre-rendering
    if (isPrerender) return;
    // Otherwise, carry on
    // ...
  }
}

APP_SHELL_BUILD_PROVIDERS

This will be the default providers to include in the prerender configuration.
This sets the value of IS_PRERENDER to true when injected.

import {APP_SHELL_BUILD_PROVIDERS} from '@angular/app-shell';

prerender({
  providers: [APP_SHELL_BUILD_PROVIDERS]
})

APP_SHELL_RUNTIME_PROVIDERS

This will be the default providers to include when bootstrapping the app at runtime
configuration. This sets the value of IS_PRERENDER to false when injected.

Although it is technically possible to automatically infer the environment and use
a single export of default providers, i.e. APP_SHELL_PROVIDERS, being explicit is
better future-proofing for different platforms that might be supported, and better for testing.

It is also more intuitive, clearer, less verbose, and more confidence-instilling
to use this clearly-named provider group than to just provide the IS_PRERENDER token
and tell the user to bind it to a boolean value.

import {APP_SHELL_RUNTIME_PROVIDERS} from '@angular/app-shell';

bootstrap(AppComponent, [
  APP_SHELL_RUNTIME_PROVIDERS
]);

APP_SHELL_DIRECTIVES

Set of directives to prepare a component for pre-rendering, and to help with parsing
an app shell out of a fully-compiled application with unwanted superfluous content.

import {APP_SHELL_DIRECTIVES} from '@angular/app-shell';

@Component({
  template: `
    <navbar>
      <div class="login" *asNoRender>
        <button (click)="login()">Log In</button>
      </div>
    </navbar>
  `,
  directives: [APP_SHELL_DIRECTIVES]
})
export class AppComponent {
}

*asNoRender Directive

The *asNoRender directive is essentially the equivalent of applying an
*ngIf directive to an element like so: <span *ngIf="!isPrerender">No Prerender</span>.
Being available as a directive saves code of having to inject the IS_PRERENDER
constant, and attaching it to the component class. The directive also provides power
in how an app shell can be derived from a fully-rendered page at runtime, even
if the page includes content that doesn't belong in the app shell.

When this directive is used in a non-build-time context, such as in the browser
or pre-rendered at runtime with Angular Universal, this directive will cause HTML
comments to be placed at the beginning and end
of an element's contents, which can be easily parsed at runtime to throw away
non-app-shell content, so a pure app shell can be stored in the Service Worker
cache.

This is particularly useful when using server-side prerendering of components,
so no special app shell build step is necessary. The fully-rendered page can be
parsed and modified to be a general-purpose App Shell.

Example component that will be rendered at runtime by Angular Universal:

import {APP_SHELL_DIRECTIVES} from '@angular/app-shell';

@Component({
  template: `
    <navbar>
      International Developer News Worldwide
    </navbar>
    <news-list *asNoRender>
      <news-list-item *ngFor="item of newsItems">
        <h1>{{item.title}}</h1>
      </news-list-item>
    </news-list>
  `
})
export class NewsAppComponent {
}

The compiled component returned from Angular Universal would look something like:

<body>
  <news-app>
    <navbar>
      International Developer News Worldwide
    </navbar>
    <!-- asNoRenderBegin="id:0"-->
    <news-list *asNoRender>
      <news-list-item *ngFor="item of newsItems">
        <h1>Bay Area Housing Prices Soar!</h1>
      </news-list-item>
      <news-list-item *ngFor="item of newsItems">
        <h1>Bay Area Experiences Record-Breaking Great Weather!</h1>
      </news-list-item>
    </news-list>
    <!-- asNoRenderEnd="id:0"-->
  </news-app>
</body>

Which could easily be parsed by a runtime parser in the browser to store this app shell:

<body>
  <news-app>
    <navbar>
      International Developer News Worldwide
    </navbar>
  </news-app>
</body>

*asRender Directive

For elements that should be shown only be rendered at build time and not at runtime,
such as loading indicators or substitute elements, the *asRender directive
can be applied.

@Component({
  template: `
    <md-toolbar>
      <md-progress-circle *asRender mode="indeterminate"></md-progress-circle>
      <button *asNoRender (click)="sidenav.open()"><i class="material-icons">menu</i></button>
    </md-toolbar>
  `
})

Runtime Parser

The runtime parser will be a small JS library to run in a Service Worker, which will parse an
html page and return a version of the page that can be cached as an app shell to be returned
on future page requests. This is particularly useful when there is server-side pre-rendering
involved, such as Angular Universal.

interface ngShellParser {
  fetchDoc (url?:string): Promise<Response>;
  parseDoc (res:Response): Promise<Response>;
  match (definitions:RouteDefinition[], req: Request): Promise<Response>;
}

Example Service Worker Script:

// Imports global object: ngShellParser
importScripts('vendor/@angular/app-shell/runtime-parser.js');

var routeDefinitionPaths = [
  '/',
  '/issues/',
  '/issues/:id/',
  '/login'
];

self.addEventListener('install', function (event) {
  /**
   * fetchDoc() will fetch the current document, by examining
   * self.registration.scope
   **/
  event.waitUntil(() => ngShellParser.fetchDoc()
    // Optional step to strip unwanted *asNoRender content
    .then(res:Response => ngShellParser.parseDoc(res))
    // Add the final app shell to the cache
    .then(strippedResponse:Response => caches.open('ngAppShell')
      .then(cache => cache.put('/app-shell.html', strippedResponse)));
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    // Checks to see if any routes should match this request
    ngShellParser.match(routeDefinitionPaths, event.request)
      .then((response) => {
        // If response, then this page should receive an app shell
        if (response) return response;

        // Otherwise see if there's a cache entry for this request
        return caches.match(event.request)
          .then(function(response) {
            // Cache hit - return response
            if (response) {
              return response;
            }

            // Otherwise get from network
            return fetch(event.request);
          })
      });
  );
});

Ref : https://jakearchibald.com/2016/streams-ftw/?utm_source=html5weekly&utm_medium=email

• can we leverage this for the greater good?
• what does it entail?
• can we change @jakearchibald's mind on SPAs?
• are there things we can do in core to take advantage of this?

It appears the templateUrl is not supported by default.

The Broccoli Plugin: [AppShellPlugin] failed with:
Error: Command failed: node /Users/dcook/workspace/fireblog/node_modules/angular2-broccoli-prerender/dist/child_proc.js  --sourceHtml=/Users/dcook/workspace/fireblog/tmp/app_shell_plugin-input_base_path-GBe5b7f4.tmp/0/index.html --optionsPath=/Users/dcook/workspace/fireblog/tmp/app_shell_plugin-input_base_path-GBe5b7f4.tmp/0/main-app-shell --outputIndexPath=/Users/dcook/workspace/fireblog/tmp/app_shell_plugin-output_path-WRHSwL3M.tmp/index.html
EXCEPTION: Failed to load /Users/dcook/workspace/fireblog/tmp/broccoli_type_script_compiler-cache_path-o7NyPkVK.tmp/src/app/fireblog.component.html
Failed to load /Users/dcook/workspace/fireblog/tmp/broccoli_type_script_compiler-cache_path-o7NyPkVK.tmp/src/app/fireblog.component.html

    at ChildProcess.exithandler (child_process.js:202:12)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:850:16)
    at Socket.<anonymous> (internal/child_process.js:323:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:492:12)

The broccoli plugin was instantiated at:
    at AppShellPlugin.Plugin (/Users/dcook/workspace/fireblog/node_modules/broccoli-plugin/index.js:10:31)
    at AppShellPlugin.CachingWriter [as constructor] (/Users/dcook/workspace/fireblog/node_modules/broccoli-caching-writer/index.js:21:10)
    at new AppShellPlugin (/Users/dcook/workspace/fireblog/node_modules/angular2-broccoli-prerender/dist/prerender.js:15:16)
    at Angular2App._buildTree (/Users/dcook/workspace/fireblog/node_modules/angular-cli/lib/broccoli/angular2-app.js:153:48)
    at new Angular2App (/Users/dcook/workspace/fireblog/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/Users/dcook/workspace/fireblog/angular-cli-build.js:6:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/dcook/workspace/fireblog/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/Users/dcook/workspace/fireblog/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/Users/dcook/workspace/fireblog/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/Users/dcook/workspace/fireblog/node_modules/angular-cli/lib/tasks/serve.js:15:19)
    at /Users/dcook/workspace/fireblog/node_modules/angular-cli/lib/commands/serve.js:64:24
    at lib$rsvp$$internal$$tryCatch (/Users/dcook/workspace/fireblog/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/dcook/workspace/fireblog/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/dcook/workspace/fireblog/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/dcook/workspace/fireblog/node_modules/rsvp/dist/rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)

Currently the Angular service worker updates its resources using the service worker script updating process, in which a change in the script bytes leads to a new installation flow and the eventual activation of the new worker when all old tabs are closed.

It would be beneficial if the service worker could perform an update itself, without requiring a script change, while preserving the atomicity of the update.

• Track connected clients and be able to tell when they all disconnect
• Support an update flow that's decoupled from the SW lifecycle
• Add a method to the companion library to check for updates

ng build --prod fails with this error

The Broccoli Plugin: [SourceMapConcat] failed with:
Error: ENOENT: no such file or directory, open 'C:\hello-mobile\tmp\source_map_concat-input_base_path-HobpJYRu.tmp\0\vendor\reflect-metadata\Reflect.ts'
at Error (native)
at Object.fs.openSync (fs.js:549:18)
at Object.fs.readFileSync (fs.js:397:15)
at SourceMap. (C:\hello-mobile\node_modules\angular-cli\node_modules\broccoli-concat\node_modules\fast-sourcemap-concat\lib\source-map.js:282:29)

I have followed the guide when I do ng serve --prod i am getting the following

The Broccoli Plugin: [BundlePlugin] failed with:
Error on fetch for vendor/@angular2-material/toolbar/toolbar.js at file:///Users/satishvenkatakrishnan/hello-app/tmp/bundle_plugin-input_base_path-TtXUfUds.tmp/0/vendor/@angular2-material/toolbar/toolbar.js
Loading app/hello-app.component.js
Loading app/index.js
Loading main.js
Error: ENOENT: no such file or directory, open '/Users/satishvenkatakrishnan/hello-app/tmp/bundle_plugin-input_base_path-TtXUfUds.tmp/0/vendor/@angular2-material/toolbar/usr/local/google/home/jelbourn/material2/tmp/broccoli_type_script_compiler-input_base_path-IydvmmBU.tmp/0/components/toolbar/toolbar.js.map'
at Error (native)

Let me know what I am missing

• Create standalone node lib to generate
• Add gulp bindings for the tool
• Publish to npm
• Write markdown doc inside the repo

• Figure out what's broken in Universal
• Get App Shell plugin working in CLI with components that use external templates and stylesheets

In order for the AppShell parser to properly parse a dynamic page generated by Universal (or other pre-renderer), the app shell directives *shellRender and *shellNoRender should add corresponding attributes to the host element: <el shellRender=""></el> and <el shellNoRender=""></el>.

Challenges:
Presumably, when pre-rendering on-the-fly with Universal, the isPrerender provider would be set to false, which would cause the App Shell directives to behave the same as if the page were being rendered dynamically in the browser. Therefore, any shellRender components, for example a loading indicator, would not be included in the pre-generated page (since content is already loaded into the page where the loading indicator would otherwise be). There will be an HTML comment placeholder where the component would be: <!-- template bindings={} -->, but it wouldn't contain enough information to construct the shellRender element. This could be fixed by changing isPrerender to something more progressive that could account for:

1. building the html app shell page
2. pre-rendering a dynamic page (server)
3. rendering a dynamic page (browser)

Where case 2 would cause shellRender to render the loading indicator element so it could be parsed, but not displayed in the page, either by using CSS display: none or by wrapping the rendered element in HTML comments.

Maybe @mgechev is way ahead of me and has already thought of how to solve this problem :).

Following the guide, I get this error in console. Seems harmless because application still works. Just wondering what's causing it and if it's something that can be fixed.

TypeError: Cannot use 'in' operator to search for 'loaderErrorStack' in undefined(…)

• Come up with design for how to do stateful SW testing
• Install Chrome and run e2e tests on Travis
• Test basic install

I installed angular-cli but not able to get this version - 1.0.0-beta.4 ....

• npm install -g angular-cli

This installs the latest version 1.0.0-beta.5 with this i am not able to get the project working .,

ng serve errors out as below .,

D:\nodejs>cd hello-mobile

D:\nodejs\hello-mobile>ng serve
Livereload server on http://localhost:49155
Serving on http://localhost:4200/
The Broccoli Plugin: [AppShellPlugin] failed with:
Error: Command failed: C:\windows\system32\cmd.exe /s /c "node D:\nodejs\hello-mobile\node_modules\angular2-broccoli-prerender\dist\child_proc.js --sourceHtml=D:\no
dejs\hello-mobile\tmp\app_shell_plugin-input_base_path-vbnkT0hw.tmp\0\index.html --optionsPath=D:\nodejs\hello-mobile\tmp\app_shell_plugin-input_base_path-vbnkT0hw.t
mp\0\main-app-shell --outputIndexPath=D:\nodejs\hello-mobile\tmp\app_shell_plugin-output_path-AQgaL2Dn.tmp\index.html"

at ChildProcess.exithandler (child_process.js:213:12)
at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at maybeClose (internal/child_process.js:827:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)

The broccoli plugin was instantiated at:
at AppShellPlugin.Plugin (D:\nodejs\hello-mobile\node_modules\angular2-broccoli-prerender\node_modules\broccoli-caching-writer\node_modules\broccoli-plugin\index
.js:10:31)
at AppShellPlugin.CachingWriter [as constructor](D:nodejshello-mobilenode_modulesangular2-broccoli-prerendernode_modulesbroccoli-caching-writerindex.js:2
1:10)
at new AppShellPlugin (D:\nodejs\hello-mobile\node_modules\angular2-broccoli-prerender\dist\prerender.js:15:16)
at Angular2App._buildTree (D:\nodejs\hello-mobile\node_modules\angular-cli\lib\broccoli\angular2-app.js:153:48)
at new Angular2App (D:\nodejs\hello-mobile\node_modules\angular-cli\lib\broccoli\angular2-app.js:53:23)
at module.exports (D:\nodejs\hello-mobile\angular-cli-build.js:6:10)
at Class.module.exports.Task.extend.setupBroccoliBuilder (D:\nodejs\hello-mobile\node_modules\angular-cli\node_modules\angular-cli\lib\models\builder.js:55:19)
at Class.module.exports.Task.extend.init (D:\nodejs\hello-mobile\node_modules\angular-cli\node_modules\angular-cli\lib\models\builder.js:89:10)
at new Class (D:\nodejs\hello-mobile\node_modules\angular-cli\node_modules\angular-cli\node_modules\core-object\core-object.js:18:12)
at Class.module.exports.Task.extend.run (D:\nodejs\hello-mobile\node_modules\angular-cli\node_modules\angular-cli\lib\tasks\serve.js:15:19)
at D:\nodejs\hello-mobile\node_modules\angular-cli\node_modules\angular-cli\lib\commands\serve.js:64:24
at lib$rsvp$$internal$$tryCatch (D:\nodejs\hello-mobile\node_modules\angular-cli\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (D:\nodejs\hello-mobile\node_modules\angular-cli\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (D:\nodejs\hello-mobile\node_modules\angular-cli\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
at lib$rsvp$asap$$flush (D:\nodejs\hello-mobile\node_modules\angular-cli\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9)
at nextTickCallbackWith0Args (node.js:420:9)

How can i get old version of angular-cli or how can i fix this error ....

Any help is much appreciated.

Regards.,
Muthuveerappan

MacOS 10.11.4
node 4.4.3
npm 3.8.6

After installing angular-cli and trying to execute "ng new hello-mobile --mobile" I see "Successfully initialized git." and then right away a "400 Bad Request" and a stacktrace.

• Verify ability to use ServiceWorker in Karma/Jasmine test
  • Reset that browser profile can be reset with Karma
  • Be able to assert that requests are not being sent to backend
  • Write an example test

Not expected to be published during this iteration.

• Add typings field to package.json
• Include worker.d.ts in dist/

https://developers.google.com/web/updates/2016/02/save-data?hl=en

For users who've explicitly opted in to data savings mode in their browser, Service Worker could just cache resources that have already been requested, instead of pre-fetching everything. This could also be configurable, a la a flag of ConserveData: false | true | 'auto', where auto would conserve if the Save Data request header were present.

When I want to build my application I've got this exception "No provider for token originurl!". Maybe, I think there is a link with the configuration of the file src/main-app-shell.ts, because there is no class APP_BASE_HREF in the @angular/router, so I have deleted the line. Is it that, my problem ? How can I resolve it ?
thanks in advance,

Since the App Shell runtime parser is not coupled to the Angular parser, we can't rely that we will get case sensitive attributes of the AST after processing.

In such case we can either:

• Use custom case sensitive template parser.
• Use lowercase attribute as selectors for ShellNoRender and ShellRender directives.

before I just create the project with ng create hello-mobile --mobile,

root@server-Perso-1:/home/Angular/hello-mobile# ng serve
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Livereload server on http://localhost:49152
Serving on http://localhost:4200/
The Broccoli Plugin: [Funnel] failed with:
Error: Attempting to watch missing directory: typings
    at EventEmitter.Watcher_addWatchDir [as addWatchDir] (/home/Angular/hello-mobile/node_modules/angular-cli/node_modules/angular-cli/node_modules/broccoli-sane-watcher/index.js:90:11)
    at /home/Angular/hello-mobile/node_modules/angular-cli/node_modules/angular-cli/node_modules/angular-cli-broccoli/lib/builder.js:95:35
    at lib$rsvp$$internal$$tryCatch (/home/Angular/hello-mobile/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/home/Angular/hello-mobile/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /home/Angular/hello-mobile/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/home/Angular/hello-mobile/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

The broccoli plugin was instantiated at:
    at Funnel.Plugin (/home/Angular/hello-mobile/node_modules/angular-cli/node_modules/broccoli-funnel/node_modules/broccoli-plugin/index.js:7:31)
    at new Funnel (/home/Angular/hello-mobile/node_modules/angular-cli/node_modules/broccoli-funnel/index.js:44:10)
    at Angular2App._buildInputTree (/home/Angular/hello-mobile/node_modules/angular-cli/lib/broccoli/angular2-app.js:74:7)
    at new Angular2App (/home/Angular/hello-mobile/node_modules/angular-cli/lib/broccoli/angular2-app.js:31:41)
    at module.exports (/home/Angular/hello-mobile/angular-cli-build.js:6:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/home/Angular/hello-mobile/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/home/Angular/hello-mobile/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/home/Angular/hello-mobile/node_modules/angular-cli/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/home/Angular/hello-mobile/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/serve.js:15:19)
    at /home/Angular/hello-mobile/node_modules/angular-cli/node_modules/angular-cli/lib/commands/serve.js:64:24
    at lib$rsvp$$internal$$tryCatch (/home/Angular/hello-mobile/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/home/Angular/hello-mobile/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /home/Angular/hello-mobile/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/home/Angular/hello-mobile/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Hi,

I've played through the tutorial, but when I run ng serve --prod I get the following error. I've explicitly installed [email protected]

Wishes,
Manfred

Error on fetch for main.js at file:///C:/Users/steyer/Dropbox/Docs/KnowHow/Angul
ar2/mobiletoolkit/hello-mobile/tmp/bundle_plugin-input_base_path-2CWyzONG.tmp/0/
main.js
Error: ENOENT: no such file or directory, open 'C:\Users\steyer\Dropbox
Docs\KnowHow\Angular2\mobiletoolkit\hello-mobile\tmp\bundle_plugin-input_base_pa
th-2CWyzONG.tmp\0\main.js.map'
at Error (native)

angular/angularfire#200

• App Shell plugin
• Service Worker manifest
• Service Worker helper library

Cleanup old caches on install of new worker.

From the design doc:

but there are other mobile browsers that have high usage in specific markets which also don't support the API.

Is there data available to indicate what percentage of market will be supported by supporting both AppCache and SW?

• Define upgrade process
• Define dart integration

After generating an app according to the WIP guide, I set the browser to emulate offline mode and refreshed the app. The service worker was logging some stuff like it was trying to, but didn't succeed in falling back to the app shell.

In case the user has the following configuration:

return require('angular2-service-worker')
  .gulpGenManifest({
    group: [{
      name: 'all',
      sources: gulp.src(`${APP_DEST}/**`)
    }]
  })
  .pipe(gulp.dest(APP_DEST));

The manifest.appcache file will be cached by AppCache (when no SW supported).

Hi, its my first try using this mobile-toolkit. Followed the guide: cmd as administrator (win 10 x64), ng new hello-mobile --mobile; ng serve --prod; not the material-thing. The Page is working in Chrome (Version 51.0.2704.84 m), but there is no Service-Worker and there is a no-connection-error, if i turn off the network.Tried the app on android 4.3 with Chrome (Version 51.0.2704.81), works online, but got no-connection-error, when it is in flight-mode. Also, there is no ngsw-manifest.json-File in the dist folder.
NodeJS-Version is 4.2.1, NPM is 2.14.7, angular-cli: 0.1.0

Info:
Got no errors on installing angular-cli or creating the hello-mobile-project with cmd as administrator.

Context: when I tried to install the service worker and use it according to the wip guide, it failed because of missing dependency on vinyl.

Using case sensitive attribute names as markers in the generated by the Universal template will not work with the app shell runtime parser. Currently the runtime parser uses parse5 which serializes the HTML AST without keeping the case sensitivity.

Options to proceed:

• Short term solution is using class name as a marker.
• For longer term solution consider:
  • Using the Angular template parser for producing the AST.
  • Forking parse5 and introducing case sensitivity, ES2015 modules (allow easier tree-shaking), and payload reduction.

I created a repo: https://github.com/drejohnson/angular2-mobile-toolkit with my setup and can't figure out how to get my routes to render.

• Get offline compile working
• Use rollup or closure compiler
• Use the store for all data, and back it up to IndexedDB (in progress)
• Implement Web Worker support
• Bonus: upgrade the design

• Set up test to install proper npm dependencies
• Add specs to check the generated files to match expectation

@jeffbcross I regret not tracking ya' at ngConf, really wanted to chat a couple options with you and this toolkit, which I love. Great job on the presentation btw.

The gist of what I wanted to run by you is the possibility of a --native flag in addition to --mobile flag which could generate a NativeScript shell (or even ReactNative, whichever user prefers). I could certainly help provide a PR over next 2 weeks which would essentially do following:

$ ng new hello-mobile --mobile --native
$ cd hello-mobile

Then run the app:

$ ng run ios

or...

ng run android

There's a lot of nice things that could be done here with regards to this but that'd be my first base run.
If multiple native runtimes were supported we could provide something like this:

$ ng new hello-mobile --mobile --nativescript
...or...
$ ng new hello-mobile --mobile --reactnative

• sw companion library foundation (push notification registration, etc)
• Observable interface in companion library for UI visible notifications
• Register for push notifications in companion library
• Write e2e test for push notifications
• Figure out blocker for Chrome prompt when registering push notifications

Work with @alxhub to determine the best user experience.

• Come up with extensibility API
• Implement

Currently there are committed installed modules in the examples directory which slowdown cloning the repo.

• Add hash support to manifest
  • Diff two manifests and determine which files need to be fetched.
  • Ability to copy a file from one cache to another
  • Only download files that need to be downloaded