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.

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.

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?