Question

我有以下问题...

环境： IDE：VS2017 项目：带有Webpack配置的.Net core 2的Angular 6 开发系统：Win-Server 2012 R2 测试：带有IIS Express和Chrome的VS2017调试模式

版本和配置：

package.json：

脚本内配置：“构建”：“ webpack --config webpack.config.js --progress-profile --mode = development”，
“ @ angular / cdk”：“ ^ 6.3.3”，
“ @ angular / cli”：“ ^ 6.0.8”，
“ @ angular / core”：“ ^ 6.0.9”，
“ @ angular / forms”：“ ^ 6.0.9”，
“ @ angular / http”：“ ^ 6.0.9”，
“ @ angular / platform-browser”：“ ^ 6.0.9”，
“ @ angular / platform-browser-dynamic”：“ ^ 6.0.9”，
“ @ angular /路由器”：“ ^ 6.0.9”，
“ @ auth0 / angular-jwt”：“ ^ 2.0.0”，
“ @ ngtools / webpack”：“ ^ 6.0.8”，
“ @ types / alertify”：“ ^ 0.3.30”，
“ alertify-js”：“ ^ 0.3.12”，
“ angular2-text-mask”：“ ^ 9.0.0”，
“ aspnet-prerendering”：“ ^ 3.0.1”，
“引导程序”：“ ^ 4.1.1”，
“ core-js”：“ ^ 2.4.1”，
“ jquery”：“ ^ 3.3.1”，
“ jquery-validation”：“ ^ 1.17.0”，
“ jquery-validation-unobtrusive”：“ ^ 3.2.10”，
“时刻”：“ ^ 2.22.2”，
“ ng-pick-datetime”：“ ^ 6.0.10”，
“ ng2-charts”：“ ^ 1.6.0”，
“ ngx-bootstrap”：“ ^ 3.0.1”，
“ popper.js”：“ ^ 1.14.3”，
“ reflect-metadata”：“ ^ 0.1.8”，
“ rxjs”：“ ^ 6.2.1”，
“ systemjs”：“ 0.19.40”，
“ text-mask-addons”：“ ^ 3.7.2”，
“ webpack-cli”：“ ^ 3.0.8”，
“ webpack-merge”：“ ^ 4.1.3”，
“ zone.js”：“ ^ 0.8.26”
“ @ angular /动画”：“ ^ 6.0.9”，
“ @ angular / common”：“ ^ 6.0.9”，
“ @ angular / compiler”：“ ^ 6.0.9”，
“ @ angular / compiler-cli”：“ ^ 6.0.9”，
“ @ angular /平台服务器”：“ ^ 6.0.9”，
“ @ types / jasmine”：“ ^ 2.5.36”，
“ @ types / jquery”：“ ^ 3.3.4”，
“ @类型/节点”：“ ^ 10.5.2”，
“ angular2-router-loader”：“ ^ 0.3.5”，
“ angular2-template-loader”：“ ^ 0.6.2”，
“ awesome-typescript-loader”：“ ^ 5.2.0”，
“ del”：“最新”，
“ gulp”：“ ^ 3.9.1”，
“ html-loader”：“ ^ 0.5.5”，
“路径”：“最新”，
“打字稿”：“ ^ 2.7.2”，
“ webpack”：“ ^ 4.16.0”，
“ webpack-dev-server”：“ ^ 3.1.4”

webpack.config.js：

    const path = require('path');
    const webpack = require('webpack');
    const merge = require('webpack-merge');
    const AotPlugin = require('@ngtools/webpack').AotPlugin;
    const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

        module.exports = (env) => {
        // Configuration in common to both client-side and server-side bundles
        const isDevBuild = !(env && env.prod);
        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: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' },
                    { test: /\.html$/, use: 'html-loader?minimize=false' },
                    { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
                    { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
                ]
            },
            plugins: [new CheckerPlugin()/*, new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery"
            })*/]
        };

        // Configuration for client-side bundle suitable for running in browsers
        const clientBundleOutputDir = './wwwroot/dist';
        const clientBundleConfig = merge(sharedConfig, {
            entry: { 'main-client': './app/boot.browser.ts' },
            output: { path: path.join(__dirname, clientBundleOutputDir) },
            plugins: [
                new webpack.DllReferencePlugin({
                    context: __dirname,
                    manifest: require('./wwwroot/dist/vendor-manifest.json')
                })
            ].concat(isDevBuild ? [
                // Plugins that apply in development builds only
                new webpack.SourceMapDevToolPlugin({
                    filename: '[file].map', // Remove this line if you prefer inline source maps
                    moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
                })
            ] : [
                // Plugins that apply in production builds only
                new webpack.optimize.UglifyJsPlugin(),
                new AotPlugin({
                    tsConfigPath: './tsconfig.json',
                    entryModule: path.join(__dirname, './app/app.module#AppModule'),
                    exclude: ['./**/*.server.ts']
                })
            ])
        });

        // Configuration for server-side (prerendering) bundle suitable for running in Node
        const serverBundleConfig = merge(sharedConfig, {
            resolve: { mainFields: ['main'] },
            entry: { 'main-server': './app/boot.server.ts' },
            plugins: [
                new webpack.DllReferencePlugin({
                    context: __dirname,
                    manifest: require('./app/dist/vendor-manifest.json'),
                    sourceType: 'commonjs2',
                    name: './vendor'
                })
            ].concat(isDevBuild ? [] : [
                // Plugins that apply in production builds only
                new AotPlugin({
                    tsConfigPath: './tsconfig.json',
                    entryModule: path.join(__dirname, './app/app.module#AppModule'),
                    exclude: ['./**/*.browser.ts']
                })
            ]),
            output: {
                libraryTarget: 'commonjs',
                path: path.join(__dirname, './app/dist')
            },
            target: 'node',
            devtool: 'inline-source-map'
        });

        return [clientBundleConfig, serverBundleConfig];
        };

相关代码（摘要）：

我的服务方法：

    getTimeTracking(userId: string, year: number, month: number): Promise<TimeTracking> {
        const url = `${this.timeTrackingsUrl}/${userId}/${year}/${month}`;
        return this.clientHttp.get<TimeTracking>(url)
            .toPromise<TimeTracking>()
            .catch(this.handleError.bind(this));
    }

域模型类（此处：TimeTracking）：

export class TimeTracking implements Serializable<TimeTracking> {
    id: string = '';
    userId: string = '';
    month: Date = new Date(0);
    timeTrackingEntries: TimeTrackingEntry[] = [];
    status: TimeTrackingStatus = 0;

    [... more code ...]

    isReadOnly(): boolean {
        return (this.status == TimeTrackingStatus.Saved);
    }

    [... more code ...]
}

我的组件：

@Component({
    moduleId: module.id.toString(),
    templateUrl: 'time-tracking.component.html'})
export class TimeTrackingComponent implements OnInit {

    timeTracking: TimeTracking | undefined;

    [... more code ...]

    this.timeTrackingService.getTimeTracking(this.currentUser.userid, this.selectedMonthDate.getFullYear(), this.selectedMonthDate.getMonth() + 1)
        .then(timeTracking => {
            if (this.timeTrackingForm) {
                this.timeTrackingForm.reset();
            }
            this.timeTracking = timeTracking;
        })

    [... more code ...]
}

这是该组件的html：

    <button type="submit" class="btn btn-primary" [disabled]="!timeTrackingForm.form.valid || (timeTracking?.isReadOnly())" (click)="save()">Save</button>

我的问题：

一切都会编译，webpack的构建也没有问题。当我开始使用VS2017-IIS Express调试时，将启动Server并打开Chrome。我导航到相关页面，并且有了网络概述，我可以说API调用成功并且数据已传输。但是我在开发人员选项的Chrome控制台中收到此错误：

错误TypeError：_co.timeTracking.isReadOnly不是函数

如果我设置了一个断点，则确定该数据对象未映射到我的域模型对象中：

问题：

为什么我的数据没有映射到指定的域模型对象 “ get（）”？
我有什么问题吗？
如何实现使用域模型（数据在哪里对象具有功能）？

感谢您的帮助...

域模型不起作用-带有Webpack的Angular 6和core.net 2 REST

0 个答案: