gpt4 book ai didi

Angular 2引导主要组件不起作用

转载 作者:太空狗 更新时间:2023-10-29 17:07:14 29 4
gpt4 key购买 nike

我有以下文件和代码:index.html:

<!doctype html>
<html>
<head lang="en">
<title>Angular 2 Components</title>
</head>
<body>
<ngc-app></ngc-app>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2-polyfills.js"></script>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('lib/bootstrap.js');
</script>
</body>
</html>

bootstrap.js:

// Import Angular bootstrap function
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
// Import our main app component
import {App} from './app';
// We are bootstrapping Angular using our main application component
bootstrap(App);

app.js:

// We need the Component annotation as well as the
// ViewEncapsulation enumeration
import {Component, ViewEncapsulation} from '@angular/core';
// Using the text loader we can import our template
import template from './app.html!text';
// This creates our main application component
@Component({
// Tells Angular to look for an element <ngc-app> to create this component
selector: 'ngc-app',
// Let's use the imported HTML template string
template,
// Tell Angular to ignore view encapsulation
encapsulation: ViewEncapsulation.None
})
export class App {}

和我的 app.html 文件:

<div>Hello World!</div>

package.json:

{
"name": "taskmanagement",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"jspm": "^0.16.52"
},
"jspm": {
"dependencies": {
"@angular/common": "npm:@angular/common@^2.4.7",
"@angular/compiler": "npm:@angular/compiler@^2.4.7",
"@angular/core": "npm:@angular/core@^2.4.7",
"@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@^2.4.7",
"rxjs": "npm:rxjs@^5.1.0",
"text": "github:systemjs/plugin-text@^0.0.9"
},
"devDependencies": {
"typescript": "npm:typescript@^2.0.7"
}
}

但是在浏览器中显示如下错误: enter image description here

我已经搜索并发现每个主要组件都在 NgModule 中,但是根据我正在阅读的书,没有任何模块,也没有提到创建那个模块.那么这有什么问题,我应该创建模块文件吗?对于任何帮助和指导,谢谢。

最佳答案

首先,您通过脚本标签加载的 Angular polyfill 与您通过 jspm 安装的版本之间似乎存在版本不匹配。

其次,我认为您的问题的主要原因是您拥有的 Bootstrap 逻辑对于最新版本的 angular 2 不再正确。

你有

// Import Angular bootstrap function
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
// Import our main app component
import {App} from './app';
// We are bootstrapping Angular using our main application component
bootstrap(App);

你需要

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule, {
useDebug: true
});

这意味着您需要创建一个 AppModule 并在其中导入和连接您的应用程序组件,然后将其传递给 Bootstrap 。看起来像这样

app.module.ts

import {NgModule} from '@angular/core';
import {App} from './app';

@NgModule({
declarations: [App],
bootstrap: [App],
})
export class AppModule {}

关于Angular 2引导主要组件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42128378/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com