search

wallabyjs / public

Repository for Wallaby.js questions and issues
http://wallabyjs.com
759 stars 45 forks source link

TS2307: Cannot find module #1781

Closed randspy closed 6 years ago

randspy commented 6 years ago

Issue description or question

Hello, I am trying to integrate wallabyjs with angular-cli app. It can't find any modules. Both node_modules and the app. I tried the sample app, it works. Thank you for any help.

BR

Wallaby.js configuration file

var wallabyWebpack = require('wallaby-webpack');
var path = require('path');
const {
  AngularCompilerPlugin
} = require('@ngtools/webpack');

var compilerOptions = Object.assign(
  require('./tsconfig.json').compilerOptions,
  require('./src/tsconfig.spec.json').compilerOptions);

compilerOptions.module = 'CommonJs';

module.exports = function (wallaby) {

var webpackPostprocessor = wallabyWebpack({
  entryPatterns: [
    'src/wallabyTest.js',
    'src/**/*spec.js'
  ],

module: {
  rules: [{
      test: /\.css$/,
      loader: ['raw-loader']
    },
    {
      test: /\.html$/,
      loader: 'raw-loader'
    },
    {
      test: /\.ts$/,
      loader: '@ngtools/webpack',
      include: /node_modules/,
      query: {
        tsConfigPath: 'tsconfig.json'
      }
    },
    {
      test: /\.js$/,
      loader: 'angular2-template-loader',
      exclude: /node_modules/
    },
    {
      test: /\.styl$/,
      loaders: ['raw-loader', 'stylus-loader']
    },
    {
      test: /\.less$/,
      loaders: ['raw-loader', {
        loader: 'less-loader',
        options: {
          paths: [__dirname]
        }
      }]
    },
    {
      test: /\.scss$|\.sass$/,
      loaders: ['raw-loader', 'sass-loader']
    },
    {
      test: /\.(jpg|png|svg)$/,
      loader: 'url-loader?limit=128000'
    }
  ]
},

resolve: {
  symlinks: false,
  extensions: ['.js', '.ts'],
  modules: [
    path.join(wallaby.projectCacheDir, 'src/app'),
    path.join(wallaby.projectCacheDir, 'src'),
    'node_modules'
  ]
},

plugins: [
  new AngularCompilerPlugin({
    tsConfigPath: './tsconfig.json',
    skipCodeGeneration: true
  })
],
node: {
  fs: 'empty',
  net: 'empty',
  tls: 'empty',
  dns: 'empty'
}
});

return {
  files: [{
      pattern: 'src/**/*.+(ts|css|less|scss|sass|styl|html|json|svg)',
      load: false
    },
    {
      pattern: 'src/**/*.d.ts',
      ignore: true
    },
    {
      pattern: 'src/**/*spec.ts',
      ignore: true
    }
  ],

  tests: [{
      pattern: 'src/**/*spec.ts',
      load: false
    },
    {
      pattern: 'src/**/*e2e-spec.ts',
      ignore: true
    }
  ],

  testFramework: 'jasmine',

 compilers: {
    '**/*.ts': wallaby.compilers.typeScript(compilerOptions)
  },

  middleware: function (app, express) {
    var path = require('path');
    app.use('/favicon.ico', express.static(path.join(__dirname, 'src/favicon.ico')));
    app.use('/assets', express.static(path.join(__dirname, 'src/assets')));
  },

  env: {
    kind: 'chrome'
  },
  postprocessor: webpackPostprocessor,

  setup: function () {
    window.__moduleBundler.loadTests();
  },

  debug: true
};
};
tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

