angular - 在 .Net Core 2.0 Angular 2 SPA 模板中加载 snazzy-info-window 模块时出错

Question

我正在尝试将以下插件安装到我的.Net Core SPA；

Angular Google Maps Snazzy Window Link

我已执行以下步骤；

将以下内容添加到我的 package.json 中；

"agm-core": "1.0.0-beta.5",
"agm-snazzy-info-window": "1.0.0-beta.5",

然后我在 Visual Studio 中右键单击并更新了包。

然后我将该模块添加到我的 app.shared.module.ts 中；

import { AgmCoreModule } from 'agm-core';
import { AgmSnazzyInfoWindowModule } from 'agm-snazzy-info-window';

AgmCoreModule.forRoot({
    apiKey: 'my-api-key'
}),
AgmSnazzyInfoWindowModule

我还将以下内容添加到我的 webpack.config.vendor.js 中；

const nonTreeShakableModules = [
    ...
    'agm-snazzy-info-window'
];

我的组件中的 html 代码是；

        <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
            <agm-marker [latitude]="lat" [longitude]="lng">
                <agm-snazzy-info-window [maxWidth]="200" [closeWhenOthersOpen]="false">
                    <ng-template>
                        My first Snazzy Info Window!
                    </ng-template>
                </agm-snazzy-info-window>
            </agm-marker>
        </agm-map>

但是，当我运行时，出现以下错误；

ERROR in ./node_modules/agm-snazzy-info-window/directives/snazzy-info-window.js Module not found: Error: Can't resolve 'snazzy-info-window' in 'C:\Users\matt\Source\Repos\MyProject\node_modules\agm-snazzy-info-window\directives' @ ./node_modules/agm-snazzy-info-window/directives/snazzy-info-window.js 88:39-74 @ ./node_modules/agm-snazzy-info-window/index.js @ ./ClientApp/app/app.shared.module.ts @ ./ClientApp/app/app.browser.module.ts @ ./ClientApp/boot.browser.ts @ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.browser.ts

现在，如果我删除时髦的信息窗口并只显示 Google map ，它可以正常工作吗？请问我在这里做错了什么吗？

Answer 1

此错误很可能自 snazzy-info-window 以来发生缺少软件包，这表示 agm-snazzy-info-window 的依赖项，也需要安装，例如:

"@agm/core": "1.0.0-beta.2",
"@agm/snazzy-info-window": "1.0.0-beta.2",
"snazzy-info-window": "^1.1.0"

此外，还需要包含 snazzy-info-window npm 包附带的一些基本样式，例如:

const nonTreeShakableModules = [
    'snazzy-info-window',
    'snazzy-info-window/dist/snazzy-info-window.css'
];