Question

我在bootstrap.ts中包含appcomponent，但仍未定义appComponent，导致错误＆＃34;必须定义令牌＆＃34;

这是我的appComponent.ts文件

'use strict'
import {Component} from '../../angular2/core';
@Component({
  selector: 'app',
  templateUrl: 'components/app/app.html'
})


export class appComponent {
    message:string='Hello html'; 
}

和boot.ts文件

"use strict";
import {bootstrap} from '../angular2/platform/browser';
import {appComponent} from './app/appComponent';
console.log('appComponent',appComponent)//appComponent is undefined here
bootstrap(appComponent);

Answer 1

如果您通过NPM依赖项使用Angular2包，则需要包含一组JavaScript文件。这样，当添加带有angular2/标记的相应JS文件时，Angular2会根据前缀script注册其入口点模块。因此，您应该使用angular2/core，angular2/common等模块，...您在导入中定义的内容实际上不是路径，而是已注册模块的名称。

路径（具有相对路径）的分辨率用于应用程序本身的代码，最终用于第三方库（例如，如果您在TypeScript中使用它们的源代码）。

SystemJS的以下配置显示，对于app子文件夹，SystemJS将查找要按路径导入的模块：

System.config({
  packages: {        
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  }
});

例如，如果您导入路径./app/app.component，SystemJS将尝试动态加载从./app/app.component.js文件转换而来的./app/app.component.ts文件。

希望它可以帮到你，亨利

Answer 2

不要使用角度2的相对导入，因为它们在浏览器中运行时不会匹配。

而是使用import {Component} from 'angular2/core';并在"moduleResolution": "node"文件中使用编译器选项tsconfig.json。

关于未定义的错误。这意味着您的相对路径不正确，或，并且很可能......您的模块加载器未正确确定模块的路径。要检查这一点，请确保开发人员工具中的“网络”选项卡显示来自正确位置的正确文件，并且文件具有正确的扩展名（例如：.js）

在boot.ts中未定义appComponent

2 个答案: