Question

我的目录结构如下：

dir
   |--app.component.ts

  node_modules
  |--angular2-bootstrap-switch

我按照https://www.npmjs.com/package/angular2-bootstrap-switch添加angular2-boostrap开关，按照说明，我不得不这样做，但我不确定如何。

的index.html：

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>


<!-- 2. Configure SystemJS -->
<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }

    }
  });


     System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

Inside boot.ts

 import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

IN tsconfig.json

 "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]

现在我必须在app.component.ts中导入../node_modules/angular2_bootstrap_switch/components，例如：

import {SwitchComponent} from angular2_bootstrap_switch/components

我不确定如何。请帮忙。

Answer 1

使用它非常简单。

安装node_module
```
npm i angular2-bootstrap-switch
```

在您的系统中，Js将配置添加为

'angular2-bootstrap-switch':'npm:angular2-bootstrap-switch/lib/switch.component.js'

在您的应用模块中，将开关组件导入为

import {SwitchComponent} from 'angular2-bootstrap-switch'

将其添加到声明如下，
```
declarations: [ SwitchComponent ],
```

在HTML中使用

<switch [status]="value" [onText]="onText" [offText]="offText" 
        [onColor]="onColor" [offColor]="offColor" [size]="size">
</switch>

LIVE DEMO

导入节点模块时出现XHR错误404 - Angular-2

1 个答案: