Question

我正在开发一个带有nodejs和gulp的angular2应用程序。我在客户端文件夹中写了我的打字稿文件，我的gulp任务完成了这些文件并将它们放在公共文件夹中。

将components.ts文件保存为：

import {Component, View} from 'angular2/angular2';
import {FormBuilder,  formDirectives } from 'angular2/forms';
@Component({
  selector: 'login',
  injectables: [FormBuilder]
})
@View({
  templateUrl: '/scripts/src/components/login/login.html',
  directives: [formDirectives]
})

export class login {

}

这是我的引导程序文件

import {bootstrap} from 'angular2/angular2';

import {login} from './components/login/login';

bootstrap(login);

这是我的index.html

<!doctype HTML>
<html>

<head>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.27/router.dev.js"></script>

</head>

<body>
    <div class="container">
        <login></login>
    </div>
    <script>
        System.import('scripts/src/bootstrap');
    </script>
</body>

</html>

这是我的server.js文件设置，位于 app文件夹

app.use(express.static(path.join(__dirname, '../public')));

但是当我在浏览器中加载我的应用程序时，无法加载模板

这是我的文件结构

Answer 1

我在编码中发现的错误很少见：

首先，您的导入不正确，您可以针对angular2 Beta的所有更新导入引用此问题。 https://stackoverflow.com/a/34354666/5043867
Formdirectives已更改为FORM_DIRECTIVES。
您的路径不正确我认为来自bootstraped文件的login.html文件。

最重要的是，ANgular2现在处于测试阶段，你现在仍在使用alpha26（现在已经太老了）。

Answer 2

使用template而非templateUrl。像template: require( './login.html )

这样的东西

正如其他人所提到的，你应该使用Beta 1，因为人们更倾向于回答问题。

HTH

无法在节点应用程序中加载angular2模板

2 个答案: