Skip to content

build: use webpack for building apps. #1325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 12 commits into from
49 changes: 32 additions & 17 deletions addon/ng2/blueprints/mobile/files/__path__/main-app-shell.ts
Original file line number Diff line number Diff line change
@@ -1,29 +1,44 @@
import 'angular2-universal-polyfills';
import { provide } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { APP_SHELL_BUILD_PROVIDERS } from '@angular/app-shell';
import { AppComponent } from './app/';
import {
REQUEST_URL,
ORIGIN_URL
import {
REQUEST_URL,
ORIGIN_URL,
Bootloader,
BootloaderConfig,
AppConfig
} from 'angular2-universal';
import { AppComponent } from './app/';

export const options = {
directives: [
// The component that will become the main App Shell
AppComponent
],
const bootloaderConfig: BootloaderConfig = {
platformProviders: [
APP_SHELL_BUILD_PROVIDERS,
provide(ORIGIN_URL, {
useValue: ''
})
useValue: 'http://localhost:4200' // full urls are needed for node xhr
}),
provide(APP_BASE_HREF, { useValue: '/' }),
],
async: true,
preboot: false
}

const appConfig: AppConfig = {
directives: [
// The component that will become the main App Shell
AppComponent
],
providers: [
// What URL should Angular be treating the app as if navigating
provide(APP_BASE_HREF, {useValue: '/'}),
provide(REQUEST_URL, {useValue: '/'})
],
async: false,
preboot: false
};
provide(REQUEST_URL, { useValue: '/' })
]
}

export function getBootloader() : Bootloader {
return new Bootloader(bootloaderConfig);
}

export function serialize(bootloader: Bootloader, template: string) : string {
appConfig.template = template;
return bootloader.serializeApplication(appConfig);
}
2 changes: 0 additions & 2 deletions addon/ng2/blueprints/mobile/files/__path__/system-import.js

This file was deleted.

51 changes: 12 additions & 39 deletions addon/ng2/blueprints/ng2/files/__path__/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,53 +5,26 @@
<title><%= jsComponentName %></title>
<base href="/">

