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

Question

I have directory structure as: 我的目录结构为：

dir
   |--app.component.ts

  node_modules
  |--angular2-bootstrap-switch

I follow https://www.npmjs.com/package/angular2-bootstrap-switch to add angular2-boostrap switch and as per instruction, I had to do but, I ain't sure how. 我按照https://www.npmjs.com/package/angular2-bootstrap-switch来添加angular2-boostrap开关，按照说明，我必须这样做，但是我不确定如何。

index.html: 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 内部boot.ts

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

bootstrap(AppComponent);

IN tsconfig.json 在tsconfig.json中

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

Now i have to import ../node_modules/angular2_bootstrap_switch/components inside app.component.ts,like: 现在我必须在app.component.ts中导入../node_modules/angular2_bootstrap_switch/components，例如：

import {SwitchComponent} from angular2_bootstrap_switch/components

I ain't sure how. 我不确定如何。 Please help. 请帮忙。

Answer 1

Using this is very simple. 使用这个非常简单。

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

In your system Js add the configuration as, 在您的系统Js中，将配置添加为，

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

In your App Module import the Switch Component as 在您的应用模块中，将Switch Component导入为
```
 import {SwitchComponent} from 'angular2-bootstrap-switch' 
```
Add it to declarations as below, 将其添加到如下声明中，
```
 declarations: [ SwitchComponent ], 
```

Use it in your HTML as 在您的HTML中将其用作

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

LIVE DEMO 现场演示

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-07-01 16:18:20

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-07-01 16:18:20

解决方案1
1 已采纳 2017-07-01 16:18:20