除了angular2代码之外的其他导入代码断开了webapp编译

在我的angular 2应用程序中，我导入了除角度或应用程序组件之外的其他导入依赖项的问题。（如angular2矩）除了angular2代码之外的其他导入代码断开了webapp编译

我已经<base href="/">

通过主应用程序的运行（compilation.js包含所有的应用程序模块）：

<script src="/app/compilation.js"></script> 
    <script> 
     System.config({ 
      packages: { 
       app: { 
        format: 'register', 
        defaultExtension: 'js' 
       } 
      } 
     }); 
     System.import('main') 
       .then(null, console.error.bind(console)); 
</script>

只要我注入比从其他角度任何node_modules它使编译失败。我从主要获得404。

import {Component} from "angular2/core"; 
import {ROUTER_PROVIDERS} from 'angular2/router'; 
import {HTTP_PROVIDERS} from "angular2/http"; 
import "rxjs/Rx"; 
import {HeaderComponent} from "./header/header.component"; 
import {HomeComponent} from "./home/home.component"; 
import {SidebarComponent} from "./side-bar/sidebar.component"; 
import {RouteConfig, ROUTER_DIRECTIVES} from "angular2/router"; 
import {enableProdMode} from "angular2/core"; 
//import {TimeAgoPipe} from 'angular2-moment'; <-- this breaks main (404)

控制台错误：

GET http://localhost:3001/main 404 (Not Found) 
scheduleTask @ angular2-polyfills.js:126

tsconfig是：

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outDir": "app/", 
    "outFile": "app/compilation.js", 
    "declaration": true 
    }, 
    "exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ] 
}

任何帮助，以节省我的头更多的头发将高度赞赏。

来源

2016-04-21 XGreen

我假设你的意思是“导入”而不是“注入”。注入是配置提供者，并将构造函数参数添加到服务和组件以通过Angulars DI传递。 –

好的。这是答案，但仍不清楚为什么事情要这么辛苦？

解决方案仅适用于自举和角矩，并不认为所有组件都是相同的。

定义每个依赖的路径在System.config
定义时刻被载入作为全球

在index.html的

System.config({ 
    packageConfigPaths: ['node_modules/*/package.json'], 
    paths: { 
     'moment': '/node_modules/moment', 
     'angular2-moment/*': '/node_modules/angular2-moment/*', 
     "ng2-bootstrap/ng2-bootstrap": "node_modules/ng2-bootstrap/ng2-bootstrap" 
    }, 
    packages: { 
     app: { 
      format: 'register', 
      defaultExtension: 'js' 
     } 
    }, 
    meta: { 
     moment: { 
      format: 'global', 
      globals: { 
       moment: 'moment' 
      } 
     } 
    } 
});

在NG2：

// you can use ng2-bootstrap file just fine 
import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap'; 
// but for angular moment also mention extension. 
import {DurationPipe} from 'angular2-moment/DurationPipe.js';

N与所有这些：

@Component({ 
    "selector": "my-component", 
    directives: [PAGINATION_DIRECTIVES], 
    pipes: [DurationPipe], 
    "templateUrl": "app/templates/my-template.html", 
})

我觉得我拉我的头发比现在我问的问题。

有人请为我澄清一些。

来源

2016-04-21 12:04:48 XGreen

除了angular2代码之外的其他导入代码断开了webapp编译

回答

相关问题