{"action":"created","issue":{"url":"https://api.github.com/repos/gdi2290/angular-starter/issues/1936","repository_url":"https://api.github.com/repos/gdi2290/angular-starter","labels_url":"https://api.github.com/repos/gdi2290/angular-starter/issues/1936/labels{/name}","comments_url":"https://api.github.com/repos/gdi2290/angular-starter/issues/1936/comments","events_url":"https://api.github.com/repos/gdi2290/angular-starter/issues/1936/events","html_url":"https://github.com/gdi2290/angular-starter/issues/1936","id":280437375,"number":1936,"title":"Angular 5 upgrade can't get lazy loading to work","user":{"login":"Bjeaurn","id":1345395,"avatar_url":"https://avatars1.githubusercontent.com/u/1345395?v=4","gravatar_id":"","url":"https://api.github.com/users/Bjeaurn","html_url":"https://github.com/Bjeaurn","followers_url":"https://api.github.com/users/Bjeaurn/followers","following_url":"https://api.github.com/users/Bjeaurn/following{/other_user}","gists_url":"https://api.github.com/users/Bjeaurn/gists{/gist_id}","starred_url":"https://api.github.com/users/Bjeaurn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Bjeaurn/subscriptions","organizations_url":"https://api.github.com/users/Bjeaurn/orgs","repos_url":"https://api.github.com/users/Bjeaurn/repos","events_url":"https://api.github.com/users/Bjeaurn/events{/privacy}","received_events_url":"https://api.github.com/users/Bjeaurn/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":17,"created_at":"2017-12-08T10:09:07Z","updated_at":"2017-12-28T14:23:57Z","closed_at":null,"author_association":"NONE","body":"**Note: for support questions, please use one of these channels:** [Chat: AngularClass.slack](http://angularclass.com/member-join/) or [Twitter: @AngularClass](https://twitter.com/AngularClass)\r\n\r\n* **I'm submitting a ...**\r\n[x] bug report\r\n[ ] feature request\r\n[ ] question about the decisions made in the repository\r\n\r\n* **What is the current behavior?**\r\nI've managed to upgrade most of the repository to reflect this one, and get a compiling built out of it. When I try to get lazyloading to work in the way it used to, I run into multiple issues that break the app.\r\n\r\n\r\n* **If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem**\r\n`package.json`\r\n\r\n```\r\ndependencies: [\r\n    \"@angular/animations\": \"^5.0.5\",\r\n    \"@angular/common\": \"^5.0.5\",\r\n    \"@angular/compiler\": \"^5.0.5\",\r\n    \"@angular/core\": \"^5.0.5\",\r\n    \"@angular/forms\": \"^5.0.5\",\r\n    \"@angular/http\": \"^5.0.5\",\r\n    \"@angular/platform-browser\": \"^5.0.5\",\r\n    \"@angular/platform-browser-dynamic\": \"^5.0.5\",\r\n    \"@angular/platform-server\": \"^5.0.5\",\r\n    \"@angular/router\": \"^5.0.5\",\r\n    \"@angularclass/hmr\": \"^2.1.3\",\r\n    \"@angularclass/hmr-loader\": \"~3.0.2\",\r\n    ............\r\n],\r\ndevDependencies: [\r\n   \"@angular-devkit/build-optimizer\": \"^0.0.32\",\r\n    \"@angular/compiler-cli\": \"^5.0.5\",\r\n    \"@ngtools/webpack\": \"^1.8.0\",\r\n    .......\r\n]\r\n```\r\n\r\n`webpack.common.config`\r\n\r\n```\r\nconst webpack = require('webpack');\r\nconst helpers = require('./helpers');\r\n\r\n/*\r\n * Webpack Plugins\r\n */\r\n// problem with copy-webpack-plugin\r\nvar ExtractTextPlugin = require('extract-text-webpack-plugin');\r\nconst AssetsPlugin = require('assets-webpack-plugin');\r\nconst NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');\r\nconst ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');\r\nconst CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');\r\nconst CopyWebpackPlugin = require('copy-webpack-plugin');\r\nconst CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;\r\nconst HtmlElementsPlugin = require('./html-elements-plugin');\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\r\nconst InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');\r\nconst LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');\r\nconst ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');\r\n// const ngcWebpack = require('ngc-webpack'); --> Replaced by @ngtools/webpack\r\nconst AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;\r\nconst MergeJsonWebpackPlugin = require('merge-jsons-webpack-plugin');\r\nconst WriteFilePlugin = require('write-file-webpack-plugin');\r\n/*\r\n * Webpack Constants\r\n */\r\nconst HMR = helpers.hasProcessFlag('hot');\r\nconst AOT = process.env.BUILD_AOT || helpers.hasNpmFlag('aot');\r\n\r\n/*\r\n * Webpack configuration\r\n *\r\n * See: http://webpack.github.io/docs/configuration.html#cli\r\n */\r\nmodule.exports = function (options) {\r\n\r\n  const METADATA = {\r\n    baseUrl: '/',\r\n    title: options.title,\r\n    isDevServer: helpers.isWebpackDevServer(),\r\n    HMR: HMR\r\n  };\r\n\r\n  console.log('webpack common - METADATA.title: ', METADATA.title);\r\n\r\n    const isProd = options.env === 'production';\r\n\r\n    return {\r\n\r\n        /**\r\n         * Cache generated modules and chunks to improve performance for multiple incremental builds.\r\n         * This is enabled by default in watch mode.\r\n         * You can pass false to disable it.\r\n         *\r\n         * See: http://webpack.github.io/docs/configuration.html#cache\r\n         */\r\n        //cache: false,\r\n\r\n        /**\r\n         * The entry point for the bundle\r\n         * Our Angular.js app\r\n         *\r\n         * See: http://webpack.github.io/docs/configuration.html#entry\r\n         */\r\n        entry: {\r\n\r\n            'polyfills': './src/polyfills.browser.ts',\r\n            'main':      AOT ? './src/main.browser.aot.ts' :\r\n                './src/main.browser.ts'\r\n\r\n        },\r\n\r\n        /**\r\n         * Options affecting the resolving of modules.\r\n         *\r\n         * See: http://webpack.github.io/docs/configuration.html#resolve\r\n         */\r\n        resolve: {\r\n\r\n            /**\r\n             * An array of extensions that should be used to resolve modules.\r\n             *\r\n             * See: http://webpack.github.io/docs/configuration.html#resolve-extensions\r\n             */\r\n            extensions: ['.ts', '.js', '.json'],\r\n\r\n            /**\r\n             * An array of directory names to be resolved to the current directory\r\n             */\r\n            modules: [helpers.root('src'), helpers.root('node_modules')],\r\n\r\n            alias: {\r\n                'jquery': __dirname + '/../node_modules/jquery/dist/jquery.js'\r\n            }\r\n\r\n        },\r\n\r\n        /**\r\n         * Options affecting the normal modules.\r\n         *\r\n         * See: http://webpack.github.io/docs/configuration.html#module\r\n         */\r\n        module: {\r\n\r\n            rules: [\r\n\r\n                 // ...ngcWebpackConfig.loaders,\r\n                {\r\n                    test: /(?:\\.ngfactory\\.js|\\.ngstyle\\.js|\\.ts)$/,\r\n                    loaders:\r\n                        ['@ngtools/webpack', 'angular-router-loader?genDir=compiled&aot=false']\r\n                },\r\n                /**\r\n                 * Json loader support for *.json files.\r\n                 *\r\n                 * See: https://github.com/webpack/json-loader\r\n                 */\r\n                {\r\n                    test: /\\.json$/,\r\n                    use: 'json-loader'\r\n                },\r\n                \r\n                /**\r\n                 * To string and css loader support for *.css files (from Angular components)\r\n                 * Returns file content as string\r\n                 *\r\n                 */\r\n                {\r\n                    test: /\\.css$/,\r\n                    use: ['to-string-loader', 'css-loader'],\r\n                    exclude: [helpers.root('src', 'styles')]\r\n                },\r\n\r\n                /**\r\n                 * To string and sass loader support for *.scss files (from Angular components)\r\n                 * Returns compiled css content as string\r\n                 *\r\n                 */\r\n                {\r\n                    test: /\\.scss$/,\r\n                    include: helpers.root('src', 'app'),\r\n                    use: ['raw-loader', 'sass-loader']\r\n                    // use: ['to-string-loader', 'css-loader', 'sass-loader'],\r\n                    // exclude: [helpers.root('src', 'styles')]\r\n                },\r\n\r\n                /**\r\n                 * Raw loader support for *.html\r\n                 * Returns file content as string\r\n                 *\r\n                 * See: https://github.com/webpack/raw-loader\r\n                 */\r\n                {\r\n                    test: /\\.html$/,\r\n                    use: 'raw-loader',\r\n                    exclude: [helpers.root('src/index.html')]\r\n                },\r\n\r\n                /**\r\n                 * File loader for supporting images, for example, in CSS files.\r\n                 */\r\n                {\r\n                    test: /\\.(jpg|png|gif)$/,\r\n                    use: 'file-loader'\r\n                },\r\n\r\n                /* See https://github.com/gowravshekar/font-awesome-webpack\r\n                 */\r\n                { test: /\\.woff(2)?(\\?v=[0-9]\\.[0-9]\\.[0-9])?$/, loader: \"url-loader?limit=10000&mimetype=application/font-woff\" },\r\n                { test: /\\.(ttf|eot|svg)(\\?v=[0-9]\\.[0-9]\\.[0-9])?$/, loader: \"file-loader\" }\r\n\r\n            ],\r\n\r\n        },\r\n\r\n        /**\r\n         * Add additional plugins to the compiler.\r\n         *\r\n         * See: http://webpack.github.io/docs/configuration.html#plugins\r\n         */\r\n        plugins: [\r\n\r\n            new webpack.ProvidePlugin({\r\n                jQuery: 'jquery',\r\n                $: 'jquery',\r\n                jquery: 'jquery'\r\n            }),\r\n\r\n            new AssetsPlugin({\r\n                path: helpers.root('dist'),\r\n                filename: 'webpack-assets.json',\r\n                prettyPrint: true\r\n            }),\r\n\r\n            /**\r\n             * Plugin: ForkCheckerPlugin\r\n             * Description: Do type checking in a separate process, so webpack don't need to wait.\r\n             *\r\n             * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse\r\n             */\r\n            new CheckerPlugin(),\r\n            /**\r\n             * Plugin: CommonsChunkPlugin\r\n             * Description: Shares common code between the pages.\r\n             * It identifies common modules and put them into a commons chunk.\r\n             *\r\n             * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin\r\n             * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app\r\n             */\r\n            new CommonsChunkPlugin({\r\n                name: 'polyfills',\r\n                chunks: ['polyfills']\r\n            }),\r\n            /**\r\n             * This enables tree shaking of the vendor modules\r\n             */\r\n            new CommonsChunkPlugin({\r\n                name: 'vendor',\r\n                chunks: ['main'],\r\n                minChunks: module => /node_modules/.test(module.resource)\r\n            }),\r\n            /**\r\n             * Specify the correct order the scripts will be injected in\r\n             */\r\n            new CommonsChunkPlugin({\r\n                name: ['polyfills', 'vendor'].reverse()\r\n            }),\r\n            new CommonsChunkPlugin({\r\n                name: ['manifest'],\r\n                minChunks: Infinity,\r\n            }),\r\n\r\n            /**\r\n             * Plugin: ContextReplacementPlugin\r\n             * Description: Provides context to Angular's use of System.import\r\n             *\r\n             * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin\r\n             * See: https://github.com/angular/angular/issues/11580\r\n             */\r\n            new ContextReplacementPlugin(\r\n                /**\r\n                 * The (\\\\|\\/) piece accounts for path separators in *nix and Windows\r\n                 */\r\n                /angular(\\\\|\\/)core(\\\\|\\/)@angular/,\r\n                helpers.root('src'), // location of your src\r\n                {\r\n                    /**\r\n                     * Your Angular Async Route paths relative to this root directory\r\n                     */\r\n                }\r\n            ),\r\n\r\n            /**\r\n             * Plugin: HtmlWebpackPlugin\r\n             * Description: Simplifies creation of HTML files to serve your webpack bundles.\r\n             * This is especially useful for webpack bundles that include a hash in the filename\r\n             * which changes every compilation.\r\n             *\r\n             * See: https://github.com/ampedandwired/html-webpack-plugin\r\n             */\r\n            new HtmlWebpackPlugin({\r\n                template: 'src/index.html',\r\n                title: METADATA.title,\r\n                chunksSortMode: 'dependency',\r\n                metadata: METADATA,\r\n                inject: 'head'\r\n            }),\r\n\r\n            /**\r\n             * Plugin: ScriptExtHtmlWebpackPlugin\r\n             * Description: Enhances html-webpack-plugin functionality\r\n             * with different deployment options for your scripts including:\r\n             *\r\n             * See: https://github.com/numical/script-ext-html-webpack-plugin\r\n             */\r\n            new ScriptExtHtmlWebpackPlugin({\r\n                defaultAttribute: 'defer'\r\n            }),\r\n\r\n            /**\r\n             * Plugin: HtmlElementsPlugin\r\n             * Description: Generate html tags based on javascript maps.\r\n             *\r\n             * If a publicPath is set in the webpack output configuration, it will be automatically added to\r\n             * href attributes, you can disable that by adding a \"=href\": false property.\r\n             * You can also enable it to other attribute by settings \"=attName\": true.\r\n             *\r\n             * The configuration supplied is map between a location (key) and an element definition object (value)\r\n             * The location (key) is then exported to the template under then htmlElements property in webpack configuration.\r\n             *\r\n             * Example:\r\n             *  Adding this plugin configuration\r\n             *  new HtmlElementsPlugin({\r\n       *    headTags: { ... }\r\n       *  })\r\n             *\r\n             *  Means we can use it in the template like this:\r\n             *  <%= webpackConfig.htmlElements.headTags %>\r\n             *\r\n             * Dependencies: HtmlWebpackPlugin\r\n             */\r\n            new HtmlElementsPlugin({\r\n                headTags: require('./head-config.common')\r\n            }),\r\n\r\n            /**\r\n             * Plugin LoaderOptionsPlugin (experimental)\r\n             *\r\n             * See: https://gist.github.com/sokra/27b24881210b56bbaff7\r\n             */\r\n            new LoaderOptionsPlugin({}),\r\n\r\n            // new ngcWebpack.NgcWebpackPlugin(ngcWebpackConfig.plugin),\r\n\r\n            new AngularCompilerPlugin({\r\n                tsConfigPath: METADATA.tsConfigPath,\r\n                // entryModule: entryModule,\r\n                mainPath: entry.main,\r\n                sourceMap: true,\r\n                skipCodeGeneration: true,\r\n\r\n            }),\r\n\r\n            /**\r\n             * Plugin: InlineManifestWebpackPlugin\r\n             * Inline Webpack's manifest.js in index.html\r\n             *\r\n             * https://github.com/szrenwei/inline-manifest-webpack-plugin\r\n             */\r\n            new InlineManifestWebpackPlugin(),\r\n\r\n\r\n                /**\r\n                 * Plugin: CopyWebpackPlugin\r\n                 * Description: Copy files and directories in webpack.\r\n                 *\r\n                 * Copies project static assets.\r\n                 *\r\n                 * See: https://www.npmjs.com/package/copy-webpack-plugin\r\n                 */\r\n                new CopyWebpackPlugin([\r\n                        { from: 'src/assets', to: '.' },\r\n                        { from: 'src/meta'}\r\n                    ],\r\n                    isProd ? { ignore: [ 'mock-data/**/*' ] } : undefined\r\n                )\r\n            ],\r\n\r\n        /**\r\n         * Include polyfills or mocks for various node stuff\r\n         * Description: Node configuration\r\n         *\r\n         * See: https://webpack.github.io/docs/configuration.html#node\r\n         */\r\n        node: {\r\n            global: true,\r\n            crypto: 'empty',\r\n            process: true,\r\n            module: false,\r\n            clearImmediate: false,\r\n            setImmediate: false\r\n        }\r\n\r\n    };\r\n}\r\n\r\n```\r\n\r\n`app.routes`, being loaded through `app.module` using `RootModule.forRoot(appRoutes)`\r\n\r\n```\r\nimport { Routes } from '@angular/router';\r\nimport { PATH_NO_CONTENT } from '../error/error.routes';\r\n\r\nexport const APP_ROUTES: Routes = [\r\n    { path: 'help', loadChildren: '../help/help.module#HelpModule'},\r\n    { path: 'error', loadChildren: '../error/error.module#ErrorModule'},\r\n    { path: 'demo', loadChildren: '../demo/demo.module#DemoModule' },\r\n    { path: '**', redirectTo: 'error/' + PATH_NO_CONTENT }\r\n];\r\n```\r\n\r\nThis one gives me the `Error: Cannot find module '../demo/demo.module'.`\r\n\r\nIf I switch the lazy loading `loadChildren:` to `loadChildren: () => HelpModule`, it doesn't compile.\r\n\r\n\r\n* **What is the expected behavior?**\r\nLazy loading to work, given either of the two solutions.\r\n\r\n\r\n* **Please tell us about your environment:**\r\n- Angular version: 5.0.5,\r\n- Browser: all.\r\n\r\n\r\n\r\n* **Other information** (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)\r\n\r\nI'll add as I go..."},"comment":{"url":"https://api.github.com/repos/gdi2290/angular-starter/issues/comments/354296054","html_url":"https://github.com/gdi2290/angular-starter/issues/1936#issuecomment-354296054","issue_url":"https://api.github.com/repos/gdi2290/angular-starter/issues/1936","id":354296054,"user":{"login":"WillooWisp","id":3296485,"avatar_url":"https://avatars1.githubusercontent.com/u/3296485?v=4","gravatar_id":"","url":"https://api.github.com/users/WillooWisp","html_url":"https://github.com/WillooWisp","followers_url":"https://api.github.com/users/WillooWisp/followers","following_url":"https://api.github.com/users/WillooWisp/following{/other_user}","gists_url":"https://api.github.com/users/WillooWisp/gists{/gist_id}","starred_url":"https://api.github.com/users/WillooWisp/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/WillooWisp/subscriptions","organizations_url":"https://api.github.com/users/WillooWisp/orgs","repos_url":"https://api.github.com/users/WillooWisp/repos","events_url":"https://api.github.com/users/WillooWisp/events{/privacy}","received_events_url":"https://api.github.com/users/WillooWisp/received_events","type":"User","site_admin":false},"created_at":"2017-12-28T14:23:57Z","updated_at":"2017-12-28T14:23:57Z","author_association":"NONE","body":"@Bjeaurn loadChildren with a function () => Module, does not work with AOT. And according to this, https://github.com/angular/angular-cli/issues/4192, importing the Module that way breaks lazy loading from its own chunk.\r\nFor some reason lazy loading with string path syntax works for smaller projects, but not for larger ones, or it might be loading modules that in turn have lazy loaded modules in their routes and so on.\r\n"}}
{"actor":{"display_login":"WillooWisp"}}