AOT build fail with Angular 4

[Alokeen]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior AOT build fails with:

   ERROR in ./node_modules/@swimlane/ngx-datatable/release/directives/resizeable.directive.js
    Module not found: Error: Can't resolve 'rxjs/operators' in 'D:\code\sajt\CxPublic\node_modules\@swimlane\ngx-datatable\release\directives'
     @ ./node_modules/@swimlane/ngx-datatable/release/directives/resizeable.directive.js 14:18-43
     @ ./ClientApp/aot/node_modules/@swimlane/ngx-datatable/release/components/header/header.component.ngfactory.ts
     @ ./ClientApp/aot/node_modules/@swimlane/ngx-datatable/release/components/datatable.component.ngfactory.ts
     @ ./ClientApp/aot/app/components/shared/table/datatable.component.ngfactory.ts
     @ ./ClientApp/aot/app/components/user-section/admin-section/manage-users/manage-users.component.ngfactory.ts
     @ ./ClientApp/aot/app/app.browser.module.ngfactory.ts
     @ ./ClientApp/boot-client.ts

    ERROR in ./node_modules/@swimlane/ngx-datatable/release/directives/long-press.directive.js
    Module not found: Error: Can't resolve 'rxjs/operators' in 'D:\code\sajt\CxPublic\node_modules\@swimlane\ngx-datatable\release\directives'
     @ ./node_modules/@swimlane/ngx-datatable/release/directives/long-press.directive.js 13:18-43
     @ ./ClientApp/aot/node_modules/@swimlane/ngx-datatable/release/components/header/header.component.ngfactory.ts
     @ ./ClientApp/aot/node_modules/@swimlane/ngx-datatable/release/components/datatable.component.ngfactory.ts
     @ ./ClientApp/aot/app/components/shared/table/datatable.component.ngfactory.ts
     @ ./ClientApp/aot/app/components/user-section/admin-section/manage-users/manage-users.component.ngfactory.ts
     @ ./ClientApp/aot/app/app.browser.module.ngfactory.ts
     @ ./ClientApp/boot-client.ts

    ERROR in ./node_modules/@swimlane/ngx-datatable/release/directives/draggable.directive.js
    Module not found: Error: Can't resolve 'rxjs/operators' in 'D:\code\sajt\CxPublic\node_modules\@swimlane\ngx-datatable\release\directives'
     @ ./node_modules/@swimlane/ngx-datatable/release/directives/draggable.directive.js 13:18-43
     @ ./ClientApp/aot/node_modules/@swimlane/ngx-datatable/release/components/header/header.component.ngfactory.ts
     @ ./ClientApp/aot/node_modules/@swimlane/ngx-datatable/release/components/datatable.component.ngfactory.ts
     @ ./ClientApp/aot/app/components/shared/table/datatable.component.ngfactory.ts
     @ ./ClientApp/aot/app/components/user-section/admin-section/manage-users/manage-users.component.ngfactory.ts
     @ ./ClientApp/aot/app/app.browser.module.ngfactory.ts
     @ ./ClientApp/boot-client.ts

    ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/@ngtools/webpack/src!./ClientApp/aot/node_modules/@swimlane/ngx-datatable/release/components/datatable.component.css.ngstyle.ts
    Module build failed: Syntax Error

    (7:1) Unknown word

      5 |  */
      6 | /* tslint:disable */
    > 7 | export var styles = ['.ngx-datatable{display:block;overflow:hidden;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;-webkit-transform:translateZ(0)}.ngx-datatable [hidden]{display:none!important}.ngx-datatable *,.ngx-datatable :after,.ngx-datatable :before{box-sizing:border-box}.ngx-datatable.scroll-vertical .datatable-body{overflow-y:auto}.ngx-datatable.scroll-vertical .datatable-body .datatable-row-wrapper{position:absolute}.ngx-datatable.scroll-horz .datatable-body{overflow-x:auto;-webkit-overflow-scrolling:touch}.ngx-datatable.fixed-header .datatable-header .datatable-header-inner{white-space:nowrap}.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-datatable.fixed-row .datatable-scroll,.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row{white-space:nowrap}.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-cell,.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-group-cell{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ngx-datatable .datatable-body-row,.ngx-datatable .datatable-header-inner,.ngx-datatable .datatable-row-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-flow:row;-o-flex-flow:row;flex-flow:row}.ngx-datatable .datatable-body-cell,.ngx-datatable .datatable-header-cell{overflow-x:hidden;vertical-align:top;display:inline-block;line-height:1.625}.ngx-datatable
.datatable-body-cell:focus,.ngx-datatable .datatable-header-cell:focus{outline:none}.ngx-datatable .datatable-row-left,.ngx-datatable .datatable-row-right{z-index:9}.ngx-datatable .datatable-row-center,.ngx-datatable .datatable-row-group,.ngx-datatable .datatable-row-left,.ngx-datatable .datatable-row-right{position:relative}.ngx-datatable .datatable-header{display:block;overflow:hidden}.ngx-datatable .datatable-header .datatable-header-inner{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-align-items:stretch}.ngx-datatable .datatable-header .datatable-header-cell{position:relative;display:inline-block}.ngx-datatable .datatable-header .datatable-header-cell.sortable .datatable-header-cell-wrapper{cursor:pointer}.ngx-datatable .datatable-header .datatable-header-cell.longpress .datatable-header-cell-wrapper{cursor:move}.ngx-datatable .datatable-header .datatable-header-cell .sort-btn{line-height:100%;vertical-align:middle;display:inline-block;cursor:pointer}.ngx-datatable .datatable-header .datatable-header-cell .resize-handle,.ngx-datatable .datatable-header .datatable-header-cell .resize-handle--not-resizable{display:inline-block;position:absolute;right:0;top:0;bottom:0;width:5px;padding:0 4px;visibility:hidden}.ngx-datatable .datatable-header .datatable-header-cell .resize-handle{cursor:ew-resize}.ngx-datatable .datatable-header .datatable-header-cell.resizeable:hover .resize-handle,.ngx-datatable .datatable-header .datatable-header-cell:hover .resize-handle--not-resizable{visibility:visible}.ngx-datatable .datatable-header .datatable-header-cell .datatable-header-cell-template-wrap{height:inherit}.ngx-datatable .datatable-body{position:relative;z-index:10;display:block}.ngx-datatable .datatable-body .datatable-scroll{display:inline-block}.ngx-datatable .datatable-body .datatable-row-detail{overflow-y:hidden}.ngx-datatable .datatable-body .datatable-row-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ngx-datatable .datatable-body .datatable-body-row{outline:none}.ngx-datatable .datatable-body .datatable-body-row>div{display:-webkit-box;display:-ms-flexbox;display:flex}.ngx-datatable .datatable-footer{display:block;width:100%}.ngx-datatable .datatable-footer .datatable-footer-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.ngx-datatable .datatable-footer .selected-count .page-count{-webkit-box-flex:1;-ms-flex:1 1 40%;flex:1 1 40%}.ngx-datatable .datatable-footer .selected-count .datatable-pager{-webkit-box-flex:1;-ms-flex:1 1 60%;flex:1 1 60%}.ngx-datatable .datatable-footer .page-count{-webkit-box-flex:1;-ms-flex:1 1 20%;flex:1 1 20%}.ngx-datatable .datatable-footer .datatable-pager{-webkit-box-flex:1;-ms-flex:1 1 80%;flex:1 1 80%;text-align:right}.ngx-datatable .datatable-footer .datatable-pager .pager,.ngx-datatable .datatable-footer .datatable-pager .pager li{padding:0;margin:0;display:inline-block;list-style:none}.ngx-datatable .datatable-footer .datatable-pager .pager li,.ngx-datatable .datatable-footer .datatable-pager .pager li a{outline:none}.ngx-datatable .datatable-footer .datatable-pager .pager li a{cursor:pointer;display:inline-block}.ngx-datatable .datatable-footer .datatable-pager .pager li.disabled a{cursor:not-allowed}'];
        | ^
      8 | //# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoiRDovY29kZS9zYWp0L0N4UHVibGljL25vZGVfbW9kdWxlcy9Ac3dpbWxhbmUvbmd4LWRhdGF0YWJsZS9yZWxlYXNlL2NvbXBvbmVudHMvZGF0YXRhYmxlLmNvbXBvbmVudC5jc3MubmdzdHlsZS50cyIsInZlcnNpb24iOjMsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIm5nOi8vL0Q6L2NvZGUvc2FqdC9DeFB1YmxpYy9ub2RlX21vZHVsZXMvQHN3aW1sYW5lL25neC1kYXRhdGFibGUvcmVsZWFzZS9jb21wb25lbnRzL2RhdGF0YWJsZS5jb21wb25lbnQuY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIiAiXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7OzsifQ==
      9 | //# sourceMappingURL=datatable.component.css.ngstyle.js.map

     @ ./ClientApp/aot/node_modules/@swimlane/ngx-datatable/release/components/datatable.component.css.ngstyle.ts 2:21-250
     @ ./ClientApp/aot/node_modules/@swimlane/ngx-datatable/release/components/datatable.component.ngfactory.ts
     @ ./ClientApp/aot/app/components/shared/table/datatable.component.ngfactory.ts
     @ ./ClientApp/aot/app/components/user-section/admin-section/manage-users/manage-users.component.ngfactory.ts
     @ ./ClientApp/aot/app/app.browser.module.ngfactory.ts
     @ ./ClientApp/boot-client.ts

Expected behavior AOT build passes

Reproduction of the problem Include datatable module as such: import { NgxDatatableModule } from '@swimlane/ngx-datatable'; Run webpack in prod mode, with AOT.

What is the motivation / use case for changing the behavior? Use datatables with AOT build

Please tell us about your environment: package.json excerpt: (omitted scripts and app name)

    "@angular/animations": "^4.4.6",
    "@angular/cdk": "2.0.0-beta.12",
    "@angular/common": "^4.4.6",
    "@angular/compiler": "^4.4.6",
    "@angular/core": "^4.4.6",
    "@angular/forms": "^4.4.6",
    "@angular/http": "^4.4.6",
    "@angular/material": "2.0.0-beta.12",
    "@angular/platform-browser": "^4.4.6",
    "@angular/platform-browser-dynamic": "^4.4.6",
    "@angular/platform-server": "^4.4.6",
    "@angular/router": "^4.4.6",
    "@swimlane/ngx-datatable": "^11.3.0",
    "@types/google.analytics": "0.0.33",
    "@types/googlemaps": "3.26.15",
    "@types/googlemaps.infobubble": "^3.0.0",
    "@types/node": "^6.0.90",
    "@types/swiper": "^3.4.4",
    "@types/three": "^0.84.28",
    "accept-language-parser": "^1.4.1",
    "airbnb-prop-types": "^2.8.1",
    "angular2-jwt": "^0.2.3",
    "angular2-toaster": "^4.0.2",
    "aspnet-prerendering": "2.0.6",
    "aspnet-webpack": "2.0.1",
    "bingmaps": "^2.0.3",
    "classnames": "^2.2.5",
    "consolidated-events": "^1.1.1",
    "core-js": "2.4.1",
    "css": "^2.2.3",
    "css-loader": "^0.28.4",
    "file-loader": "0.11.2",
    "hammerjs": "2.0.8",
    "html-loader": "0.4.5",
    "http-status-codes": "^1.3.0",
    "intl": "1.2.5",
    "is-touch-device": "^1.0.1",
    "isomorphic-fetch": "2.2.1",
    "moment": "^2.22.2",
    "ng2-cookies": "^1.0.12",
    "ng2-page-scroll": "4.0.0-beta.9",
    "ngx-pagination": "^3.1.1",
    "node-js-info-bubble": "0.0.1",
    "node-sass": "^4.7.2",
    "object.values": "^1.0.4",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "react": "^16.2.0",
    "react-addons-shallow-compare": "^15.6.2",
    "react-dom": "^16.2.0",
    "react-moment-proptypes": "^1.5.0",
    "react-portal": "3.1.0",
    "rxjs": "5.4.2",
    "sass-loader": "6.0.6",
    "style-loader": "0.18.2",
    "three": "0.86.0",
    "to-string-loader": "1.1.5",
    "typescript": "2.4.1",
    "url-loader": "0.5.9",
    "webpack": "3.1.0",
    "webpack-hot-middleware": "2.18.2",
    "webpack-merge": "4.1.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^4.4.6",
    "@ngtools/webpack": "1.5.0",
    "chai": "^4.1.2",
    "extract-text-webpack-plugin": "^3.0.2",
    "install": "^0.10.1",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^1.7.1",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-mocha": "^1.3.0",
    "karma-spec-reporter": "0.0.31",
    "karma-webpack": "^2.0.6",
    "mocha": "^4.0.1",
    "postcss-loader": "2.0.6",
    "protractor-jasmine2-screenshot-reporter": "^0.5.0",
    "sw-precache": "5.2.0",
    "tslint": "^5.8.0",
    "uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony-v2.8.22",
    "uglifyjs-webpack-plugin": "0.4.6"
  }

