Production Mode

[evertonrobertoauler]

Hey there,

This is an awesome Angular 2 & Polymer integration, in developer mode it works just fine, but when I tried to use it in production mode, using this repository https://github.com/vaadin-marcus/angular2-polymer-tutorial, it didn't work well:

ng serve -prod

404 http://localhost:4200/bower_components/webcomponentsjs/webcomponents-lite.js Failed to load resource: the server responded with a status of 404 (Not Found)
404 http://localhost:4200/bower_components/vaadin-grid/vaadin-grid.min.js Failed to load resource: the server responded with a status of 404 (Not Found)

I don't know why but the angular-cli remove the .js files from the bower_components folder.

marcushellberg/angular2-polymer-tutorial#1

[Splaktar]

I get this with ng serve --prod:

ng serve --prod
Livereload server on http://localhost:49154
Serving on http://localhost:4200/

Build successful - 11036ms.

Slowest Trees                                 | Total               
----------------------------------------------+---------------------
BundlePlugin                                  | 8128ms              
BroccoliTypeScriptCompiler                    | 1258ms              
Funnel                                        | 907ms               

Slowest Trees (cumulative)                    | Total (avg)         
----------------------------------------------+---------------------
BundlePlugin (1)                              | 8128ms              
BroccoliTypeScriptCompiler (1)                | 1258ms              
Funnel (10)                                   | 1141ms (114 ms)     

fs.js:60
      throw err;  // Forgot a callback but don't know where? Use NODE_DEBUG=fs
      ^

Error: ENOTEMPTY: directory not empty, rmdir '/Users/splaktar/Git/tf/webapp/dist/vendor/@vaadin/angular2-polymer'
    at Error (native)

Then if I run it again, it doesn't throw an exception in the CLI, but I get these exceptions in the browser:

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:4200/app-concat.js Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:19 Error installing service worker:  DOMException: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
http://localhost:4200/bower_components/webcomponentsjs/webcomponents-lite.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:4200/app-concat.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:4200/bower_components/vaadin-grid/vaadin-grid.min.js Failed to load resource: the server responded with a status of 404 (Not Found)

[Splaktar]

This appears to be related to angular/angular-cli#540
which is fixed in angular/angular-cli#1129 but hasn't been merged yet.

[Splaktar]

I am currently working around this via the following until the above PR gets merged:

    "angular-cli": "git@github.com:DevIntent/angular-cli.git",

[jgarrard]

I see that the fix for 'don't ignore js in public' was merged. Does that mean this fix made it into beta 10 of the cli? I am still getting the same error mentioned earlier by @Splaktar using the newest version of angular-cli when building/serving production.

[Chabane]

I am still getting the same error mentioned earlier by @Splaktar and @jgarrard.

GET http://localhost:4200/bower_components/webcomponentsjs/webcomponents-lite.min.js
localhost/:21
GET http://localhost:4200/bower_components/webcomponentsjs/webcomponents-lite.min.js
localhost/:30
GET http://localhost:4200/bower_components/web-animations-js/web-animations-next-lite.min.js

I am using the latest version of angular-cli (beta 10)

[tehapo]

The code at v1.0.0-beta.10 tag suggests that this change is included in the release. I guess this needs further investigation.

https://github.com/angular/angular-cli/blob/v1.0.0-beta.10/lib/broccoli/angular2-app.js#L163

[Splaktar]

Yes, this is working properly in beta.10.

I'm using a customized build to support SCSS, but here is what I've got working in angular-cli-build.js:

'use strict';
const fs = require('fs');
const path = require('path');

// Import the require hook. Enables us to require TS files natively.
require('ts-node/register');

let Angular2App = require('angular-cli/lib/broccoli/angular2-app');
const Funnel = require('broccoli-funnel');
const MergeTree = require('broccoli-merge-trees');
const autoPrefixerTree = require('broccoli-autoprefixer');

module.exports = function(defaults) {
  // The Angular Application tree.
  const appTree = _buildAppTree(defaults);

  // The CSS tree that is auto prefixed with browser support.
  const cssAutoprefixed = autoPrefixerTree(new Funnel(appTree, {
    include: [ '**/*.css' ]
  }));

  return new MergeTree([appTree, cssAutoprefixed], { overwrite: true });
};

/**
 * Build the Broccoli Tree containing all the files used as the input to the e2e Angular2App.
 */
function _buildAppInputTree() {
  return new MergeTree([
    new Funnel('typings', {
      destDir: 'typings'
    }),
    new Funnel('src', {
      destDir: 'src'
    }),
    new Funnel('public', {
      include: ['**/*.html', '**/*.css', '**/*.js', '**/*.svg', '**/*.png'],
      destDir: 'public'
    })
  ]);
}

/**
 * Build the Broccoli Tree that contains the Angular2 App. This picks between E2E, Example or Demo app.
 * @param defaults The default objects from AngularCLI (deprecated).
 * @returns {Angular2App}
 */
function _buildAppTree(defaults) {
  let inputNode = _buildAppInputTree();
  let sourceDir = 'src';

  return new Angular2App(defaults, inputNode, {
    sourceDir: sourceDir,
    tsCompiler: {},
    sassCompiler: {
      includePaths: [
        'src/**/*.scss'
      ]
    },
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'firebase/*.+(js|css|map)',
      'angularfire2/**/*.+(js|css|js.map)',
      'angular2-google-maps/**/*.+(js|css|js.map)',
      '@angular2-material/**/*.+(js|css|js.map)',
      '@vaadin/**/*.+(js|js.map)'
    ]
  });
}

[tehapo]

Just verified that angular2-polymer-tutorial now works in production mode with angular-cli@1.0.0-beta.10, but gives 404 errors when using the older 1.0.0-beta.9 version.

Closing this ticket now, feel free to reopen if this problem still appears.