Error on Angular 9

[tanganellilore]

Hi, i see your repo on issue of ng-date-time-picker. I try to use it in my Angular 9 project but I recive an error when I click on input field to open popup calendar.

The error that I recive is : ERROR Error: No component factory found for OwlDateTimeContainerComponent. Did you add it to @NgModule.entryComponents

I reproduce the issue on this link: HERE

Can you fix it? Thanks

[AndersTornkvist]

I believe the regression was in commit 76a25fd45985b5a187538c8f785108e813583118. Probably only non-Ivy projects are affected. @tanganellilore Are you using Ivy in your project? You would probably see that you opted out by using "enableIvy": false in tsconfig.app.json.

[tanganellilore]

Hi @AndersTornkvist , thanks for your replay but I don't have the option as you mentioned into my tsconfig file.

I use Angular 9 with webpack and some loaders. here my tsconfig:

{
    "compilerOptions": {
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "baseUrl": ".",
        "target": "es2015",
        "module": "es2015",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": false,
        "noEmit": true,
        "noEmitHelpers": true,
        "importHelpers": true,
        "strictNullChecks": false,
        "lib": [
            "es2015",
            "dom"
        ],
        "typeRoots": [
            "node_modules/@types"
        ],
        "types": [
            "node",
        ]
    },
    "exclude": [
        "node_modules",
        "client/assets",
        "server/**/*",
        "client/**/*.spec.ts",
        "client/**/*.e2e.ts"
    ]
}

here my webpack.config:

const webpack = require('webpack');
const path = require('path');
const CompressionPlugin = require("compression-webpack-plugin");
const HappyPack = require('happypack');
module.exports = {
    entry: {
        'vendor': './client/app/vendor.ts',
        'app': './client/app/main.ts',
        'polyfills': './client/app/polyfills.ts',
    },
    performance: {
        hints: false
    },
    resolve: {
        extensions: ['.ts', '.js', '.json'],
        }
    },
    output: {
        filename: '[name].bundle.js',
        chunkFilename: '[name]-chunk.js',
        publicPath: '/assets/js/bundles/',
        path: path.join(__dirname, '/client/assets/js/bundles'),
    },
    module: {
        rules: [{
                test: /\.ts$/,
                use: [{
                        loader: 'ts-loader',
                        options: {
                            configFile: "tsconfig.json",
                            happyPackMode: true
                        }
                    },
                    {
                        loader: 'angular-router-loader'
                    },
                    {
                        loader: 'angular2-template-loader'
                    }
                ],
                exclude: ["bower_components", "node_modules"],
                exclude: path.resolve(__dirname, "node_modules")
            },
            {
                test: /\.(html)$/,
                use: 'raw-loader',
                exclude: path.resolve(__dirname, "node_modules")
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                        },
                    }
                ]
            }
        ]
    },
    node: {
        fs: "empty"
    },
    plugins: [
        new webpack.optimize.SplitChunksPlugin({
            name: "vendor",
            minChunks: Infinity
        }),
        new CompressionPlugin({
            filename: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.js$|\.css$|\.html$/,
            threshold: 0,
            minRatio: 0.8
        })
    ]
};

two files are in the same level. I tried to put the object below in tsconfig but in any case (option true/false) nothing change.

"angularCompilerOptions": {
        "enableIvy": true
    },

You see something wrong?

[AndersTornkvist]

@tanganellilore Could you try downgrading to version 9.2.0 npm i --save @danielmoncada/angular-datetime-picker@9.2.0 and see if that solves the problem? Here's an updated sandbox (downgraded and added BrowserAnimationsModule): https://codesandbox.io/s/stupefied-hofstadter-ww7xq

[tanganellilore]

Hi @AndersTornkvist , with version 9.2.0 works fine the standard implementation. but if I use a custom locale format not work like other library and I recive an error related to locale not imported. I use this code to fix it but I'm not sure that all is fine:

import { registerLocaleData } from "@angular/common";
import localeIt from "@angular/common/locales/it";
import localeFr from "@angular/common/locales/fr";

registerLocaleData(localeIt, "it");
registerLocaleData(localeFr, "fr");

and after use the

{provide: OWL_DATE_TIME_LOCALE, useValue: 'it'} for set the correct language of timepicker

example here into app.module

This is correct?

[danielmoncada]

Closing per https://github.com/danielmoncada/date-time-picker/pull/25.

Fix will be in new version.