Module parse failed: You may need an appropriate loader to handle this file typ

[agam16]

`Uncaught Error: Module parse failed: /app/node_modules/tslint-loader/index.js!/app/node_modules/ngx-quill/src/quill.module.ts Unexpected character '@' (5:0) You may need an appropriate loader to handle this file type.	import { QuillEditorComponent } from './quill-editor.component';
@NgModule({
declarations: [
QuillEditorComponent

at eval (eval at <anonymous> (app.js:1712), <anonymous>:1:7)
at Object.<anonymous> (app.js:1712)
at __webpack_require__ (polyfills.js:53)
at eval (eval at <anonymous> (app.js:1290), <anonymous>:2:76)
at Object.<anonymous> (app.js:1290)
at __webpack_require__ (polyfills.js:53)
at eval (eval at <anonymous> (app.js:1045), <anonymous>:35:19)
at Object.<anonymous> (app.js:1045)
at __webpack_require__ (polyfills.js:53)
at eval (eval at <anonymous> (app.js:976), <anonymous>:5:20)
at Object.<anonymous> (app.js:976)
at __webpack_require__ (polyfills.js:53)
at Object.<anonymous> (app.js:1728)
at __webpack_require__ (polyfills.js:53)
at webpackJsonpCallback (polyfills.js:24)
at app.js:1`

[KillerCodeMonkey]

please add some details like webpack conf, package.json. what are you trying.

Thanks

[agam16]

WEBPACK.config.js
// Helper: root() is defined at the bottom
var path = require('path');
var webpack = require('webpack');

// Webpack Plugins
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

/**
 * Env
 * Get npm lifecycle event to identify the environment
 */
var ENV = process.env.npm_lifecycle_event;
var isTestWatch = ENV === 'test-watch';
var isTest = ENV === 'test' || isTestWatch;
var isProd = ENV === 'build';

