Unable to install Webpack for Angular

Hello,

I’m trying to install webpack based on the instructions from https://angular.io/docs/ts/latest/guide/webpack.html with limited success. Google search hasn’t provided the answer so I’m hoping someone here can catch the problem with my installation.

node v6.10.2
npm v 3.10.10

I have a test server setup:
Distributor ID: Ubuntu
Description: Ubuntu 16.04.2 LTS
Release: 16.04
Codename: xenial

using Visual studio coder on windows 10.

I have no problems installing and running angular without wepback.

any help you can provide would be greatly appreciated.

Error messages received.
sudo npm start

[at-loader] Checking finished with 16 errors                                                     
(vendor) 2.64 MB {2} [initial] [rendered]
chunk    {1} app.js, app.css (app) 3.57 kB {0} [initial] [rendered]
chunk    {2} polyfills.js (polyfills) 577 kB [entry] [rendered]

WARNING in ./~/@angular/core/@angular/core.es5.js
5870:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@angular/core/@angular/core.es5.js
5886:15-102 Critical dependency: the request of a dependency is an expression

ERROR in [at-loader] ./node_modules/@angular/common/src/platform_id.d.ts:8:42
    TS1039: Initializers are not allowed in ambient contexts.

ERROR in [at-loader] ./node_modules/@angular/common/src/platform_id.d.ts:9:41
    TS1039: Initializers are not allowed in ambient contexts.

ERROR in [at-loader] ./node_modules/@angular/common/src/platform_id.d.ts:10:45
    TS1039: Initializers are not allowed in ambient contexts.

ERROR in [at-loader] ./node_modules/@angular/common/src/platform_id.d.ts:11:44
    TS1039: Initializers are not allowed in ambient contexts.

ERROR in [at-loader] ./node_modules/@angular/compiler/src/util.d.ts:8:36
    TS1039: Initializers are not allowed in ambient contexts.

ERROR in [at-loader] ./node_modules/@angular/core/src/animation/animation_metadata_wrapped.d.ts:12:33
    TS1039: Initializers are not allowed in ambient contexts.

ERROR in [at-loader] ./node_modules/@angular/core/src/animation/dsl.d.ts:34:33
    TS1039: Initializers are not allowed in ambient contexts.

ERROR in [at-loader] ./node_modules/@angular/core/src/errors.d.ts:9:33
    TS1039: Initializers are not allowed in ambient contexts.

ERROR in [at-loader] ./node_modules/@angular/core/src/errors.d.ts:10:43
    TS1039: Initializers are not allowed in ambient contexts.

ERROR in [at-loader] ./node_modules/@angular/core/src/errors.d.ts:11:42
    TS1039: Initializers are not allowed in ambient contexts.

ERROR in [at-loader] ./node_modules/@angular/core/src/errors.d.ts:12:43
    TS1039: Initializers are not allowed in ambient contexts.

ERROR in [at-loader] ./node_modules/@angular/core/src/errors.d.ts:13:35
    TS1039: Initializers are not allowed in ambient contexts.

ERROR in [at-loader] ./node_modules/@angular/core/testing/src/before_each.d.ts:1:59
    TS1039: Initializers are not allowed in ambient contexts.

ERROR in [at-loader] ./node_modules/@angular/http/src/backends/browser_jsonp.d.ts:1:33
    TS1039: Initializers are not allowed in ambient contexts.

ERROR in [at-loader] ./node_modules/@angular/platform-browser/src/dom/dom_renderer.d.ts:14:41
    TS1039: Initializers are not allowed in ambient contexts.

ERROR in [at-loader] ./node_modules/@angular/router/src/shared.d.ts:15:37
    TS1039: Initializers are not allowed in ambient contexts.
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 325 bytes [entry] [rendered]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 1.95 kB [entry] [rendered]
1 Like

You shouldn’t need to use sudo when running npm commands.

Can you paste your package.json and webpack.config(s)?

(Just guessing) It looks like your version of TS might be more updated than the tutorial is built from. It looks like Webpack itself is running fine.

As far as googling, make sure you are googling the Errors themselves.

TS1039: Initializers are not allowed in ambient contexts.

Hi Mawburn,

Thanks for the reply back…
The reason i used sudo and i was running out of options is to eliminate possible permission issues. Having said that you might also be on the right track in terms of TS issue but with my experience I couldn’t continue or find a solution to fix the problem.

as per your request
package.json

{
  "name": "angular2-webpack",
  "version": "1.0.0",
  "description": "A webpack starter for Angular",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/node": "^6.0.45",
    "@types/jasmine": "2.5.36",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.4",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.1",
    "null-loader": "^0.1.1",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "~2.0.10",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.4.1",
    "webpack-merge": "^3.0.0"
  }
}

webpack.config.ts

module.exports = require('./config/webpack.dev.js');

webpack.dev.js

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

module.exports = webpackMerge(commonConfig, {
  devtool: 'cheap-module-eval-source-map',

  output: {
    path: helpers.root('dist'),
    publicPath: 'http://localhost:8080/',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js'
  },

  plugins: [
    new ExtractTextPlugin('[name].css')
  ],

  devServer: {
    historyApiFallback: true,
    stats: 'minimal'
  }
});

webpack.common.ts

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

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

  resolve: {
    extensions: ['.ts', '.js']
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        loaders: [
          {
            loader: 'awesome-typescript-loader',
            options: { configFileName: helpers.root('src', 'tsconfig.json') }
          } , 'angular2-template-loader'
        ]
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw-loader'
      }
    ]
  },

  plugins: [
    // Workaround for angular/angular#11580
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
   
      helpers.root('./src'), // location of your src
      {} // a map of your routes
    ),

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

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
};
1 Like

Ok, I installed the demo project of theirs and ran it. The good news is, I’m getting the same error as you. But I’m not sure why. I’ll update if I figure out anything.

Ok found the issue. I tried it and it works.

Here’s the issue:

Here’s the solution:

actually updating TypeScript to :

“typescript”: “~2.2.1”

Fix the problem still have the warning but no more errors.

It can be a viable solution. I need your knowledge

It looks like the Angular.io tech writer, Foxandxss, acknowledged the problem in a reply to what I quoted above and says he needs to update the documentation.

Hi Mawburn,

Thanks for the help I think that fixed you provided cleared the error messages…

another problem
i can’t seem to reach the page. before I was able access the page using: 192.168.0.16:3000
but know i know i need to enter: 192.168.0.16:8080. I tried the one with port 8080 but its coming in as page not found.
I have a small server setup to learn angular so in order to access the page i need to enter: 192.168.0.16:XXXX

the following line, what should they be:
Project is running at http://localhost:8080/
webpack output is served from http://192.168.0.16:8080/

> angular2-webpack@1.0.0 start /var/www/html/robinscloud/htdocs
> webpack-dev-server --inline --progress --port 8080

10% building modules 3/3 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from http://192.168.0.16:8080/
404s will fallback to /index.html                                               10% building modules 4/9 modules 5 active .../webpack-dev-server/client/overlay.js
[at-loader] Using typescript@2.2.2 from typescript and "tsconfig.json" from /var/www/html/robinscloud/htdocs/src/tsconfig.json.
           

192.x.x.x is your external IP. I just accessed mine from localhost:8080

The port is configured on npm run command.

1 Like

I think the official docs are not quite as up-to-data as they could be. Angular2 (and now 4) uses Webpack by default, rather than SystemJS.

The simplest way to get an Angular project up and running with Webpack etc fully configured is to use the Angular CLI tool. We (SitePoint) published an article on this that covers how to install and use it, if you’re interested: https://www.sitepoint.com/ultimate-angular-cli-reference/ (note that it’s based on an older version of the CLI tool, but we’re going to be updating it in the next couple weeks).

1 Like

Hi Fretburner,

Thanks for the reply back.

But for know I’m giving up on playing with webpack and going to go back to the manual system. Maybe down the road Ill try it again, I already spent 2 days trying to get it to work and it hasn’t worked so far.

Thank you,
r

I would not recommend that you make your own webpack configuration and use Angular CLI instead. However, if you’re curious about the webpack configuration then you can use this command ‘ng eject’ which will generate the webpack configuration. I’ve used NG for quite a while now since the RC days and I have yet needed to create my own custom build scripts.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.