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

[smasithick]

@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.

[vamidi]

I am trying this github project right now, but I think you have to take a look at #1 there you can resolve the ngFactory.

[samteb]

Hi, sorry for the delay I was super busy those last days. You can have a look at the repository again. I have just pushed some updates. Basically, this is what missed you:

 {
                test: /\.(scss|sass)$/,
                use: [
                    { loader: 'style-loader', options: { sourceMap: isDev } },
                    { loader: 'css-loader', options: { sourceMap: isDev } },
                    { loader: 'sass-loader', options: { sourceMap: isDev } }
                ],
                include: helpers.root('src', 'assets')
}