module.exports = function makeWebpackConfig() {
  /**
   * Config
   * Reference: http://webpack.github.io/docs/configuration.html
   * This is the object where all configuration gets set
   */
  var config = {};

  /**
   * Devtool
   * Reference: http://webpack.github.io/docs/configuration.html#devtool
   * Type of sourcemap to use per build type
   */
  if (isProd) {
    config.devtool = 'source-map';
  }
  else if (isTest) {
    config.devtool = 'inline-source-map';
  }
  else {
    config.devtool = 'eval-source-map';
  }

  if (!isTest) {
    /**
     * Entry
     * Reference: http://webpack.github.io/docs/configuration.html#entry
     */
    config.entry = isTest ? {} : {
      'polyfills': './src/polyfills.ts',
      'vendor': './src/vendor.ts',
      'app': './src/main.ts' // our angular app
    };
  }

  /**
   * Output
   * Reference: http://webpack.github.io/docs/configuration.html#output
   */
  config.output = isTest ? {} : {
    path: root('dist'),
    publicPath: isProd ? '/rapids/' : 'http://localhost:8080/',
    filename: isProd ? 'js/[name].[hash].js' : 'js/[name].js',
    chunkFilename: isProd ? '[id].[hash].chunk.js' : '[id].chunk.js'
  };

  /**
   * Resolve
   * Reference: http://webpack.github.io/docs/configuration.html#resolve
   */
  config.resolve = {
    // only discover files that have those extensions
    extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'],
  };

  var atlOptions = '';
  if (isTest && !isTestWatch) {
    // awesome-typescript-loader needs to output inlineSourceMap for code coverage to work with source maps.
    atlOptions = 'inlineSourceMap=true&sourceMap=false';
  }

  /**
   * Loaders
   * Reference: http://webpack.github.io/docs/configuration.html#module-loaders
   * List: http://webpack.github.io/docs/list-of-loaders.html
   * This handles most of the magic responsible for converting modules
   */
  config.module = {
    rules: [
      // Support for .ts files.
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader?' + atlOptions, 'angular2-template-loader', '@angularclass/hmr-loader'],
        exclude: [isTest ? /\.(e2e)\.ts$/ : /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
      },

      // copy those assets to output
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader?name=fonts/[name].[hash].[ext]?'
      },

      // Support for *.json files.
      {test: /\.json$/, loader: 'json-loader'},

      // Support for CSS as raw text
      // use 'null' loader in test mode (https://github.com/webpack/null-loader)
      // all css in src/style will be bundled in an external css file
      {
        test: /\.css$/,
        exclude: root('src', 'app'),
        loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader']})
      },
      // all css required in src/app files will be merged in js files
      {test: /\.css$/, include: root('src', 'app'), loader: 'raw-loader!postcss-loader'},

      // support for .scss files
      // use 'null' loader in test mode (https://github.com/webpack/null-loader)
      // all css in src/style will be bundled in an external css file
      {
        test: /\.(scss|sass)$/,
        exclude: root('src', 'app'),
        loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader', 'sass-loader']})
      },
      // all css required in src/app files will be merged in js files
      {test: /\.(scss|sass)$/, exclude: root('src', 'style'), loader: 'raw-loader!postcss-loader!sass-loader'},

      // support for .html as raw text
      // todo: change the loader to something that adds a hash to images
      {test: /\.html$/, loader: 'raw-loader',  exclude: root('src', 'public')}
    ]
  };

  if (isTest && !isTestWatch) {
    // instrument only testing sources with Istanbul, covers ts files
    config.module.rules.push({
      test: /\.ts$/,
      enforce: 'post',
      include: path.resolve('src'),
      loader: 'istanbul-instrumenter-loader',
      exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/]
    });
  }

  if (!isTest || !isTestWatch) {
    // tslint support
    config.module.rules.push({
      test: /\.ts$/,
      enforce: 'pre',
      loader: 'tslint-loader'
    });
  }

  /**
   * Plugins
   * Reference: http://webpack.github.io/docs/configuration.html#plugins
   * List: http://webpack.github.io/docs/list-of-plugins.html
   */
  config.plugins = [
    // Define env variables to help with builds
    // Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
    new webpack.DefinePlugin({
      // Environment helpers
      'process.env': {
        ENV: JSON.stringify(ENV)
      }
    }),

    // Workaround needed for angular 2 angular/angular#11580
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)@angular/,
      root('./src') // location of your src
    ),

    // Tslint configuration for webpack 2
    new webpack.LoaderOptionsPlugin({
      options: {
        /**
         * Apply the tslint loader as pre/postLoader
         * Reference: https://github.com/wbuchwalter/tslint-loader
         */
        tslint: {
          emitErrors: false,
          failOnHint: false
        },
        /**
         * Sass
         * Reference: https://github.com/jtangelder/sass-loader
         * Transforms .scss files to .css
         */
        sassLoader: {
          //includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")]
        },
        /**
         * PostCSS
         * Reference: https://github.com/postcss/autoprefixer-core
         * Add vendor prefixes to your css
         */
        postcss: [
          autoprefixer({
            browsers: ['last 2 version']
          })
        ]
      }
    })
  ];

  if (!isTest && !isTestWatch) {
    config.plugins.push(
      // Generate common chunks if necessary
      // Reference: https://webpack.github.io/docs/code-splitting.html
      // Reference: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
      new CommonsChunkPlugin({
        name: ['vendor', 'polyfills']
      }),

      // Inject script and link tags into html files
      // Reference: https://github.com/ampedandwired/html-webpack-plugin
      new HtmlWebpackPlugin({
        template: './src/public/index.html',
        chunksSortMode: 'dependency'
      }),

      // Extract css files
      // Reference: https://github.com/webpack/extract-text-webpack-plugin
      // Disabled when in test mode or not in build mode
      new ExtractTextPlugin({filename: 'css/[name].[hash].css', disable: !isProd})
    );
  }

  // Add build specific plugins
  if (isProd) {
    config.plugins.push(
      // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
      // Only emit files when there are no errors
      new webpack.NoEmitOnErrorsPlugin(),

      // // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
      // // Dedupe modules in the output
      // new webpack.optimize.DedupePlugin(),

      // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
      // Minify all javascript, switch loaders to minimizing mode
      new webpack.optimize.UglifyJsPlugin({sourceMap: true, mangle: { keep_fnames: true }}),

      // Copy assets from the public folder
      // Reference: https://github.com/kevlened/copy-webpack-plugin
      new CopyWebpackPlugin([{
        from: root('src/public')
      }])
    );
  }

  /**
   * Dev server configuration
   * Reference: http://webpack.github.io/docs/configuration.html#devserver
   * Reference: http://webpack.github.io/docs/webpack-dev-server.html
   */
  config.devServer = {
    contentBase: './src/public',
    historyApiFallback: true,
    quiet: true,
    stats: 'minimal' // none (or false), errors-only, minimal, normal (or true) and verbose
  };

  return config;
}();

