无法在我的笔记本电脑上运行Angular 4组件,但在在线IDE上运行正常

时间:2017-11-09 15:22:11

标签: angular typescript components webstorm

我创建了一个新项目并在里面添加了新组件但是一旦我运行它就完全不起作用了。我的意思是它没有与应用程序组件文件链接,但我尝试使用stackblitz创建一个组件并且它运行正常!

这是我的应用结构

structure

这就是您可能需要查看的所有代码

app.component.ts

    import { Component } from '@angular/core';

    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent {
     title = 'app';
     }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';

@NgModule({
declarations: [
AppComponent,
FirstComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<h1>Welcome.</h1>
<hr>
<app-first></app-first>

然后我的组件名称为first.component

first.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-first',
templateUrl: './first.component.html'
})

export class FirstComponent {
}

first.component.html

<h2>Hi</h2>
<p>helllooooooooo</p>

我在stackblitz中做了同样的事情并且它的工作完全没问题,当我在笔记本电脑上的WebStorm上运行它时它不起作用,只有应用程序组件html工作而没有首先链接应用程序。

我正在跑步

Windows 10 win32 x64 
Angular cli version 1.4.9
node: 8.8.1
npm 5.4.2

如果我做错了,请告诉我。如果您需要更多资源,请直接询问。

0 个答案:

没有答案