search

angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.72k stars 11.98k forks source link

NgTools/webpack module not found while building #7572

Closed pwnball closed 6 years ago

pwnball commented 7 years ago

Versions.

Not using ng-cli. npm version: 3.10.9 node version: 6.9.2 OS: Windows 10

Repro steps.

Making a repo for this would be hard, but heres my code: ./package.json

{
  "name": "***",
  "version": "0.0.1",
  "description": "***",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "***"
  },
  "scripts": {
    "start": "webpack-dev-server --progress --colors",
    "build": "webpack",
    "translate": "ng-xi18n --i18nFormat=xlf",
    "test": "karma start ./config/karma/core.js --browsers PhantomJS"
  },
  "author": "***",
  "license": "ISC",
  "dependencies": {
    "@angular/animations": "^4.1.2",
    "@angular/common": "^4.0.1",
    "@angular/compiler": "^4.0.1",
    "@angular/compiler-cli": "^4.3.5",
    "@angular/core": "^4.0.1",
    "@angular/forms": "^4.0.2",
    "@angular/platform-browser": "^4.0.1",
    "@angular/platform-browser-dynamic": "^4.0.1",
    "@angular/platform-server": "^4.3.5",
    "@angular/router": "^4.0.2",
    "babel-polyfill": "^6.23.0",
    "es6-shim": "^0.35.3",
    "moment": "^2.18.1",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.0.0-beta.6",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@ngtools/webpack": "^1.6.2",
    "@types/jasmine": "^2.5.47",
    "@types/node": "^7.0.12",
    "angular2-template-loader": "^0.6.2",
    "autoprefixer": "^6.7.7",
    "awesome-typescript-loader": "^3.1.2",
    "file-loader": "^0.11.1",
    "font-awesome": "^4.7.0",
    "html-webpack-plugin": "^2.28.0",
    "jasmine-core": "^2.5.2",
    "karma": "^1.6.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.3",
    "node-sass": "^4.5.2",
    "phantomjs-prebuilt": "^2.1.14",
    "postcss-loader": "^1.3.3",
    "promise-loader": "^1.0.0",
    "raw-loader": "^0.5.1",
    "reflect-metadata": "^0.1.10",
    "resolve-url-loader": "^2.0.2",
    "sass-loader": "^6.0.3",
    "ts-helpers": "^1.1.2",
    "tslint": "^5.0.0",
    "tslint-loader": "^3.5.2",
    "typescript": "^2.2.2",
    "typings": "^2.1.0",
    "url-loader": "^0.5.8",
    "webpack": "^2.7.0",
    "webpack-dev-server": "2.4.1",
    "webpack-merge": "^4.1.0"
  }
}

./webpack.config.js

// require webpack tools
const merge = require('webpack-merge');

// require general tools
const path = require('path');

// project webpack configuration
const Paths       = require('./config/webpack/paths');
const Core        = require('./config/webpack/core');
const DevServer   = require('./config/webpack/devServer');

const Development = require('./config/webpack/environments/development');
const Production  = require('./config/webpack/environments/production');
const Test        = require('./config/webpack/environments/test');

// variable definitions
const settings = {
    script    : process.env.npm_lifecycle_event,
    debug     : !!process.env.npm_config_debug,
    paths     : Paths.configuration(__dirname),
    devServer : {
        host : '0.0.0.0',
        port : 3000
    }
};

var configuration = merge({}, Core.configuration(settings), Core.rules(settings));

switch(settings.script) {
    case 'build' :
        configuration = merge(
            configuration,
            Production.configuration(settings),
            Production.rules(settings)
        );
        break;

    case 'start' :
        configuration = merge(
            configuration,
            DevServer.configuration(settings),
            Development.configuration(settings),
            Development.rules(settings)
        );
        break;

    case 'test' :
        configuration = merge(
            configuration,
            DevServer.configuration(settings),
            Test.configuration(settings),
            Test.rules(settings)
        );
        break;
}

if (settings.debug) {
    console.log('Building the configuration with these settings', JSON.stringify(settings, null, 2));
    console.log('Building with this configuration :', JSON.stringify(configuration, null, 2));
}

module.exports = configuration;

./config/webpack/paths.js

// require general tools
const path = require('path');

exports.configuration = function(root) {
    return {
        root          : root,
        nodeModules   : path.join(root, 'node_modules'),
        src           : path.join(root, 'source'),
        build         : path.join(root, 'build')
    }
};

_./config/webpack/core.js

const webpack   = require('webpack');
const AotPlugin = require('@ngtools/webpack').AotPlugin;

// require general tools
const path = require('path');

// require webpack plugins
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer      = require('autoprefixer')({ browsers: ['last 3 versions'] });

exports.configuration = function(settings) {
    return {
        resolve : {
            extensions : [
                '.ts',
                '.scss',
                '.html',
                '.js'
            ],
            modules: [
                settings.paths.nodeModules,
                settings.paths.src
            ]
        },
        entry: {
            application : settings.paths.src
        },
        output: {
            path     : settings.paths.build,
            filename : '[name].js'
        },
        plugins: [
            new AotPlugin({
                tsConfigPath : path.join(settings.paths.root, 'tsconfig.json'),
                entryModule  : path.join(settings.paths.src, 'modules', 'app#AppModule')
            }),
            new HtmlWebpackPlugin({
                template : path.join(settings.paths.src, 'public', 'index.html'),
                inject   : 'body',
                title    : 'Glass.io'
            }),
            new webpack.ContextReplacementPlugin(
                /angular(\\|\/)core(\\|\/)@angular/,
                settings.paths.src
            ),

            new webpack.LoaderOptionsPlugin({
                debug: settings.debug,
                options : {
                    sassLoader : {},
                    postcss : [ autoprefixer ],
                    tslint : {
                        emitErrors: true,
                        failOnHint: true
                    }
                }
            })
        ]
    }
};

exports.rules = function(settings) {
    return {
        module: {
            rules : [
                {
                    test : /\.ts$/,
                    include : settings.paths.src,
                    loaders : '@ngtools/webpack'
                },
                {
                    test: /\.html$/,
                    loader: 'raw-loader'
                },
                {
                    "test": /.xlf/,
                    "loader": "promise-loader?es6-promise!raw-loader"
                }
            ]
        }
    }
};

./config/webpack/environments/production.js

// require webpack
const webpack = require('webpack');

exports.configuration = function(settings) {
    return {
        devtool: 'eval-source-map'
    };
};

exports.rules = function(settings) {
    return {
        module : {
            rules : [
                {
                    test    : /\.scss$/,
                    exclude : /node_modules/,
                    loaders : [
                        'raw-loader',
                        'postcss-loader',
                        'resolve-url-loader',
                        'sass-loader'
                    ]
                },
                {
                    test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
                    exclude : /node_modules/,
                    loaders : [
                        'file-loader'
                    ]
                }
            ]
        }
    }
};

./tsconfig.ts

{
  "compilerOptions": {
    "target": "ES5",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "buildOnSave": false,
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },
  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit" : true
  }
}

The log given by the failure.

$ npm run build

> ***@0.0.1 build D:\development\private\glassify\code-base
> webpack

Hash: caee5b52dd11b133e6e0
Version: webpack 2.7.0
Time: 6287ms
         Asset       Size  Chunks                    Chunk Names
application.js     3.6 MB       0  [emitted]  [big]  application
    index.html  200 bytes          [emitted]
  [12] ./~/core-js/modules/_core.js 122 bytes {0} [built]
  [50] ./~/core-js/modules/core.get-iterator-method.js 297 bytes {0} [built]
  [53] (webpack)/buildin/global.js 509 bytes {0} [built]
 [103] ./~/@angular/core/@angular/core.es5.js 490 kB {0} [built]
 [133] ./~/core-js/modules/core.is-iterable.js 373 bytes {0} [built]
 [144] ./~/@angular/platform-browser/@angular/platform-browser.es5.js 141 kB {0} [built]
 [145] ./~/core-js/index.js 640 bytes {0} [built]
 [146] ./~/reflect-metadata/Reflect.js 48 kB {0} [built]
 [147] ./~/ts-helpers/index.js 2.69 kB {0} [built]
 [148] ./~/zone.js/dist/zone.js 119 kB {0} [built]
 [149] ./~/@angular/common/@angular/common.es5.js 132 kB {0} [built]
 [150] ./source/index.ts 333 bytes {0} [built]
 [168] ./~/core-js/modules/core.string.unescape-html.js 306 bytes {0} [built]
 [360] ./~/core-js/shim.js 8.18 kB {0} [built]
 [361] ./~/process/browser.js 5.42 kB {0} [built]
    + 368 hidden modules

ERROR in ./source/index.ts
Module not found: Error: Can't resolve './../aot/source/modules/app.ngfactory' in 'D:\development\private\glassify\code-base\source'
 @ ./source/index.ts 5:0-75
Child source\pages\splash\splash.html:
       [0] ./source/pages/splash/splash.html 75 bytes {0} [built]
Child source\pages\pricing\pricing.html:
       [0] ./source/pages/pricing/pricing.html 76 bytes {0} [built]
Child source\pages\features\features.html:
       [0] ./source/pages/features/features.html 110 bytes {0} [built]
