为 ASP.NET Core 2.0 和 webpack (Angular 4.2.5) 安装 ngx-bootstrap

Question

我尝试在一个带有 aspnet-prerendering 和 webpack 的 ASP.NET Core 2.0 项目中使用 ngx-bootstrap。在文档的getting started page 中没有关于此配置的信息。

谁能指导我获得指南或帮助我如何将此包集成到以下配置中？

我尝试添加最新版本，但它开始抱怨不兼容的软件包版本。当我根据错误消息更改 package.json 时，我现有的代码就坏了。

我想要实现的是保持当前配置（角度等）并使用引导程序包。

我的 project.json 看起来像这样：

    "devDependencies": {
    "@angular/animations": "4.2.5",
    "@angular/common": "4.2.5",
    "@angular/compiler": "4.2.5",
    "@angular/compiler-cli": "4.2.5",
    "@angular/core": "4.2.5",
    "@angular/forms": "4.2.5",
    "@angular/http": "4.2.5",
    "@angular/platform-browser": "4.2.5",
    "@angular/platform-browser-dynamic": "4.2.5",
    "@angular/platform-server": "4.2.5",
    "@angular/router": "4.2.5",
    "@ngtools/webpack": "1.5.0",
    "@types/chai": "4.0.1",
    "@types/jasmine": "2.5.53",
    "@types/webpack-env": "1.13.0",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "3.3.7",
    "chai": "4.0.2",
    "css": "2.2.1",
    "css-loader": "0.28.4",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jasmine-core": "2.6.4",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "karma": "1.7.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-webpack": "2.0.3",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.2",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "typescript": "2.4.1",
    "url-loader": "0.5.9",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.2",
    "webpack-merge": "4.1.0",
    "zone.js": "0.8.12"
  },
  "dependencies": {
    "ngx-cookie": "^2.0.1"
  }

谢谢

Answer 1

最后我设法解决了。对于任何有兴趣的人，我已经发布了sample repository on GitHub。

@valorkin，如果你愿意，你可以在你漂亮的项目中免费获取这个示例作为 ASP.NET 核心指南。 :)

---

简而言之，重点是：

ngx-bootstrap 安装步骤：

这只是关于客户端应用程序的全部内容，与 ASP.Net Core 项目几乎没有任何关系。与库存 angular-cli 生成的项目相比，唯一的区别是它的文件夹结构和文件命名略有不同。

例如package.json 文件位于 ASP.NET 项目的根文件夹中，而不是 Angular 应用程序的根目录中，或者 Visual Studio 方法下没有 src 文件夹ClientApp 结构。 app.module 文件也被分成块来管理 app.shared.module.ts 中的共享代码，app.module.browser 中的浏览器特定代码。 ts，而 app.module.server.ts 文件中的服务器特定代码。等等。

1. 启动 Visual Studio 2017 并从 ASP.Net Core Web Application 模板创建一个新项目。在模板选项中选择 Angular。

2. 将 ngx-bootstrap 添加到项目根文件夹中的 package.json。 （要了解有关 npm 包和 package.json 文件的更多信息，check the npm docs。） 如果尚未包含引导程序包（但它在此模板中），请也添加它，因为它是先决条件。 由于这个项目模板包含开箱即用的 webpack 集成，它会自动找到我们新添加的包，因此我们不需要修改 webpack 配置文件来包含它们。这很酷。

   "bootstrap": "3.3.7",
   "ngx-bootstrap": "2.0.0-rc.0",
   "css": "2.2.1",
   

3. 在 app.module.shared.ts (~\ClientApp\app\components\ app.module.shared.ts) 中导入您要使用的任何模块。

   // Load as many modules as you want to use. 
   // For demonstration purposes, I load AlertModule only.
   import {
           AlertModule, 
       //AccordionModule,
       //ButtonsModule,
       //CarouselModule,
       //CollapseModule,
       //BsDatepickerModule,
       //BsDropdownModule,
       //ModalModule,
       //PaginationModule,
       //ProgressbarModule,
       //SortableModule,
       //TabsModule,
       //TimepickerModule,
       //TooltipModule,
       //TypeaheadModule
   } from 'ngx-bootstrap';
   

4. 在同一个文件中，通过调用它们的 forRoot() 函数将上述导入的模块添加到 @NgModule 的导入 集合中：。

   imports: [
       CommonModule,
       HttpModule,
       FormsModule,
   
       // Bootstrap ----------------------------
           AlertModule.forRoot(),
       //AccordionModule.forRoot(),
       //ButtonsModule.forRoot(),
       //...
       //TooltipModule.forRoot()
       //---------------------------------------
   
       //...
   
       RouterModule.forRoot([
           { path: '', redirectTo: 'home', pathMatch: 'full' },
           { path: 'home', component: HomeComponent },
           { path: 'counter', component: CounterComponent },
           { path: 'fetch-data', component: FetchDataComponent },
           { path: '**', redirectTo: 'home' }
   ])
   

5. 开始在组件中使用它们。 例如。在 ~\ClientApp\app\components\home\ home.component.html 文件下的 home 组件模板中添加 标记。

注意您不需要在组件 ts 文件中导入 Bootstrap 模块！

    <alert type="success" dismissible="true"><br />
        <b>Congratulations</b><br />, ngx-bootstrap package was loaded successfully. This alert is shown by the package. Great!<br />
        Now click the <b>[x]</b> button on right side to close this alert.
    </alert>