无法加载我自己的组件-angular2

Question

I was unable to load component that was located at 'app/shared/lookup/lookup.component.ts' from 'app/associate/abc.component.ts'

My folder structure

Error

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"
  ]
}

Here is my System 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"
  }
}

Help me!

I have observed that app was unable to load components outside the folder. ie, If component 'A' is located in folder '1' of root component 'B' is located in folder '2' of root; app is unable to load component B from component A. It is always trying to search the components with respect to current folder only.

Answer 1

The error message you attached says it is looking for the lookup component in dist/ associates /shared/lookup/lookup.component.ts.

I think your import for the lookup component in 'app/associate/abc.component.ts' is incorrect...

Answer 2

On the question - you are probably missing out on a traversal. ie "../"

Second, These errors should show up at compile time. If you do not have a strong reason to use lite-server, use webpack for development - will significantly reduce your time debugging such errors along with other benefits

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