Child source\modules\glassForms\components\input\input.html:
        + 1 hidden modules
Child source\pages\support\support.html:
       [0] ./source/pages/support/support.html 76 bytes {0} [built]
Child source\modules\glassForms\components\checkbox\checkbox.html:
        + 1 hidden modules
Child source\modules\glassForms\components\radioButton\radio-button.html:
        + 1 hidden modules
Child source\pages\company\company.html:
       [0] ./source/pages/company/company.html 76 bytes {0} [built]
Child source\modules\glassForms\components\slider\slider.html:
        + 1 hidden modules
Child source\modules\glassForms\components\toggle\toggle.html:
        + 1 hidden modules
Child source\modules\glassForms\components\textArea\textarea.html:
        + 1 hidden modules
Child source\modules\glassForms\components\form\form.html:
        + 1 hidden modules
Child source\modules\glassForms\components\date\date.html:
        + 1 hidden modules
Child source\modules\app\components\core\core.html:
        + 1 hidden modules
Child source\modules\glassForms\components\select\select.html:
        + 1 hidden modules
Child html-webpack-plugin for "index.html":
       [0] ./~/html-webpack-plugin/lib/loader.js!./source/public/index.html 170 bytes {0} [built]
Child source\modules\app\components\panel\panel.html:
        + 1 hidden modules
Child source\modules\app\components\header\header.html:
        + 1 hidden modules
Child source\pages\pricing\pricing.scss:
       [0] ./source/pages/pricing/pricing.scss 19 bytes {0} [built]
Child source\pages\support\support.scss:
       [0] ./source/pages/support/support.scss 19 bytes {0} [built]
Child source\pages\features\features.scss:
       [0] ./source/pages/features/features.scss 122 bytes {0} [built]
Child source\pages\splash\splash.scss:
       [0] ./source/pages/splash/splash.scss 122 bytes {0} [built]
Child source\pages\company\company.scss:
       [0] ./source/pages/company/company.scss 122 bytes {0} [built]
Child source\modules\glassForms\components\input\input.scss:
        + 1 hidden modules
Child source\modules\glassForms\components\checkbox\checkbox.scss:
        + 1 hidden modules
Child source\modules\glassForms\components\slider\slider.scss:
        + 1 hidden modules
Child source\modules\glassForms\components\radioButton\radio-button.scss:
        + 1 hidden modules
Child source\modules\glassForms\components\textArea\textarea.scss:
        + 1 hidden modules
Child source\modules\glassForms\components\toggle\toggle.scss:
        + 1 hidden modules
Child source\modules\glassForms\components\form\form.scss:
        + 1 hidden modules
Child source\modules\glassForms\components\date\date.scss:
        + 1 hidden modules
Child source\modules\app\components\panel\panel.scss:
        + 1 hidden modules
Child source\modules\app\components\header\header.scss:
        + 1 hidden modules
Child source\modules\glassForms\components\select\select.scss:
        + 1 hidden modules
Child source\global-styling.scss:
       [0] ./source/global-styling.scss 829 bytes {0} [built]

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "D:\\Tools\\nodejs\\node.exe" "D:\\Tools\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.9.2
npm ERR! npm  v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! ***@0.0.1 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the ***@0.0.1 build script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the *** package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ***
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ***
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\development\private\glassify\code-base\npm-debug.log

Desired functionality.

I would like to build my environment using the @ngTools/webpack aotPlugin.

filipesilva commented 7 years ago

The error that's breaking your compilation seems to be this:

ERROR in ./source/index.ts
Module not found: Error: Can't resolve './../aot/source/modules/app.ngfactory' in 'D:\development\private\glassify\code-base\source'
 @ ./source/index.ts 5:0-75

I'm sorry but without a simple reproduction there isn't much help we can give. This might be an error in your codebase that prevents compilation, or a problem with the set of options you're using. Making a simple repro that's decoupled from your projects code is a good way to debug the issue as well.

gmahase commented 7 years ago

I am having a similar issue, I cannot get the @ngtools/webpack AoTPlugin working when I have styleUrls in my components. If I use raw-loader & to-string-loader I get a runtime error, if I use css-loader & style-loader I get build issues saying my ngfactory cannot be resolved.

If I comment out all the styleUrls, the app works minus the styles of course.

alan-agius4 commented 6 years ago

I'm sorry, but we can't reproduce the problem following the instructions you provided. Remember that we have a large number of issues to resolve, and have only a limited amount of time to reproduce your issue. Short, explicit instructions make it much more likely we'll be able to reproduce the problem so we can fix it.

If the problem persists, please open a new issue following our submission guidelines.

A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

angular-automatic-lock-bot[bot] commented 5 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.