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

Question

我无法从'app / associate / abc.component.ts'加载位于'app / shared / lookup / lookup.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"
  ]
}

这是我的系统配置

/**
       * 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"
  }
}

帮助我！

我发现应用无法加载文件夹外的组件。 即， 如果组件“A”位于root的“1”文件夹中 组件'B'位于root的'2'文件夹中; app无法从组件A加载组件B. 它总是试图仅针对当前文件夹搜索组件。

Answer 1

您附加的错误消息表明它正在dist / 关联 /shared/lookup/lookup.component.ts中查找查找组件。

我认为你在'app / associate / abc.component.ts'中对查找组件的导入是不正确的......