antonybudianto / angular-webpack-starter

:star2: Angular Webpack Starter with AoT compilation, Lazy-loading, Tree-shaking, and Hot Module Reload (Updated to 4.1.0!)

Welcome!

Hi, I'm Antony from Indonesia. I've 8+ years experience on web development from various industry (B2B, HRIS, E-Commerce, Fintech, CRM, Omni-channel).

I spent most of my time on Web development and also learned many other stacks along the journey to understand the whole picture better.

I also sometimes do open-source, and was Google Cloud Certified.

and lastly, Creator of Deesain and StickyNoted.

Some of notable professional achievements:

• Improved web service reliability and resilience by integrating custom PM2 with Systemd
• Initiated and supervise in-house SSR React Web Framework and support the migration
• Initiated autoscaling worker with custom consul DNS to save cost
• Initiated JavaScript Error Stack parser CLI to help FE team to pinpoint the error location without sourcemap
• Resolved long standing and high priority issue regarding FCM Notification token issue

Tech stacks:

• Frontend (React, Vue, Next.js, Nuxt)
• Backend (Java, Go, Rust)
• Infrastructure (Docker, Nginx)

Other online profile:

• Blog
• LinkedIn

---

angular-webpack-starter's Issues

unit test warnings (context)

same from common config

Having Trouble Implementing component sass stylesheets.

Having trouble implementing sass stylesheets in components when running npm build only. Getting an error where the relative directory that is being read isn't relative to the compiled destination that the "*.scss.shim.ts" is being created. It is still relating back to the main src from the dev app directory (e.g. '../../../../../app/pages/home/home.scss.shim.ts') from the compiled directory. Any help would be appreciated. Not sure if it is related to angular-webpack-starter problem or have seen one other person with the same problem on 'angular/angular#11688'.

home.component.ts

@Component({
    selector: 'as-home',
    templateUrl: './home.html',
    styleUrls: [
        './home.scss'
    ]
})
export class HomeComponent {}

webpack.common.js example:

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const helpers = require('./helpers');
const constants = require('./constants');

const isProd = process.env.npm_lifecycle_event === 'build';

module.exports = {
    entry: {
        'polyfills': './src/app/polyfills.ts',
        'vendor': './src/app/vendor.ts',
        'app': './src/app/main.ts'
    },

    resolve: {
        extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html']
    },

    module: {
        rules: [{
                enforce: 'pre',
                test: /^((?!(ngfactory|shim)).)*ts$/,
                loader: 'tslint'
            }, {
                test: /\.ts$/,
                loaders: [
                    'awesome-typescript-loader',
                    'angular2-template-loader',
                    'angular2-router-loader?loader=system&genDir=src/compiled/src/app&aot=' + isProd
                ]
            }, {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file"
            }, {
                test: /\.html$/,
                loader: 'html',
                exclude: helpers.root('src', 'public')
            }, {
                test: /.(png|woff(2)?|jpeg|jpg|eot|ttf|svg|otf|scss|css)(\?[a-z0-9=\.]+)?$/,
                exclude: helpers.root('src', 'app'),
                loader: 'url-loader?limit=100000'
            }, {
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: ['css-loader']
                })
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loader: 'raw'
            },
            {
                test: /\.scss$/,
                exclude: helpers.root('src', 'app'),
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: ['sass-loader']
                })
            },
            {
                test: /\.scss$/,
                include: helpers.root('src', 'app'),
                loader: 'raw'
            }
        ]
    },

    plugins: [
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery',
            'window.jQuery': 'jquery'
        }),

        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            constants.CONTEXT_REPLACE_REGEX,
            helpers.root('./src') // location of your src
        ),

        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            favicon: 'src/favicon.ico',
            template: 'src/public/index.html'
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                tslint: {
                    emitError: false,
                    failOnHint: false
                }
            }
        })
    ]

};

tsconfig-aot.json Example:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./src",
    "outDir": "output",
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true,
    "forkChecker": true,
    "useCache": true
  },
  "angularCompilerOptions": {
   "genDir": "src/compiled",
   "skipMetadataEmit" : true
 },
  "exclude": [
    "node_modules",
    "config",
    "src/compiled",
    "e2e",
    "src/**/*.spec.ts",
    "src/app/main-ngc.ts",
    "src/app/main.ts",
    "typings",
    "coverage",
    "dist",
    "report",
    "src/tmp",
    "src/public/components"
  ]
}

