2016-10-27 6 views
0

app.module.tsNG2-DatePicker 404 Not Found последние RC

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import {FormsModule} from '@angular/forms'; 
import {HttpModule} from '@angular/http'; 
import {routing} from './app.routing'; 
import { InMemoryWebApiModule } from 'angular2-in-memory-web-api'; 
import { InMemoryDataService } from './in-memory-data.service'; 
import { HeroDetailComponent } from './hero-detail.component'; 
import { AppComponent } from './app.component'; 
import {HeroService} from './hero.service'; 
import {HeroesComponent} from './heroes.component'; 
import {DashboardComponent} from './dashboard.component'; 

import './rxjs-extensions'; 
import {HeroSearchComponent} from './hero-search.component'; 

import { DatePicker } from 'ng2-datepicker/ng2-datepicker'; 



@NgModule({ 
    imports:[ DatePicker,BrowserModule,FormsModule,routing,HttpModule,InMemoryWebApiModule.forRoot(InMemoryDataService)], 
    declarations:[ AppComponent,HeroSearchComponent,HeroDetailComponent,HeroesComponent,DashboardComponent ], 
    providers: [HeroService], 
    bootstrap:[ AppComponent ] 
}) 
export class AppModule {} 

index.html

<html> 
    <head> 
    <base href="/"> 
    <title>Angular QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 

    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" media="all"> 

    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
    </head> 
    <!-- 3. Display the application --> 
    <body> 
    <my-app>Loading...</my-app> 
    </body> 
</html> 

hero.component.ts

import { Component,OnInit } from '@angular/core'; 
import { HeroService } from './hero.service'; 
import {Hero} from './hero'; 
import {Router} from '@angular/router'; 
import { Observable } from 'rxjs/Observable'; 
@Component({ 
moduleId: module.id, 
    selector: 'my-heroes', 
    template: ` 
<div> 
<datepicker [(ngModel)]="date" [expanded]="true"></datepicker> 

Selected date is: {{ date }} 

</div> 


    `, 
}) 
export class HeroesComponent implements OnInit { 
    date; 



    constructor(private heroService:HeroService,private router:Router){ 

    alert(this.date); 

    } 

} 

Error Console for date picker 4o4 ng2-datepicker NOT FOUND

Я уже сделал npm install ng2-datepicker --sav e. Что-то не так? Пожалуйста, помогите мне. Я знаю, что это простое, но я не знаю, почему он не найден NG2-Datepicker

Systemjs.config

/** 
* System configuration for Angular samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     moment: 'node_modules/moment/moment.js', 
     "ng2-datepicker": '../node_modules/ng2-datepicker', 
     // our app is within the app folder 
     app: 'app', 
     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
     // other libraries 
     'rxjs':      'npm:rxjs', 
     'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 

     'ng2-datepicker': { main: './ng2-datepicker.js', defaultExtension: 'js' }, 
     app: { 
     main: './main.js', 
     defaultExtension: 'js', 

     }, 
     rxjs: { 
     defaultExtension: 'js' 
     }, 
     'angular2-in-memory-web-api': { 
     main: './index.js', 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this); 
+0

, пожалуйста, поделитесь вашей системойjs.config.js – Sanket

+0

Должен ли я добавить пакет для перевода. Как я могу найти Bundle? –

ответ

0

В вашем systemjs.config.js, добавьте ниже блок-

var map = { 
... 
"ng2-datepicker": '../node_modules/ng2-datepicker' 
}; 
// packages tells the System loader how to load when no filename and/or no extension 
var packages = { 
... 
'ng2-datepicker': { main: './ng2-datepicker.js', defaultExtension: 'js' }, 
... 
}; 
+0

он все еще не работает сэр. –

+0

карта: { // наше приложение находится в папке приложения "NG2-Datepicker": '../node_modules/ng2-datepicker', приложение: 'приложение', // угловые пучки @ угловой/ядро ':' npm: @ angular/core/bundles/core.umd.js ', –

+0

пакеты: { ' ng2-datepicker ': {defaultExtension:' js '}, app: { main:' ./main .js', defaultExtension: 'JS', }, –

1

Это то, что я должен был сделать, чтобы я должен был npm установить ng2-datepicker .. тогда мне пришлось установить момент npm, затем npm установить ng2-slimscroll, тогда мне пришлось зайти в мою systemjs.config.js и добавить их на мой путь и пакеты все работает, как и должно быть, это мой полный системныйконфигумент

/** 
* System configuration for Angular samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'app', 

     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
     '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 
     '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', 
     'ng2-datepicker': 'npm:ng2-datepicker', 
     'moment': 'npm:moment', 
     'ng2-slimscroll': 'npm:ng2-slimscroll', 

     // other libraries 
     'rxjs':      'npm:rxjs', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     'ng2-datepicker': { main: './ng2-datepicker.js', defaultExtension: 'js' }, 
     'ng2-slimscroll': { main: './ng2-slimscroll.js', defaultExtension: 'js' }, 
     'moment': { main: './moment.js', defaultExtension: 'js' }, 
     app: { 
     main: './main.js', 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this);