{{#unless environment.production}}
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
{{/unless}}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"><% if (isMobile) { %>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.webapp">
{{#each mobile.icons}}
<link rel="{{rel}}" {{#if sizes}}sizes="{{sizes}}" {{/if}}href="{{href}}">
{{/each}}

{{#if environment.production}}
<script type="text/javascript">
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/worker.js').catch(function(err) {
console.log('Error installing service worker: ', err);
});
}
</script>
{{/if}}
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png">
<link rel="apple-touch-startup-image" href="/icons/apple-touch-icon-180x180.png">
<% } %>

</head>
<body>
<<%= prefix %>-root>Loading...</<%= prefix %>-root>
<% if (isMobile) { %>
{{#if environment.production}}
<script src="/app-concat.js" async></script>
{{else}}
{{#each scripts.polyfills}}
<script src="{{.}}"></script>
{{/each}}
<script>
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
</script>
{{/if}}
<% } else { %>
{{#each scripts.polyfills}}
<script src="{{.}}"></script>
{{/each}}
<script>
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
</script>
<% } %>
</body>
</html>
18 changes: 18 additions & 0 deletions addon/ng2/blueprints/ng2/files/__path__/polyfills.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
// Prefer CoreJS over the polyfills above
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i'm still not comfortable with this being import/require'd yet, there's an increasing number of Zone issues we're seeing with people require'ing Zone.

41 changes: 41 additions & 0 deletions addon/ng2/blueprints/ng2/files/__path__/test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@

/*global jasmine, __karma__, window*/
import 'core-js/es6';
import 'core-js/es7/reflect';

// Typescript emit helpers polyfill
import 'ts-helpers';

import 'zone.js/dist/zone';
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import 'zone.js/dist/sync-test';

// RxJS
import 'rxjs/Rx';

Promise.all([
System.import('@angular/core/testing'),
System.import('@angular/platform-browser-dynamic/testing')
]).then(function (providers) {
let testing = providers[0];
let testingBrowser = providers[1];

testing.setBaseTestProviders(testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
});

let testContext = require.context('../src', true, /\.spec\.ts/);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto here - this is common/webpack specific code...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure if there is an alternative for require.context.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

require.context is a webpack function.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there an alternative to bundling files in webpack for running in karma?


/*
* get all the files, for each file, call the context function
* that will require the file and load it up here. Context will
* loop and require those spec files here
*/
function requireAll(requireContext) {
return requireContext.keys().map(requireContext);
}

requireAll(testContext);
25 changes: 13 additions & 12 deletions addon/ng2/blueprints/ng2/files/__path__/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl":"./src",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"mapRoot": "/",
"module": "commonjs",
"module": "es6",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tree shake

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's going on here? We don't care about TypeScript maps? Even so, we probably want to support running tsc and having source maps.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nvm, misread. Not sure why this is being taken off.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Turns out it was further down, but misspelled. Fixed.

"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "../dist/",
"outDir": "./dist/",
"rootDir": ".",
"sourceMap": true,
"target": "es5",
"inlineSources": true
"mapRoot": "/",
"inlinesource": true
},

"files": [
"main.ts",<% if (isMobile) { %>
"main-app-shell.ts",<% } %>
"typings.d.ts"
"compileOnSave": false,
"buildOnSave": false,
"exclude": [
"node_modules",
"bower_components"
],
"includes": [
"**.d.ts"
]
}
14 changes: 12 additions & 2 deletions addon/ng2/blueprints/ng2/files/__path__/typings.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@

// Typings reference file, see links for more information
// https://github.com/typings/typings
// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html

/// <reference path="<%= refToTypings %>/typings/browser.d.ts" />
<% if(!isMobile) { %>declare var module: { id: string };<% } %>
/// <reference path="<%= refToTypings %>/typings/index.d.ts" />
/// <reference path="../node_modules/typescript/lib/lib.es2015.core.d.ts" />
/// <reference path="../node_modules/typescript/lib/lib.es2015.collection.d.ts" />
/// <reference path="../node_modules/typescript/lib/lib.es2015.promise.d.ts" />

<% if(!isMobile) { %>
declare var System: any;
declare var module: { id: string };
declare var require: any;
<% } %>

17 changes: 17 additions & 0 deletions addon/ng2/blueprints/ng2/files/__path__/vendor.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// Typescript emit helpers polyfill
import 'ts-helpers';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see previous note about ts-helpers.


import '@angular/core';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why are we using the side-effect-y version of there in a vendor.ts file? this forces inclusion of a bunch of code somebody may never use?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By putting this imports at vendor we are able to extract a cached vendor file with all vendor dependencies. That way you can update your app bundle without having to load the vendors again.

import '@angular/common';
import '@angular/compiler';
import '@angular/http';
import '@angular/router';
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';

<% if(isMobile) { %>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a weird thing to be doing dynamically?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not dynamic, it's a template file. A project generated with ng new --mobile will have this line, otherwise it won't.

import '@angular/app-shell';
<% } %>

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
21 changes: 0 additions & 21 deletions addon/ng2/blueprints/ng2/files/angular-cli-build.js

This file was deleted.

18 changes: 1 addition & 17 deletions addon/ng2/blueprints/ng2/files/config/karma.conf.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function (config) {
config.set({
basePath: '..',
Expand All @@ -16,20 +13,7 @@ module.exports = function (config) {
flags: ['--no-sandbox']
}
},
files: [
{ pattern: 'dist/vendor/es6-shim/es6-shim.js', included: true, watched: false },
{ pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: false },
{ pattern: 'dist/vendor/reflect-metadata/Reflect.js', included: true, watched: false },
{ pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false },
{ pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: false },
{ pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false },
{ pattern: 'dist/vendor/zone.js/dist/fake-async-test.js', included: true, watched: false },

{ pattern: 'config/karma-test-shim.js', included: true, watched: true },

// Distribution folder.
{ pattern: 'dist/**/*', included: false, watched: true }
],
files: [],
exclude: [
// Vendor packages might include spec files. We don't want to use those.
'dist/vendor/**/*.spec.js'
Expand Down
2 changes: 0 additions & 2 deletions addon/ng2/blueprints/ng2/files/e2e/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,12 @@
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"mapRoot": "",
"module": "commonjs",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See my comment above. Any reason to remove those?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Turns out this one needed to go away, because e2e is using tsconfig and it auto-sets the inlineSourceMap option which is not compatible with this one.

"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"rootDir": ".",
"sourceMap": true,
"sourceRoot": "/",
"target": "es5"
}
}
2 changes: 1 addition & 1 deletion addon/ng2/blueprints/ng2/files/e2e/typings.d.ts
Original file line number Diff line number Diff line change
@@ -1 +1 @@
/// <reference path="../typings/main.d.ts" />
/// <reference path="../typings/index.d.ts" />
16 changes: 8 additions & 8 deletions addon/ng2/blueprints/ng2/files/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,21 +21,21 @@
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"es6-shim": "0.35.1",
"reflect-metadata": "0.1.3",
"core-js": "^2.4.0",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"ts-helpers": "^1.1.1",
"zone.js": "0.6.12"
},
"devDependencies": {<% if(isMobile) { %>
"@angular/platform-server": "2.0.0-rc.4",
"@angular/service-worker": "0.2.0",
"@angular/app-shell": "0.0.0",
"angular2-broccoli-prerender": "0.11.5",
"angular2-universal":"0.104.5",
"angular2-universal-polyfills": "0.4.1",
"preboot": "2.0.10",<% } %>
"angular-cli": "<%= version %>",
"preboot": "2.1.2",
"parse5": "1.5.1",<% } %>
"angular-cli": "^<%= version %>",
"codelyzer": "0.0.20",
"ember-cli-inject-live-reload": "1.4.0",
"jasmine-core": "2.4.1",
Expand All @@ -44,9 +44,9 @@
"karma-chrome-launcher": "0.2.3",
"karma-jasmine": "0.3.8",
"protractor": "3.3.0",
"ts-node": "0.5.5",
"ts-node": "0.9.1",
"tslint": "3.11.0",
"typescript": "1.8.10",
"typings": "0.8.1"<%= stylePackage %>
"typescript": "^1.9.0-dev.20160627-1.0",
"typings": "^1.3.1"<%= stylePackage %>
}
}
7 changes: 3 additions & 4 deletions addon/ng2/blueprints/ng2/files/typings.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
{
"ambientDevDependencies": {
"globalDevDependencies": {
"angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
"jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
"selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
},
"ambientDependencies": {
"es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"<% if (isMobile) {%>,
"node": "registry:dt/node#4.0.0+20160509154515" <% } %>
"globalDependencies": {
<% if (isMobile) {%>"node": "registry:dt/node#6.0.0+20160621231320" <% } %>
}
}
Loading