Full error Recieved:

ModuleNotFoundError: Module not found: Error: Can't resolve '../../../../../app/pages/home/home.scss.shim' in '/Users/aeden/web/sas-angular-travel/frontend/src/compiled/src/app/pages/home'
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/Compilation.js:232:38
    at onDoneResolving (/Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:40:20)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:117:20
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:726:13
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:52:16
    at done (/Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:241:17)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:44:16
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:723:17
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:167:37
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:112:22
    at onResolved (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:70:11)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:108:46)
    at innerCallback (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:210:15
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:39:4
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:108:46)
    at innerCallback (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:210:15
    at innerCallback (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:123:11)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:210:15
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:45:5
resolve '../../../../../app/pages/home/home.scss.shim' in '/Users/aeden/web/sas-angular-travel/frontend/src/compiled/src/app/pages/home'
  using description file: /Users/aeden/web/sas-angular-travel/frontend/package.json (relative path: ./src/compiled/src/app/pages/home)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/aeden/web/sas-angular-travel/frontend/package.json (relative path: ./src/compiled/src/app/pages/home)
    using description file: /Users/aeden/web/sas-angular-travel/frontend/package.json (relative path: ./src/app/pages/home/home.scss.shim)
      as directory
        /Users/aeden/web/sas-angular-travel/frontend/src/app/pages/home/home.scss.shim doesn't exist
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/aeden/web/sas-angular-travel/frontend/src/app/pages/home/home.scss.shim doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/aeden/web/sas-angular-travel/frontend/src/app/pages/home/home.scss.shim.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/aeden/web/sas-angular-travel/frontend/src/app/pages/home/home.scss.shim.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/aeden/web/sas-angular-travel/frontend/src/app/pages/home/home.scss.shim.json doesn't exist
      .css
        Field 'browser' doesn't contain a valid alias configuration
        /Users/aeden/web/sas-angular-travel/frontend/src/app/pages/home/home.scss.shim.css doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        /Users/aeden/web/sas-angular-travel/frontend/src/app/pages/home/home.scss.shim.scss doesn't exist
      .html
        Field 'browser' doesn't contain a valid alias configuration
        /Users/aeden/web/sas-angular-travel/frontend/src/app/pages/home/home.scss.shim.html doesn't exist
 41% building modules 266/467 modules 201 active ...ngular/common/src/directives/ng_if.js
/Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:123
    if(!this._plugins[name] || this._plugins[name].length === 0) return callback(null, init);
                                                                     ^
TypeError: Cannot read property 'profile' of null
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/Compilation.js:237:12
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:74:13
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:123:70)
    at onDoneResolving (/Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:49:11)
    at onDoneResolving (/Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:165:6)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:161:6
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:726:13
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:52:16
    at async.forEachOf.async.eachOf (/Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:236:30)
    at _parallel (/Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:717:9)
    at Object.async.parallel (/Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:731:9)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:154:11
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:726:13
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:52:16
    at done (/Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:246:17)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:44:16
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:723:17
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:167:37
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:113:7
    at onResolved (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:72:10)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at innerCallback (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:122:22)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:210:15
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:38:22
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at innerCallback (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:122:22)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:210:15
    at innerCallback (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:122:22)

the gulp-cssnano changes the z-index of the minified css files

Issue Overview

the gulp-cssnano changes the z-index of the minified css files

Issue Description

this happens when we issue a 'gulp build'

The solution I found is in the build.js in the task 'build-assets' to add to the 'gulp-cssnano' plugin the following:
cssnano({zindex: false})
that means that the minification will not touch the z-indexes.

" should be ' when adding my router

Hi ,

I am trying to add route. Below is by router file.

import { Routes } from '@angular/router';

import { MyLink1Component } from './mylink1.component';

export const MyLink1Routes: Routes = [
{ path: 'mylink1', component: MyLink1Component }
];

Error:

(quotemark) app/mylink1/mylink1.module.ts[3, 34]: " should be '

stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: Failed to lint: app/mylink1/mylink1.module.ts [3, 34]: " should be '.

npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v4.6.0
npm ERR! npm v2.15.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: gulp serve-dev
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'gulp serve-dev'.
npm ERR! This is most likely a problem with the angular2-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! gulp serve-dev
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls angular2-starter
npm ERR! There is likely additional logging output above.

Please help.

Sridhar

env.json load to webpack env

Are you using angular-webpack-starter? Please comment here!

Hi everyone ✋
I would like to know who are using angular-webpack-starter and how you use it.
It'd be great if you can post your project/company logo too

Please share your experiences below!

Thank you ❤️

Please don't post starter's issues here (it'll be removed without notice), but create new one

env not working in production

npm run build hangs at 95%

C:\JettWebPack\webPack>
C:\JettWebPack\webPack>npm run build

[email protected] prebuild C:\JettWebPack\webPack
npm run clean:build

[email protected] clean:build C:\JettWebPack\webPack
rimraf dist

[email protected] build C:\JettWebPack\webPack
webpack --config config/webpack/webpack.prod.js --progress --profile --bail

APP_ENV is "development"
21389ms building modules
120ms sealing
4ms optimizing
3ms basic module optimization
190ms module optimization
15ms advanced module optimization
28ms basic chunk optimization
4ms chunk optimization
7ms advanced chunk optimization
3ms module and chunk tree optimization
95ms module reviving
82ms module order optimization
11ms module id optimization
8ms chunk reviving
3ms chunk order optimization
32ms chunk id optimization
60ms hashing
5ms module assets processing
255ms chunk assets processing
10ms additional chunk assets processing
6ms recording
19158ms additional asset processing
100ms chunk asset optimization
314ms asset optimization
95% emitting

UNMET PEER DEPENDENCY [email protected]

Issue Overview

On npm install I receive a warning that there is an unmet dependency. Googled around for this, the recommendation was to run npm install [email protected] --save-devbut this resulted in another very similar error:

- [email protected] node_modules/webpack/node_modules/cliui
[email protected] /Users/tnsasse/Development/myproject/mp
└── UNMET PEER DEPENDENCY [email protected]

Is this something to worry about? I am not expert enough in npm/angular, to determine if this is really causing issues or not. So if not, please close the issue right away ;-)

Issue Description

 % npm install

> [email protected] postinstall /Users/tnsasse/Development/myproject/mp
> typings install


└── (No dependencies)

[email protected] /Users/tnsasse/Development/myproject/mp
├─┬ [email protected]
│ └── [email protected] 
├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └─┬ [email protected] 
│       ├── [email protected] 
│       ├── [email protected] 
│       └── [email protected] 
└─┬ **UNMET PEER DEPENDENCY** [email protected]
  └─┬ [email protected]
    └─┬ [email protected] 
      ├── [email protected] 
      ├── [email protected] 
      └── [email protected] 

Reproducables

Follow the starter guide. I am not sure if I got the error the first time I ran npm install or on a later run. I am very new to angular/npm, so maybe it's a layer 8 problem.

Information

Operating System	OS X
Node version	v6.3.1
NPM Version	v3.10.7
Environment	Browser

Development not defined

Issue Overview

Cloning repo and starting from scratch, simple issue found around "development not defined"

Issue Description

DefinePlugin treats passed config values poorly.

    new webpack.DefinePlugin({
      'process.env': "'envMap'"
    }),

fixes the issue. (rebuild dll and rerun)

Reproducables

Two different machines, same issue.

Information

Operating System	OSX
Node version	4.x
NPM Version	4.x
Environment	Browser

npm run build on Ubuntu

Issue Overview

I am running into an issue with npm run build. The command works fine on OSX, but when I attempt to run the command on Ubuntu, I am getting an error. I think it might be a path issue but I'm not sure how to proceed. Any ideas?

