samteb/angular-7-webpack-4-boilerplate

Ready to use Angular 7 project with webpack 4 configuration for development and production

angular-7-webpack-4-boilerplate's Issues

Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build:prod'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild:prod', 'build:prod', 'postbuild:prod' ]
5 info lifecycle [email protected]prebuild:prod: [email protected]
6 info lifecycle [email protected]build:prod: [email protected]
7 verbose lifecycle [email protected]build:prod: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]build:prod: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;E:\Work\person\git\angular7_webpack\node_modules.bin;C:\Program Files\Microsoft MPI\Bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Windows\System32\OpenSSH;C:\Program Files\dotnet;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn;D:\Program Files\TortoiseGit\bin;C:\Program Files (x86)\Microsoft SQL Server\150\DTS\Binn;C:\Program Files\Azure Data Studio\bin;d:\Program Files\Git\cmd;C:\Program Files (x86)\Microsoft SQL Server\150\Tools\Binn;C:\Program Files\Microsoft SQL Server\150\Tools\Binn;C:\Program Files\Microsoft SQL Server\150\DTS\Binn;C:\Users\Thinkpad\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Users\Thinkpad\AppData\Roaming\nvm\v12.14.1\node_modules;C:\Program Files\nodejs;C:\Users\Thinkpad.windows-build-tools\python27;C:\Program Files\MySQL\MySQL Shell 8.0\bin;C:\Users\Thinkpad\AppData\Local\Microsoft\WindowsApps;E:\02Inusing\openjdk-11.0.2_windows-x64_bin\jdk-11.0.2\bin;E:\02Inusing\apache-maven-3.6.3-bin\apache-maven-3.6.3\bin;D:\Program Files\JetBrains\IntelliJ IDEA 2020.2.3\bin;C:\Users\Thinkpad.dotnet\tools;C:\Users\Thinkpad.dotnet\tools;C:\Users\Thinkpad\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Thinkpad\AppData\Roaming\npm
9 verbose lifecycle [email protected]build:prod: CWD: E:\Work\person\git\angular7_webpack
10 silly lifecycle [email protected]build:prod: Args: [
10 silly lifecycle '/d /s /c',
10 silly lifecycle 'npm run build:clean && ngc && npm run webpack-prod && npm run build:clean'
10 silly lifecycle ]
11 silly lifecycle [email protected]build:prod: Returned: code: 134 signal: null
12 info lifecycle [email protected]build:prod: Failed to exec build:prod script
13 verbose stack Error: [email protected] build:prod: npm run build:clean && ngc && npm run webpack-prod && npm run build:clean
13 verbose stack Exit status 134
13 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:223:5)
13 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:223:5)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
14 verbose pkgid [email protected]
15 verbose cwd E:\Work\person\git\angular7_webpack
16 verbose Windows_NT 10.0.18363
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build:prod"
18 verbose node v12.14.1
19 verbose npm v6.13.4
20 error code ELIFECYCLE
21 error errno 134
22 error [email protected] build:prod: npm run build:clean && ngc && npm run webpack-prod && npm run build:clean
22 error Exit status 134
23 error Failed at the [email protected] build:prod script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 134, true ]

scss, img and font files in src/assets folder are not included in webpack build

@samteb If I use npm run build:dev , scss, img and font files in src/assets folder are not included in the webpack build dist folder. Only the css files under src folder are included.

I've below imports in src/assets/scss/board.scss file

 @import "~bootstrap/scss/bootstrap";
 @import 'board/variables';
 @import 'board/mixins';

These are not included. Hence, my app looks like a plain html without any scss applied.

If I use, npm run serve, I'm getting below error in chrome console

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-KpHv3zgivMSB4dPnfYfqMt2lBibsYvM36EdoBBAsfbM='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

If I use, npm run webpack-prod, I'm getting below error

ERROR in src/main.aot.ts(4,36): error TS2307: Cannot find module './app/app.module.ngfactory'.

Please find the module rules from webpack.config.common.js

module: {
        rules: [
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.css$/,
                use: [
                'to-string-loader',
                'css-loader'
                ]
            },
            {
                test: /\.(scss|sass)$/,
                use: [
                    'to-string-loader',
                    { loader: 'css-loader', options: { sourceMap: true } },
                    { loader: 'sass-loader', options: { sourceMap: true } }
                ],
                include: helpers.root('src')
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|otf|ico|mp4)(\?\S*)?$/,
                use: {
                    loader: 'file-loader',
                    options: {
                      outputPath: 'assets/img',
                      name: '[name].[ext]'
                    }
                }
            }
        ]
    },

Also, I've angular.json file generated by angular-cli. Even If I remove this file, I'm facing the same issue.

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
              "node_modules/ngx-toastr/toastr.css",
              "src/assets/scss/board.scss",
              "src/assets/demo/demo.css"
            ],
            "scripts": [
            ]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        }
}

Your help will be appreciated.

Where is angular.json file?

Why are you not using angular.json file?
How about if we have an extra-webpack.config.js before implementing this stuff of your tutorial?
I'm trying to do the steps on your tutorial but I think it is different if we use angular.json file, can you check it?

loader missing?

First of all thanks for your work!

I am trying to execute the build:prod script but I got this error.

ERROR in Module parse failed: Unexpected token (1:3)
You may need an appropriate loader to handle this file type.

h1 {
| color: darkblue;
| }
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 214 bytes {0} [built].

Thanks!

missing AppModuleNgFactory

The main.aot.ts has a dependency to './app/app.module.ngfactory' but there is no such a file in this directory

The application is not working in IE 11

The application is not working in Internet Explorer.