Невозможно загрузить свои собственные компоненты -angular2

Question

Мне не удалось загрузить компонент, который находился в «приложении/Shared/поиске/lookup.component.ts» от «приложения/ассоциированного/abc.component.ts»

Моя структура папок

Ошибка

TSconfig

{ 
    "compilerOptions": { 
    "outDir": "dist", 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true 
    }, 
    "exclude": [ 
    "bower_components", 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ] 
} 

Вот моя система Config

/** 
     * System configuration for Angular 2 samples 
     * Adjust as necessary for your application needs. 
     */ 
     (function (global) { 

     // map tells the System loader where to look for things 
     var map = { 
      'app': 'dist', 

      '@angular': 'node_modules/@angular', 
      'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
      'rxjs': 'node_modules/rxjs', 
      '@vaadin': 'node_modules/@vaadin', 
      'moment': 'node_modules/moment' 
     }; 

     // packages tells the System loader how to load when no filename and/or no extension 
     var packages = { 
      app: { 
      main: 'main.js', 
      defaultExtension: 'js' 
      }, 
      'rxjs': { defaultExtension: 'js' }, 
      'angular2-in-memory-web-api': { defaultExtension: 'js' }, 
      '@vaadin/angular2-polymer': { main: 'index.js', defaultExtension: 'js' }, 
      'moment': { main: 'moment', defaultExtension: 'js' }, 
     }; 

     var ngPackageNames = [ 
      'common', 
      'compiler', 
      'core', 
      'http', 
      'platform-browser', 
      'platform-browser-dynamic', 
      'router', 
      'router-deprecated', 
      'upgrade', 
     ]; 

     // Individual files (~300 requests): 
     function packIndex(pkgName) { 
      packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
     } 
     // Bundled (~40 requests): 
     function packUmd(pkgName) { 
      packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 
     } 

     // No umd for router yet 
     packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' }; 

     // Forms not on rc yet 
     packages['@angular/forms'] = { main: 'index.js', defaultExtension: 'js' }; 


     // Most environments should use UMD; some (Karma) need the individual index files 
     var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 
     // Add package entries for angular packages 
     ngPackageNames.forEach(setPackageConfig); 

     var config = { 
      paths: { 
      'app/*': './dist/*' 
      }, 
      map: map, 
      packages: packages 
     }; 

     System.config(config); 

     })(this); 

package.json

{ 
    "name": "sg-associate-portal", 
    "version": "2.0.0", 
    "description": "This is an application for SenecaGlobal", 
    "repository": "", 
    "scripts": { 
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 
    "lite": "lite-server", 
    "postinstall": "typings install", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "typings": "typings" 
    }, 
    "license": "Apache-2.0", 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.4", 
    "@angular/compiler": "2.0.0-rc.4", 
    "@angular/core": "2.0.0-rc.4", 
    "@angular/forms": "0.2.0", 
    "@angular/http": "2.0.0-rc.4", 
    "@angular/platform-browser": "2.0.0-rc.4", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.4", 
    "@angular/router": "3.0.0-beta.1", 
    "@angular/router-deprecated": "*", 
    "@angular/upgrade": "2.0.0-rc.4", 
    "@vaadin/angular2-polymer": "1.0.0-beta2", 
    "angular2-in-memory-web-api": "0.0.14", 
    "bootstrap": "^3.3.6", 
    "core-js": "^2.4.0", 
    "moment": "^2.14.1", 
    "pace": "0.0.4", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "sweetalert2": "*", 
    "systemjs": "0.19.27", 
    "zone.js": "^0.6.12" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "lite-server": "^2.2.0", 
    "typescript": "^1.8.10", 
    "typings": "^1.0.4" 
    } 
} 

Помоги мне!

Я заметил, что приложение не могло загружать компоненты за пределы папки. i.e, Если компонент «A» находится в папке «1» корня , компонент «B» находится в папке «2» корня; приложение не может загрузить компонент B из компонента A. Он всегда пытается найти компоненты только в текущей папке.

Answer 1

Сообщение об ошибке вы приложенный говорит, что он ищет компонент поиска в Dist/сподвижников /shared/lookup/lookup.component.ts.

Я думаю, что ваш импорт для компонента поиска в «приложение/ассоциированную/abc.component.ts» неправильна ...

Answer 2

На вопрос - вы, вероятно, не хватает на обходе. то есть «../»

Во-вторых, эти ошибки должны отображаться во время компиляции. Если у вас нет веских причин использовать облегченный-сервер, использование Webpack для развития - позволит значительно сократить время отладки таких ошибок наряду с другими преимуществами

https://angular.io/docs/ts/latest/guide/webpack.html