// Helper functions
function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [__dirname].concat(args));
}

Package.json

{
  "name": "app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "clean": "rimraf node_modules doc dist && npm cache clean",
    "clean-install": "npm run clean && npm install",
    "clean-start": "npm run clean-install && npm start",
    "watch": "webpack --watch --progress --profile",
    "build": "rimraf dist && webpack --progress --profile --bail",
    "server": "webpack-dev-server --host 0.0.0.0 --inline --progress --port 8080",
    "webdriver-update": "webdriver-manager update",
    "webdriver-start": "webdriver-manager start",
    "lint": "tslint --force \"src/**/*.ts\"",
    "e2e": "protractor",
    "e2e-live": "protractor --elementExplorer",
    "pretest": "npm run lint",
    "test": "karma start",
    "posttest": "remap-istanbul -i coverage/json/coverage-final.json -o coverage/html -t html",
    "test-watch": "karma start --no-single-run --auto-watch",
    "ci": "npm run e2e && npm run test",
    "docs": "typedoc --options typedoc.json src/app/app.component.ts",
    "start": "npm run server",
    "start:hmr": "npm run server -- --hot",
    "postinstall": "npm run webdriver-update"
  },
  "dependencies": {
    "@angular/animations": "~4.2.6",
    "@angular/common": "~4.2.6",
    "@angular/compiler": "~4.2.6",
    "@angular/core": "~4.2.6",
    "@angular/forms": "~4.2.6",
    "@angular/http": "~4.2.6",
    "@angular/platform-browser": "~4.2.6",
    "@angular/platform-browser-dynamic": "~4.2.6",
    "@angular/router": "~4.2.6",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
    "angular-froala-wysiwyg": "^2.7.3",
    "angular2-ladda": "^1.2.2",
    "core-js": "^2.4.1",
    "ng2-nouislider": "^1.7.4",
    "ng2-truncate": "^1.3.11",
    "ngx-chips": "^1.5.11",
    "ngx-quill": "^1.3.3",
    "ngx-toastr": "^5.3.0",
    "nouislider": "^10.1.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.0.1",
    "tslib": "^1.7.1",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "@angularclass/hmr": "^1.0.1",
    "@angularclass/hmr-loader": "^3.0.2",
    "@types/jasmine": "^2.5.41",
    "@types/node": "^6.0.38",
    "@types/selenium-webdriver": "2.53.39",
    "angular2-template-loader": "^0.6.0",
    "autoprefixer": "^6.3.2",
    "awesome-typescript-loader": "^3.1.2",
    "codelyzer": "2.0.0",
    "copy-webpack-plugin": "^4.0.0",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "file-loader": "^0.10.0",
    "html-loader": "^0.4.0",
    "html-webpack-plugin": "^2.8.1",
    "istanbul-instrumenter-loader": "^0.2.0",
    "jasmine-core": "^2.3.4",
    "jasmine-spec-reporter": "^3.2.0",
    "json-loader": "^0.5.3",
    "karma": "1.4.1",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.3",
    "karma-remap-istanbul": "0.2.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "2.0.2",
    "node-sass": "^4.5.0",
    "null-loader": "0.1.1",
    "postcss-loader": "^1.1.0",
    "protractor": "^4.0.10",
    "raw-loader": "0.5.1",
    "remap-istanbul": "^0.6.4",
    "rimraf": "^2.5.1",
    "sass-loader": "^6.0.1",
    "shelljs": "^0.7.0",
    "style-loader": "^0.13.0",
    "ts-helpers": "^1.1.1",
    "tslint": "^4.3.1",
    "tslint-loader": "^3.3.0",
    "typedoc": "^0.5.1",
    "typescript": "^2.3.1",
    "url-loader": "^0.5.6",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.3.0",
    "@types/quill":"^0.0.31"
  }
}

[KillerCodeMonkey]

try updating to a newser version of ngx-quill 1.6.0 (for angular < 5)

And remove the tslint part or exclude node_modules from linting

[KillerCodeMonkey]

@agam16 any updates?

[KillerCodeMonkey]

closed to inactivity.

[agam16]

@KillerCodeMonkey Sorry for late reply. I had commented the code

  //
  // if (!isTest || !isTestWatch) {
  //   // tslint support
  //   config.module.rules.push({
  //     test: /\.ts$/,
  //     enforce: 'pre',
  //     loader: 'tslint-loader'
  //   });
  // }