Issue Description

 10% building modules 0/4 modules 4 active ...index.js!/var/www/mda/web/src/main.tsno-unused-variable is deprecated. Use the tsc compiler options --noUnusedParameters and --noUnusedLocals instead.
 10% building modules 4/4 modules 0 activeModuleNotFoundError: Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/var/www/mda/web/src'
    at factoryCallback (/var/www/mda/web/node_modules/webpack/lib/Compilation.js:230:39)
    at /var/www/mda/web/node_modules/webpack/lib/NormalModuleFactory.js:234:19
    at onDoneResolving (/var/www/mda/web/node_modules/webpack/lib/NormalModuleFactory.js:59:20)
    at /var/www/mda/web/node_modules/webpack/lib/NormalModuleFactory.js:126:20
    at /var/www/mda/web/node_modules/webpack/node_modules/async/dist/async.js:3694:9
    at /var/www/mda/web/node_modules/webpack/node_modules/async/dist/async.js:359:16
    at iteratorCallback (/var/www/mda/web/node_modules/webpack/node_modules/async/dist/async.js:933:13)
    at /var/www/mda/web/node_modules/webpack/node_modules/async/dist/async.js:843:16
    at /var/www/mda/web/node_modules/webpack/node_modules/async/dist/async.js:3691:13
    at apply (/var/www/mda/web/node_modules/webpack/node_modules/async/dist/async.js:21:25)
    at /var/www/mda/web/node_modules/webpack/node_modules/async/dist/async.js:56:12
    at /var/www/mda/web/node_modules/webpack/lib/NormalModuleFactory.js:121:22
    at onResolved (/var/www/mda/web/node_modules/enhanced-resolve/lib/Resolver.js:70:11)
    at loggingCallbackWrapper (/var/www/mda/web/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/var/www/mda/web/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
    at loggingCallbackWrapper (/var/www/mda/web/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/var/www/mda/web/node_modules/tapable/lib/Tapable.js:181:46)
    at innerCallback (/var/www/mda/web/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
    at loggingCallbackWrapper (/var/www/mda/web/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /var/www/mda/web/node_modules/tapable/lib/Tapable.js:283:15
    at /var/www/mda/web/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:38:4
    at loggingCallbackWrapper (/var/www/mda/web/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/var/www/mda/web/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
    at loggingCallbackWrapper (/var/www/mda/web/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/var/www/mda/web/node_modules/tapable/lib/Tapable.js:181:46)
    at innerCallback (/var/www/mda/web/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
    at loggingCallbackWrapper (/var/www/mda/web/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /var/www/mda/web/node_modules/tapable/lib/Tapable.js:283:15
    at innerCallback (/var/www/mda/web/node_modules/enhanced-resolve/lib/Resolver.js:123:11)
    at loggingCallbackWrapper (/var/www/mda/web/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
resolve './$$_gendir/app/app.module.ngfactory' in '/var/www/mda/web/src'
  using description file: /var/www/mda/web/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /var/www/mda/web/package.json (relative path: ./src)
    using description file: /var/www/mda/web/package.json (relative path: ./src/$$_gendir/app/app.module.ngfactory)
      as directory
        /var/www/mda/web/src/$$_gendir/app/app.module.ngfactory doesn't exist
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /var/www/mda/web/src/$$_gendir/app/app.module.ngfactory doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /var/www/mda/web/src/$$_gendir/app/app.module.ngfactory.js doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /var/www/mda/web/src/$$_gendir/app/app.module.ngfactory.ts doesn't exist

Information

Operating System	Ubuntu 16.04
Node version	6.10.0
NPM Version	3.10.10

shared module and route styleguide

Need help

I want help How to load custom font file ?
i modified webpack.common.js for scss
{
test: /.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(?v=[0-9].[0-9].[0-9])?$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /.css$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin
.extract({
fallbackLoader: "style-loader",
loader: ['css-loader' + (isProd ? '?minimize' : ''), 'postcss-loader']
})
},
{
test: /.css$/,
include: helpers.root('src', 'app'),
loader: 'raw-loader!postcss-loader'
},
{
test: /.scss$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin
.extract({
fallbackLoader: "style-loader",
loader: ['css-loader' + (isProd ? '?minimize' : ''), 'sass-loader']
})
},
{
test: /.scss$/,
include: helpers.root('src', 'app'),
loader: 'raw-loader!sass-loader'
}

like that and

@font-face {
font-family: 'CiscoSans';
font-style: normal;
font-weight: 100;
src: url('/assets/fonts/CiscoSans/CiscoSansThin-webfont.eot');
src: url('/assets/fonts/CiscoSans/CiscoSansThin-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/CiscoSans/CiscoSansThin-webfont.woff2') format('woff2'),
url('/assets/fonts/CiscoSans/CiscoSansThin-webfont.woff') format('woff'),
url('/assets/fonts/CiscoSans/CiscoSansThin-webfont.ttf') format('truetype'),
url('/assets/fonts/CiscoSans/CiscoSansThin-webfont.svg#ciscosansthin') format('svg');
}

and i have kept my font file in public/fonts/CiscoSans folder but not working.... :(

localhost/:12 GET http://localhost:8080/assets/fonts/CiscoSans/CiscoSansThin-webfont.ttf

Test CI run generates remap error

Issue Overview

When running test with ci enabled "npm test -- --ci" remap fails.

Issue Description

When running test with ci enabled "npm test -- --ci" remap fails.

20 12 2016 10:12:40.132:ERROR [coverage]: TypeError: remap is not a function
at RemapCoverageReporter.onCoverageComplete (D:\GitHub\angular-webpack-starter-master\node_modules\karma-remap-coverage\remap-coverage.js:23:23)
at Server. (D:\GitHub\angular-webpack-starter-master\node_modules\karma\lib\events.js:13:22)
at emitTwo (events.js:106:13)
at Server.emit (events.js:191:7)
at InMemoryReport.writeReport (D:\GitHub\angular-webpack-starter-master\node_modules\karma-coverage\lib\in-memory-report.js:14:22)
at writeReport (D:\GitHub\angular-webpack-starter-master\node_modules\karma-coverage\lib\reporter.js:68:16)
at D:\GitHub\angular-webpack-starter-master\node_modules\karma-coverage\lib\reporter.js:290:11
at Array.forEach (native)
at Collection.forEach (D:\GitHub\angular-webpack-starter-master\node_modules\karma\lib\browser_collection.js:93:21)
at D:\GitHub\angular-webpack-starter-master\node_modules\karma-coverage\lib\reporter.js:247:16
at Array.forEach (native)
at CoverageReporter.onRunComplete (D:\GitHub\angular-webpack-starter-master\node_modules\karma-coverage\lib\reporter.js:246:15)
at Server. (D:\GitHub\angular-webpack-starter-master\node_modules\karma\lib\events.js:13:22)
at emitTwo (events.js:111:20)
at Server.emit (events.js:191:7)
at emitRunCompleteIfAllBrowsersDone (D:\GitHub\angular-webpack-starter-master\node_modules\karma\lib\server.js:294:12)

Reproducables

pull down the project and run npm test -- --ci

Information

Operating System	Windows/10
Node version	6.9.2
NPM Version	3.10.8
Environment	Browser

favicon

exclude ngfactories from tslint eofline

how to make image assets determined during runtime?

I have the following piece of code, the image is not determined until the code is running in the browser. I noticed that when I compiled the code, I have to set the real file name of the image. So how can I achieve the feature of my code? Thank you so much!

        <div *ngFor="let module of moduleList; let i = index">
            <div *ngIf="module[1]" style="margin-bottom: 48px;" class="col-xs-4 col-sm-3 col-md-3 text-center">
                <a routerLink={{module[2]}}>
                    <img src="../../images/features/{{i}}.jpg" class="img-responsive center-block"
                         alt="{{module[0]}}">
                    <label>{{module[0]}}</label>
                </a>
            </div>
        </div>

add -p arg to build process

webpack/webpack#2644

jquery and bootstrap js not included

implement angular2 hmr

issue when running start:dll

If I run build & serve or build:jit & serve, everything is working very well, but when I run start:dll or build:dll & start, I got the following information:

==================

[email protected] start /Users/xxxxx/web
webpack-dashboard -- webpack-dev-server --inline --port 8080

�]0;webpack-dashboard��]0;webpack-dashboard��[?1049h�[?1h�=�[1;1r�[?25l�[1;1H�[H�[2J�[?1000h�[?1002h�[?1003h�[?1005h

Do you have any idea how do I fix it or how do I troubleshoot the issue ? Thank you!

Build stuck at 95%

Issue Overview

When building, the compilation stops at "95% emitting".

Issue Description

When building, the compilation stops at "95% emitting" and hangs. However, even killing the process makes the files to be outputted to the dist directory.

Reproducables

Clone the repo and run npm run build

Information

Operating System	Windows 10 v.1607
Node version	6.9.1
NPM Version	3.10.8
Environment	Browser

404 boostrap.css.map

Issue Overview

Running the starter, as described in the Readme, I receive an error in the browser, stating that bootstrap.css.map was not found. Is that something to worry about?

Issue Description

HTTP 404 for http://localhost:8080/bootstrap.css.map

Reproducables

• Downloaded the starter
• npm install
• npm run env
• npm start
• Point browser to `localhost:8080' and opened the console.

Information

Operating System	OS X
Node version	v6.3.1
NPM Version	v3.10.7
Environment	Browser

AoT Dev Mode

https://github.com/angular/angular-cli/pull/3181/files

Use ngtools loader for dev and test

Universal Support

Hey, thanks for this starter, i try so many starter but best this, have trouble adding universal support this starter u want add next release add universal support this starter ?

JiT build

Useful when:

• @ngtools/webpack is having issues
• 3rd parties lib didn't support AoT yet (but need that lib and want to ship soon)
• Benchmarking AoT vs JiT

Proposal:

• New npm script like npm run build:jit

this is totally reverse of #80 where it should use ngtools when test/dev

optimize with commonschunkplugin

Now the feature module (lazy loaded ones) bundle is bigger because not caught in commonsChunkplugin

Need help on not including the html templates as part of JS

Hi,

Can you please help me to change the config so the html templates will not be part of the js files. I need those physical files as we are using AEM. Please help. While running on build I should get those html files inside the folders like in this case home, shared, todolist

Drop gulp

Promote full webpack usage

package.json unmet dependencies

Issue Overview

npm dependency problem with webpack/webpack-dev-server

Issue Description

npm install fails with unmet dependencies:

npm WARN [email protected] requires a peer of webpack@>=1.3.0 <3 but none was installed.

(does not detect installed webpack 2.1.0-beta.24)

Reproducables

clone repo, npm install

update webpack and webpack-dev-server to v2 beta works:

diff --git a/package.json b/package.json
index 3ce9c60..9d8ee49 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,7 @@
     "tslint-loader": "^2.1.5",
     "typescript": "^2.0.2",
     "typings": "^1.3.3",
-    "webpack": "2.1.0-beta.24",
+    "webpack": "^2.1.0-beta.25",
     "webpack-merge": "^0.14.1",
     "zone.js": "^0.6.21"
   },
@@ -120,7 +120,7 @@
     "protractor": "4.0.8",
     "ts-node": "^1.3.0",
     "webpack-dashboard": "^0.1.8",
-    "webpack-dev-server": "^1.14.1",
+    "webpack-dev-server": "2.1.0-beta.5",
     "yargs": "^5.0.0"
   }
-}
\ No newline at end of file
+}

Information

Operating System	Windows
Node version	6.6.0
NPM Version	3.10.3
Environment	Browser

404 errors after changes with HMR

Issue Overview

After making changes to the .ts or .html file for a component and HMR running via npm start, get http://localhost:8080/component.html not found 404

Issue Description

Randomly after working in the project for a while and making saves and updates, the HRM will fail with an error on a Promise for polyfills.dll.js

GET http://localhost:8080/<component>.html 404 (Not Found)
scheduleTask @ polyfills.dll.js:8723
ZoneDelegate.scheduleTask @ polyfills.dll.js:7586
Zone.scheduleMacroTask @ polyfills.dll.js:7512
(anonymous) @ polyfills.dll.js:8746
send @ VM1008:3
ResourceLoaderImpl.get @ vendorDll.dll.js:39976
DirectiveNormalizer._fetch @ vendorDll.dll.js:20214
DirectiveNormalizer.normalizeTemplateAsync @ vendorDll.dll.js:20248
DirectiveNormalizer.normalizeTemplate @ vendorDll.dll.js:20228
CompileMetadataResolver._loadDirectiveMetadata @ vendorDll.dll.js:21474
(anonymous) @ vendorDll.dll.js:21715
(anonymous) @ vendorDll.dll.js:21630
CompileMetadataResolver.loadNgModuleMetadata @ vendorDll.dll.js:21630
RuntimeCompiler._loadModules @ vendorDll.dll.js:33055
RuntimeCompiler._compileModuleAndComponents @ vendorDll.dll.js:33025
RuntimeCompiler.compileModuleAsync @ vendorDll.dll.js:33015
PlatformRef_._bootstrapModuleWithZone @ vendorDll.dll.js:23869
PlatformRef_.bootstrapModule @ vendorDll.dll.js:23851
startApp @ main.ts:18
ZoneDelegate.invoke @ polyfills.dll.js:7573
Zone.run @ polyfills.dll.js:7455
(anonymous) @ polyfills.dll.js:7843
ZoneDelegate.invokeTask @ polyfills.dll.js:7606
Zone.runTask @ polyfills.dll.js:7495
drainMicroTaskQueue @ polyfills.dll.js:7742

polyfills.dll.js:7729 Unhandled Promise rejection: Failed to load <component>.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load <component>.html undefined
consoleError @ polyfills.dll.js:7729
_loop_1 @ polyfills.dll.js:7758
drainMicroTaskQueue @ polyfills.dll.js:7762
ZoneTask.invoke @ polyfills.dll.js:7680
polyfills.dll.js:7731 Error: Uncaught (in promise): Failed to load <component>.html
    at resolvePromise (polyfills.dll.js:7809)
    at resolvePromise (polyfills.dll.js:7794)
    at polyfills.dll.js:7843
    at ZoneDelegate.invokeTask (polyfills.dll.js:7606)
    at Zone.runTask (polyfills.dll.js:7495)
    at drainMicroTaskQueue (polyfills.dll.js:7742)
    at XMLHttpRequest.ZoneTask.invoke (polyfills.dll.js:7680)

Once this occurs, it's impossible to fix no matter how many times I rebuild the dlls or re-run npm start or empty the browser cache.

Reproducables

Very difficult to reproduce and have not been able to guarantee reproduction. Only solution has been to full re-clone the repo and start over with a new npm i. It works for a while and then will crash again and never come back.

Information

Operating System	OSX
Node version	6.9.2
NPM Version	3.10.9
Environment	Browser

mobile toolkit

alternative #81 (using service-worker natively)

waiting stable @angular/mobile-toolkit

Problems with 'npm run build'

Issue Overview

I can start via npm start but it fails after running npm run build or npm run serve:build

Issue Description

See my log file at the bottom.

Reproducables

sry its not plunkr able. ;-)

Information

Operating System	OSX
Node version	7.3.0
NPM Version	4.0.5
Environment	Browser

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 verbose lifecycle [email protected]~prebuild: unsafe-perm in lifecycle true
7 verbose lifecycle [email protected]~prebuild: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Test Version 0.1.0node_modules/.bin:/Users/denfie/.rbenv/shims:/opt/local/bin:/opt/local/sbin:/Library/Frameworks/Python.framework/Versions/3.4/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/go/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands
8 verbose lifecycle [email protected]~prebuild: CWD: /Users/denfie/Test Version 0.1.0
9 silly lifecycle [email protected]~prebuild: Args: [ '-c', 'npm run clean:build' ]
10 silly lifecycle [email protected]~prebuild: Returned: code: 0  signal: null
11 info lifecycle [email protected]~build: [email protected]
12 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
13 verbose lifecycle [email protected]~build: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Test Version 0.1.0node_modules/.bin:/Users/denfie/.rbenv/shims:/opt/local/bin:/opt/local/sbin:/Library/Frameworks/Python.framework/Versions/3.4/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/go/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands
14 verbose lifecycle [email protected]~build: CWD: /Users/denfie/Test Version 0.1.0
15 silly lifecycle [email protected]~build: Args: [ '-c',
15 silly lifecycle   'webpack --config config/webpack/webpack.prod.js --progress --profile --bail' ]
16 silly lifecycle [email protected]~build: Returned: code: 1  signal: null
17 info lifecycle [email protected]~build: Failed to exec build script
18 verbose stack Error: [email protected] build: `webpack --config config/webpack/webpack.prod.js --progress --profile --bail`
18 verbose stack Exit status 1
18 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:279:16)
18 verbose stack     at emitTwo (events.js:106:13)
18 verbose stack     at EventEmitter.emit (events.js:191:7)
18 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
18 verbose stack     at emitTwo (events.js:106:13)
18 verbose stack     at ChildProcess.emit (events.js:191:7)
18 verbose stack     at maybeClose (internal/child_process.js:885:16)
18 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
19 verbose pkgid [email protected]
20 verbose cwd /Users/denfie/Test Version 0.1.0
21 error Darwin 16.4.0
22 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
23 error node v7.3.0
24 error npm  v4.0.5
25 error code ELIFECYCLE
26 error [email protected] build: `webpack --config config/webpack/webpack.prod.js --progress --profile --bail`
26 error Exit status 1
27 error Failed at the [email protected] build script 'webpack --config config/webpack/webpack.prod.js --progress --profile --bail'.
27 error Make sure you have the latest version of node.js and npm installed.
27 error If you do, this is most likely a problem with the angular-webpack-starter package,
27 error not with npm itself.
27 error Tell the author that this fails on your system:
27 error     webpack --config config/webpack/webpack.prod.js --progress --profile --bail
27 error You can get information on how to open an issue for this project with:
27 error     npm bugs angular-webpack-starter
27 error Or if that isn't available, you can get their info via:
27 error     npm owner ls angular-webpack-starter
27 error There is likely additional logging output above.
28 verbose exit [ 1, true ]

build fail and not able to run app

I love systemjs starter with gulp. But it does not support lazy loading modules. This latest webpack starter failing to build and it stuck at 65% and not able to run the app.

E2E test with protractor broken

Issue Overview

[11:32:43] I/direct - Using ChromeDriver directly...
[11:32:46] E/launcher - Error: C:\ody\angular-webpack-starter-master\e2e\home\home.spec.ts:1
(function (exports, require, module, __filename, __dirname) { import { browser, by, element } from 'protractor';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:543:28)
    at Module.m._compile (C:\ody\angular-webpack-starter-master\node_modules\ts-node\src\index.ts:413:23)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .ts] (C:\ody\angular-webpack-starter-master\node_modules\ts-node\src\index.ts:416:12)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
[11:32:46] E/launcher - Process exited with error code 100

Issue Description

ts-node fails es6 imports for protractor e2e tests.
What about testbundling for protractor?

Reproducables

simply clone and reinstall repo (yarn.lock)

yarn
npm start
npm run e2e

Information

Operating System	Windows 7 x64
Node version	7.5.0
NPM Version	4.1.2
Environment	Chrome/Firefox

false

resolved

Dashboard errors and will not work sometimes with npm start

Issue Overview

Every now and again when I run npm start I get a dashboard error and node will not start and launch the site.

Issue Description

Reproducables

Here is the error log. When I install a new package or move my TypeScript files around is when this tends to happen. I do an npm run build:dll but that does not change anything.

webpack-dashboard -- webpack-dev-server --inline --port 8080

ternal/process.js:172
throw errnoException(err, 'kill');
^

ror: kill ESRCH
at exports._errnoException (util.js:1022:11)
at process.kill (internal/process.js:172:13)
at process. (\node_modules\webpack-dashboard\bin\webpack
ashboard.js:70:11)
at emitOne (events.js:101:20)
at process.emit (events.js:188:7)
at process.exit (internal/process.js:146:15)
at Screen. (\node_modules\webpack-dashboard\dashboard\in
x.js:31:13)
at Screen.EventEmitter._emit (\node_modules\blessed\lib\events.js:9
20)
at Screen.EventEmitter.emit (\node_modules\blessed\lib\events.js:11
17)
at Program. (\node_modules\blessed\lib\widgets\screen.js
93:12)

Information

Operating System	Windows 10
Node version	6.9
NPM Version	3.10
Environment	Browser

npm run build hangs on 95% emitting

I'm not sure if this an issue here or somewhere on my side but I'm just out of ideas. Doesn't work on current version from master nor the version from RC. Any ideas?

image loading breaks on relative path

tree shaking