Webpack config:

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');

const AotPlugin = require('@ngtools/webpack').AotPlugin;

module.exports = (env) => {

    //  const extractCSS = new ExtractTextPlugin('styles.css');
    const isDevBuild = !(env && env.prod);
    const target = (env && env.node) ? "node" : "browser";
    console.log("Building " + target + ". Development: " + isDevBuild);
    // Configuration in common to both client-side and server-side bundles
    const sharedConfig = {
        stats: {
            modules: false
        },
        context: __dirname,
        resolve: {
            extensions: ['.js', '.ts']
        },
        output: {
            filename: '[name].js',
            publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.(png|woff|woff2|eot|ttf|svg|jpg|jpeg|pdf)$/, use: 'url-loader?limit=10000' },
                { test: /\.css/, use: ['to-string-loader', 'css-loader', 'postcss-loader'] }, //ovo prilagoditi temi ako moze
                { test: /\.scss$/i, use: ['to-string-loader', 'css-loader', 'postcss-loader', 'sass-loader'] }
            ]
        },
        plugins: [
            new webpack.DefinePlugin({
                'cx.isDev': JSON.stringify(isDevBuild),
                'cx.ver': JSON.stringify((env && env.ver) ? env.ver : "dev")
            }),
        ]
    };

    const tsConfigs = {
        'browser': './ClientApp/tsconfig.aot.json',
        'node': './ClientApp/tsconfig.node.json'
    }

    const entryModules = {
        'browser': './app/app.browser.module#AppClientModule',
        'node': './app/app.node.module#AppServerModule'
    }

    var aotPlugin = new AotPlugin({
        tsConfigPath: tsConfigs[target],
        entryModule: path.join(__dirname, "ClientApp", entryModules[target]),
        skipCodeGeneration: isDevBuild
    });

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        entry: {
            'main-client': './ClientApp/boot-client.ts'
        },
        output: {
            path: path.join(__dirname, clientBundleOutputDir)
        },
        devtool: isDevBuild ? 'inline-source-map' : false,
        module: {
            rules: [{
                test: /\.ts$/,
                include: /ClientApp/,
                use: ['@ngtools/webpack']
            }]
        },
        plugins: [
            new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.resolve(__dirname, 'notexist/')),
            aotPlugin
        ].concat(isDevBuild ? [
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map',
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            new webpack.optimize.UglifyJsPlugin()
        ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig, {
        resolve: {
            mainFields: ['main']
        },
        entry: {
            'main-server': './ClientApp/boot-server.ts'
        },
        module: {
            rules: [{
                test: /\.ts$/,
                include: /ClientApp/, // ???
                exclude: /node_modules/, 
                loader: '@ngtools/webpack'
            }]
        },
        plugins: [
            new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, 'notexist/')),
            aotPlugin
        ],
        output: {
            libraryTarget: 'commonjs',
            path: path.join(__dirname, './ClientApp/dist')
        },
        target: 'node'
    });

    var configArr = [];

    if (target === "browser") {
        configArr.push(clientBundleConfig);
    } else if (target === "node") {
        configArr.push(serverBundleConfig);
    }
    return configArr;
}

• Table version: Tried with several versions, from 10.0.4 to 11.3.0 (later versions are for newer angular version)

• Angular version: 4.4.6

• Browser: N/A - build fails

• Language: TS 2.4.1 targeting ES5

[Alokeen]

I managed to get rid of rxjs errors by upgrading to rxjs 5.5.12, but the datatable.component.css.ngstyle.ts error remains

[Alokeen]

Fixed the failing build by correcting the regex for CSS files: { test: /\.css$/, use: ['to-string-loader', 'css-loader', 'postcss-loader'] },

Added the $ after css.