But its still showing the same error

[agam16]

I solved it by

exclude: [isTest ? /\.(e2e)\.ts$/ : /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+|ngx-.+))/] in the awesome-typescript-loader

[KillerCodeMonkey]

Nice :) and thank you for sharing your solution. Happy holidays ;)

Am 24.12.2017 04:08 schrieb "agam16" notifications@github.com:

I solved it by

exclude: [isTest ? /.(e2e).ts$/ : /.(spec|e2e).ts$/, /node_modules\/(?!(ng2-.+|ngx-.+))/] in the awesome-typescript-loader

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/85#issuecomment-353762515, or mute the thread https://github.com/notifications/unsubscribe-auth/ACKOYMsSlQROKHICokv6IMT3yiGyy_-6ks5tDcAZgaJpZM4RDSBb .

[vivacenontroppo]

https://github.com/TypeStrong/ts-loader/issues/40#issuecomment-447661809

• it's a similar topic. Can some of you guys help me out? I tried all of the fixes here but none is working.

[KillerCodeMonkey]

Which ngx-quill Version do You use?

Do You use ngcli build?

Am So., 16. Dez. 2018, 19:00 hat vivacenontroppo notifications@github.com geschrieben:

TypeStrong/ts-loader#40 (comment) https://github.com/TypeStrong/ts-loader/issues/40#issuecomment-447661809

• it's a similar topic. Can some of you guys help me out? I tried all of the fixes here but none is working.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/85#issuecomment-447663136, or mute the thread https://github.com/notifications/unsubscribe-auth/ACKOYG1Ll44rqNM_ve9VFlskEHDhe5JSks5u5opWgaJpZM4RDSBb .

[vivacenontroppo]

@KillerCodeMonkey i don't use it. It's not an angular app. I know i have protractor in package.json, but that's just because i'm familiar with it and it works on all kind of projects. So i don't have ngcli nor ngx-quill. It's a simple app in Vanilla and tests are in typescript. I use jasmine + protractor for e2e and i wan't to lear karma + jasmine for unit tests.

[KillerCodeMonkey]

And why are you asking your Problem Here on a repo of ngx-quill???

Check your buildprocess. Seems like You import or require Files that can Not bei loaded by webpack. So You need this filetype to your webpack config with the expected loader for IT.

Am So., 16. Dez. 2018, 20:14 hat vivacenontroppo notifications@github.com geschrieben:

@KillerCodeMonkey https://github.com/KillerCodeMonkey i don't use it. It's not an angular app. I know i have protractor i package.json, but that's just because i'm familiar with it and it works on all kind of projects. So i don't have ngcli nor ngx-quill.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/85#issuecomment-447668119, or mute the thread https://github.com/notifications/unsubscribe-auth/ACKOYGTmHuNijMvDBZxq9e00uP4nYz6Lks5u5pt-gaJpZM4RDSBb .

[vivacenontroppo]

@KillerCodeMonkey oh, sorry. I didn't know I should not do that. I asked here because it's the most similar problem that I found. And I'm pretty new here, really sorry. But your comment actually helped me! I checked and I was pointing to .ts files in webpack and karma configs, which is stupid because I use typescript compiler and then running tests from the .js files. So I changed that and it works, thank you. And sorry again ^^

[KillerCodeMonkey]

Glad You solved it ;). In most cases You would know that the Error comes from webpack so i would search im the webpack issues or Something Like that. But Not asking in repos with different Tech Stack. ;)

Or asking in Stack overflow.

Am So., 16. Dez. 2018, 22:47 hat vivacenontroppo notifications@github.com geschrieben:

@KillerCodeMonkey https://github.com/KillerCodeMonkey oh, sorry. I didn't know I should not do that. I asked here because it's the most similar problem that I found. And I'm pretty new here, really sorry. But your comment actually helped me! I checked and I was pointing to .ts files in webpack and karma configs, which is stupid because I use typescript compiler and then running tests from the .js files. So I changed that and it works, thank you. And sorry again ^^

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/85#issuecomment-447679049, or mute the thread https://github.com/notifications/unsubscribe-auth/ACKOYOpcTw0JiQ09AsmhvGBTHq0YaM61ks5u5r9-gaJpZM4RDSBb .

[kavicastelo]

Any updates?