tsconfig.spec.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "baseUrl": "./",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts",
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts",
    "main.ts",
    "polyfills.ts"
  ]
}
package.json
 "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@fortawesome/fontawesome-free": "^5.1.1",
    "@ng-bootstrap/ng-bootstrap": "2.2.0",
    "@ng-select/ng-select": "^2.3.2",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^6.0.1",
    "@ngrx/entity": "^6.0.1",
    "@ngrx/router-store": "^6.0.1",
    "@ngrx/store": "^6.0.1",
    "@ngrx/store-devtools": "^6.0.1",
    "@ngx-translate/core": "10.0.2",
    "@ngx-translate/http-loader": "3.0.1",
    "amaBootstrap": "^1.3.0",
    "bootstrap": "4.1.2",
    "core-js": "^2.5.7",
    "lodash": "^4.17.10",
    "moment": "^2.22.2",
    "ngrx-store-freeze": "^0.2.4",
    "ngrx-store-localstorage": "^5.0.1",
    "ngx-loading": "^1.0.14",
    "ngx-toastr": "^8.8.0",
    "npm-font-source-sans-pro": "^1.0.2",
    "rxjs": "^6.2.1",
    "rxjs-compat": "^6.2.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "^6.0.8",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@compodoc/compodoc": "^1.1.3",
    "@ngtools/webpack": "^6.1.2",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/lodash": "^4.14.111",
    "@types/node": "~6.0.60",
    "angular-router-loader": "^0.8.5",
    "angular2-template-loader": "^0.6.2",
    "autoprefixer": "^8.6.5",
    "awesome-typescript-loader": "^5.2.0",
    "circular-dependency-plugin": "^5.0.2",
    "codelyzer": "^4.4.2",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^0.28.1",
    "cssnano": "^4.0.1",
    "exports-loader": "^0.7.0",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^3.2.0",
    "istanbul-instrumenter-loader": "^3.0.1",
    "jasmine-core": "~3.1.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^1.2.0",
    "karma-mocha-reporter": "^2.2.5",
    "karma-parallel": "^0.2.9",
    "karma-phantomjs-launcher": "^1.0.4",
    "less-loader": "^4.1.0",
    "phantomjs-prebuilt": "^2.1.7",
    "postcss-loader": "^2.1.6",
    "postcss-url": "^7.3.2",
    "protractor": "~5.3.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^7.0.3",
    "source-map-loader": "^0.2.0",
    "style-loader": "^0.21.0",
    "stylus-loader": "^3.0.1",
    "ts-node": "~7.0.0",
    "tslint": "~5.10.0",
    "typescript": "~2.7.2",
    "uglifyjs-webpack-plugin": "1.2.7",
    "url-loader": "^1.0.1",
    "wallaby-webpack": "^3.9.10",
    "webpack": "~4.15.1",
    "webpack-concat-plugin": "3.0.0",
    "webpack-dev-server": "~3.1.4"
  }

Code editor or IDE name and version

Visual Studio Code v1.? 1.25.1 WebStorm v? IntelliJ IDEA v? Atom v1.? Visual Studio v? Sublime Text v3 build ?

OS name and version

Windows 10.0.15063 Build 15063 OSX Linux

ArtemGovorov commented 6 years ago

Is your wallaby file located at your project's root (in the same folder with your node_modules folder)? If yes, then please create a sample repo demonstrating the issue, happy to take a look.

ArtemGovorov commented 6 years ago

Also try removing:

resolve: {
-  symlinks: false,
  extensions: ['.js', '.ts'],
  modules: [
    path.join(wallaby.projectCacheDir, 'src/app'),
    path.join(wallaby.projectCacheDir, 'src'),
    'node_modules'
  ]
},

-plugins: [
-  new AngularCompilerPlugin({
-    tsConfigPath: './tsconfig.json',
-    skipCodeGeneration: true
-  })
-],
randspy commented 6 years ago

Thank you for the answer. I will try to reproduce it, when I back from holidays. Yes, it is located in project's root. Without AngularCompilerPlugin part it works even worse.

error: The AngularCompilerPlugin was not found. The @ngtools/webpack loader requires the plugin. at Object.ngcLoader (path\to\node_modules\@ngtools\webpack\src\loader.js:27:15)

BR

randspy commented 6 years ago

Hi,

I was not able to reproduce it in a sample repo, so I am giving up for a moment. Still, it is a very good project, and you should continue working on it.

BR